Canvas将图片画小反而越画尺寸越大,为什么?
发布于 5 年前 作者 fangzhang 4615 次浏览 来自 问答

在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比初始没压缩的宽度都要宽

回到顶部