现象:
封装了canvas压缩图片,上传时少数用户会出现渲染图片只有一部分的现象。这些错误图片大多数的比例和默认图片的比例相近,我一直怀疑是drawImage
带来的错误,但是里面参数错误带来的要么是全黑屏、要么是白屏,无法复现现在这种情况。
/////////////////页面上的使用////////////////////
compressImage({
file: src, // 网络图片地址
canvasId: 'photo_canvas', // canvasId
towidth: 320, // 图片宽度
quality: 0.7, // 图片质量
success: function(res) {
fn(res);
},
self // 全局this
});
/////////////////下边是组件/////////////////
let count; // 重试次数
function compressImage({ file, canvasId, towidth, quality = 1, success = function() {}, self = {} }) {
count = 0;
// 获得图片信息
uni.getImageInfo({
src: file,
success: function (info) {
// 创建画布
const ctx = uni.createCanvasContext(canvasId);
towidth = towidth || info.width;
// 根据图片比例换算出图片高度
const toheight = Math.trunc(towidth * info.height / info.width);
// 绘制成图片
ctx.drawImage(file, 0, 0, info.width, info.height, 0, 0, towidth, toheight);
// 绘制到画布上面
ctx.draw(false, function () {
getTempFile(canvasId, quality, success, self);
});
},
fail: function(e) {
self.submitLoading = false;
self.submitText = '确认提交';
uni.showToast({
title: '获取图片信息失败',
duration: 2000,
icon: 'none'
});
}
});
}
function getTempFile(canvasId, quality, success, self) {
setTimeout(() => {
// canvas转化为文件路径
uni.canvasToTempFilePath({
canvasId: canvasId,
fileType: 'jpg', // 默认是png,可以传png和jpg
quality: quality,
success: function (res) {
// 成功之后返回路径
success(res.tempFilePath);
},
fail: function (e) {
count += 1;
if (count < 20) {
getTempFile(canvasId, quality, success, self);
} else {
self.submitLoading = false;
self.submitText = '确认提交';
uni.showToast({
title: '生成图片失败',
duration: 2000,
icon: 'none'
});
}
}
});
}, 100);
}
module.exports = {
compressImage
};
画布大小和图片大小不一致