Canvas将图片画小反而越画尺寸越大,为什么?
在iOS是真机上画出的图片还是有按比例缩小的,安卓的越压缩越大,机型vivo NEX安卓10以下是代码
// imginfo.originWidth 是初始的宽度 imginfo.originHeight 是初始的高度
// imginfo.toWidth和imginfo.toHeight是希望压缩到的宽度和高度
while (imginfo.toWidth > 750) { // 限制宽度不超过750
imginfo.toWidth /= 2;
imginfo.toHeight /= 2;
}
//设置canvas的宽高
that.setData({ toHeight: imginfo.toHeight / 2, toWidth: imginfo.toWidth / 2 });
const ctx = wx.createCanvasContext('photo_canvas');
console.log(imginfo.toWidth / 2, imginfo.toHeight / 2);
ctx.drawImage(tempFilePaths[0], 0, 0, imginfo.originWidth, imginfo.originHeight, 0, 0, imginfo.toWidth / 2, imginfo.toHeight / 2);
console.log(imginfo);
ctx.draw(false, () => {
wx.canvasToTempFilePath({
canvasId: 'photo_canvas',
fileType: 'jpg',
success(canvasRes) {
console.log('XXXXXYYXXXXX', canvasRes);
wx.getImageInfo({
src: canvasRes.tempFilePath,
success(imG) {
console.log('OOOOOO', imG); // 这里打印的宽高比初始的图片宽高还大
}
});
// 上传文件
that.uploadImageFetch([canvasRes.tempFilePath], imgType, stepIndex);
}
最上面的第二行打印的是要压缩到的宽度和高度375 和 804也就是drawImage的最后两个参数,结果
canvas画出的图片宽高是下面的
OOOOOO下面的就是canvas画出的图片宽度竟然是1125比初始没压缩的宽度都要宽