收藏
回答

如何使用RenderingContext压缩图片(压缩后图片为空白)?

借鉴了网上的代码,使用画布,将图像重绘后,保存。试了两种保存方法,都返回空白图片。基础库:2.21.4

WXML:

JS: (确定了传入的img_src是对的,在开发者工具里似乎把本地图片链接都转为http链接了)

var that = this;
wx.getImageInfo({
      src: img_src,  
      success(res){
      //---------利用canvas压缩图片--------------
        var canvasHeight =300;
                var canvasWidth = 400;
        that.setData({
          cHeight: canvasHeight,
          cWidth: canvasWidth
        });
        wx.createSelectorQuery()
          .select('#myCanvas'// 在 WXML 中填入的 id
          .fields({ nodetruesizetrue })
          .exec((res) => {
              // Canvas 对象
              const canvas = res[0].node
              // Canvas 画布的实际绘制宽高
              const renderWidth = res[0].width
              const renderHeight = res[0].height
              // Canvas 绘制上下文
              const ctx = canvas.getContext('2d')
              // 初始化画布大小
              const dpr = wx.getWindowInfo().pixelRatio
              canvas.width = renderWidth * dpr
              canvas.height = renderHeight * dpr
              ctx.scale(dpr, dpr)
              var img = canvas.createImage();
              img.src= img_src;
              ctx.drawImage(img, 00,canvasWidth,canvasHeight)
              //下面是两种保存方法,
              wx.canvasToTempFilePath({
                canvas: canvas,
                success(res){
                  that.setData({
                    temp:  res.tempFilePath
                  })
                  _img = res.tempFilePath;
                  console.log("chenggong")
                },
                fail(res){
                  console.log("shibai")
                  console.log(res.data)
                }
              })
              const path = canvas.toDataURL("image/jpeg"0.7//返回值是一个数据url,是base64组成的图片的源数据、可以直接赋值给图片的src属性
              that.setData({
                base64_img: path,
                base64true
              })
              console.log(path)
        })
      }
    }) 


最后一次编辑于  2022-09-05
回答关注问题邀请回答
收藏

2 个回答

  • 李浩
    李浩
    2022-09-05

    https://developers.weixin.qq.com/s/abDja2mq7oCa

    补充代码片段

    2022-09-05
    有用
    回复 4
    • y40,
      y40,
      2022-09-05
      2022-09-05
      回复
    • 李浩
      李浩
      2022-09-05回复y40,
      我打算canvas解决不了再用这个,毕竟compressImage 只能用来压缩jpg格式。现在问题是我用canvas不知道哪里错了。代码是网上看别人,别人能跑,我怎么不能跑。
      2022-09-05
      回复
    • 李浩
      李浩
      2022-09-06
      已解决,在保存前加了个延时,延时1S,成功解决
      2022-09-06
      回复
    • 李浩
      李浩
      2022-09-06回复李浩
      还要加一个img.load(), 吃了不注意异步的亏
      2022-09-06
      3
      回复
  • y40,
    y40,
    2022-09-05
    没那么复杂,canvasToTempFilePath中添加两个参数即可。
    wx.canvasToTempFilePath
          ...
          fileType: 'jpg',
          quality: 0.7,
    


    2022-09-05
    有用
    回复 1
    • 李浩
      李浩
      2022-09-05
      没有用,还是一样
      2022-09-05
      回复
登录 后发表内容