收藏
回答

canvas压缩图与原图不一致,求大佬们指点?

function (canvas_id, file_url, targetWidth, targetHeight) {

wx.getImageInfo({

      src: file_url,

      success(res) {

        let targetWidth = res.width;

          targetHeight = res.height;


        let ctx = wx.createCanvasContext(canvas_id);

        ctx.clearRect(0, 0, targetWidth, targetHeight);

// ctx.drawImage(file_url, 0, 0, targetWidth, targetHeight);

// 运行上面这句,压缩的图与原图(file_url)有区别,就是高度被截取了一点,如果运行下面这句

// 就可以了,问题虽然解决了,就是不明白这是为啥,有没有大佬指点一下

// 这是封装的一个方法,其中有些删减,但是问题就是这个

         ctx.drawImage(file_url, 0, 0, targetWidth, targetHeight/2);

       


        ctx.draw(false, function () {

          // 获得新图片输出

          wx.canvasToTempFilePath({

            x: 0,

            y: 0,

            canvasId: canvas_id,

            destWidth: targetWidth,

            destHeight: targetHeight,

            quality: 0.9,

            fileType: "jpg",

            success: (res) => {

              console.log(res)

              resolve(res.tempFilePath);              

            },

            fail: (err) => {

              console.error(err)

            }

          }, this)

        })

}

     

回答关注问题邀请回答
收藏

2 个回答

  • L  ei  L
    L ei L
    2022-03-31

    问题已解决,标签名为(canvas_id)的 canvas 没有设置 style, 默认w300 h150

    所以 ctx.drawImage(file_url, 0, 0, targetWidth, targetHeight/2) 中的 targetWidth = 300

    targetHeight/2 = 150 ,才与原图保持一致

    2022-03-31
    有用
    回复
  • 搜客科技
    搜客科技
    2022-03-22

    wx.createCanvasContext 已经不支持了

    2022-03-22
    有用
    回复
登录 后发表内容