data: {
canvas_width0:1000,
canvas_height0:1000,
canvas_width1: 1000,
canvas_height1: 1000,
canvas_width2: 1000,
canvas_height2: 1000,
canvas_width3: 1000,
canvas_height3: 1000,
photoTaken:false,
photoSrc:[]
},
getPhoto(url) {
var that = this;
var strImg = [];
function __url2base64(url,index) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: url,
success: function (res) {
var width = res.width;
var height = res.height ;
var canvas_height = null;
var canvas_width = null;
if (width > height) {
canvas_width = 1000;
canvas_height = Math.floor(height / width * canvas_width);
} else {
canvas_height = 1000;
canvas_width = Math.floor(width / height * canvas_height);
}
var fc = 'firstCanvas' + index;
let canvas_size = {}
canvas_size['canvas_width' + index] = canvas_width;
canvas_size['canvas_height' + index] = canvas_height;
that.setData({
...canvas_size
})
setTimeout(()=>{
var ctx = wx.createCanvasContext(fc);
ctx.clearRect(0, 0, that.data['canvas_width' + index], that.data['canvas_height' + index]);
ctx.drawImage(url, 0, 0, that.data['canvas_width' + index], that.data['canvas_height' + index]);
ctx.draw(true, function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data['canvas_width' + index],
height: that.data['canvas_height' + index],
destWidth: that.data['canvas_width' + index],
destHeight: that.data['canvas_height' + index],
canvasId: 'firstCanvas' + index,
success: function (res) {
resolve(res.tempFilePath)
}
})
})
}, 300)
},
fail: function (res) { },
complete: function (res) { },
})
})
}
return Promise.all(that.photoSrc.map((m,index) => __url2base64(m,index)))
},
chooseImgHandler(){
var that = this;
wx.chooseImage({
count: 4, // 默认9
sizeType: ['original'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
that.photoSrc = tempFilePaths;
that.uploadImage();
},
complete: function () {
}
})
},
uploadImage: function () {
if(this.updateLoading === true){
return false;
}
this.updateLoading = true;
wx.showLoading({
title: '上传中',
})
var that = this;
that.getPhoto(that.photoSrc).then(
(canvas_url_array) => {
var _urlStr = [];
for (var k = 0; k < canvas_url_array.length; k++) {
wx.uploadFile({
url: '你的提交地址', //仅为示例,非真实的接口地址
filePath: canvas_url_array[k],
name: 'file',
formData: {
'user': 'test'
},
success: function (res) {
var _data = JSON.parse(res.data);
_urlStr.push(_data.url);
if (_data.state == "SUCCESS") {
if (_urlStr.length == canvas_url_array.length){
var _url = _urlStr.join(',')
that.updateLoading = false;
wx.navigateTo({
url: '/pages/scaning/scaning?sessionId=' + sessionId + '&img_url=' + _url
})
wx.hideLoading()
}
}
},
complete: function () {
that.updateLoading = false;
}
})
}
}
);
}
scaning 页面为webview 打印信息宽高都没问题 出来的图就是有拉伸
本文网址:http://www.91bianli.com/weixinxiaochengxu/43020.html