imgArray1: function(e) {
var a = this, t = 9 - _imgArray.length;
0 < t && t <= 9 ? wx.chooseImage({
count: t,
sizeType: ['compressed'],
sourceType: [ "album", "camera" ],
success: function(e) {
wx.showToast({
icon: "loading",
title: "正在上传"
});
// var t = e.tempFilePaths;
a.getCanvasImg(0, 0, e.tempFilePaths);
}
}) : wx.showModal({
title: "上传提示",
content: "最多上传9张图片",
showCancel: !0,
cancelText: "取消",
confirmText: "确定",
success: function(e) {},
fail: function(e) {},
complete: function(e) {}
});
},
//压缩并获取图片,这里用了递归的方法来解决canvas的draw方法延时的问题
getCanvasImg: function (index, failNum, tempFilePaths) {
var that = this, n = wx.getStorageSync("uniacid");
if (index < tempFilePaths.length) {
wx.getImageInfo({
src: tempFilePaths[index],
success: function (res) {
console.log(res)
if (res.width > 500 || res.height > 500) {//判断图片是否超过500像素
var scale = res.width / res.height
console.log(scale)
that.setData({//构造画板宽高
canWidth: 500,
canHeight: 500 / scale
})
var ctx = wx.createCanvasContext('photo_canvas');
ctx.drawImage(tempFilePaths[index], 0, 0, that.data.canWidth, that.data.canHeight);
ctx.draw(true, function () {
index = index + 1;//上传成功的数量,上传成功则加1
wx.canvasToTempFilePath({
canvasId: 'photo_canvas',
quality: 0.8,
success: function success(res) {
that.uploadimg({
url: that.data.url + "app/index.php?i=" + n
path: [res.tempFilePath]
});
that.getCanvasImg(index, failNum, tempFilePaths);
}, fail: function (e) {
failNum += 1;//失败数量,可以用来提示用户
that.getCanvasImg(inedx, failNum, tempFilePaths);
}
});
});
} else {
that.uploadimg({
url: that.data.url + "app/index.php?i=" + n
path: tempFilePaths
});
}
}
})
}
},
这个写法有什么问题?这是原图和上传后的图片对比,
that.data.canWidth, that.data.canHeight 使用图片的宽高,而不是画布的