收藏
回答

使用canvas的drawImage压缩图片,部分用户导致黑屏,问题出在哪?

现象:

封装了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, 00, info.width, info.height, 00, towidth, toheight);
      // 绘制到画布上面
      ctx.draw(falsefunction () {
        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
};
回答关注问题邀请回答
收藏

1 个回答

  • H1HAO 🇨🇳
    H1HAO 🇨🇳
    2020-06-08

    画布大小和图片大小不一致

    2020-06-08
    有用
    回复
登录 后发表内容
问题标签