微信小程序将图片保存到本地的方法

Posted 2021-09-13 隔壁大颜子

记一下小程序canvas2D把图片合并然后下载的功能。
首先wxml中写上canvas标签：

<canvas id="myImg" type="2d" style="width:546rpx;height:762rpx"></canvas>

记得加上“type=2d”，之后就是获取画布

const query = wx.createSelectorQuery(); //返回一个对象实例
query.select(\'#myImg\').node().exec(res => {
    let canvas = res[0].node;
    let ctx = canvas.getContext(\'2d\'); //获取画布
    _this.render(canvas,ctx,codeUrl);
});

这里的大概意思就是先获取到canvas节点，然后根据这个节点获取一块对应的画布，canvas这个标签实际上就是一个普通的标签，要想在这个上面画图，就首先要拿到一张画布然后才能在这个画布上面去涂涂抹抹。之后就开始涂抹了：

render(canvas, cxt, codeUrl) {
    let dpr = wx.getSystemInfoSync().pixelRatio;//获取设备的像素比
    canvas.width = 273 * dpr;
    canvas.height = 381 * dpr;
    let shareImg = "/images/poster.png";
    let bgImg = canvas.createImage();
    bgImg.src = shareImg;
    bgImg.onload = () => {
      cxt.drawImage(bgImg, 0, 0, 273 * dpr, 381 * dpr);
      let codeImg = canvas.createImage();
      codeImg.src = codeUrl;
      codeImg.onload = () => {
        cxt.drawImage(codeImg, 200 * dpr, 305 * dpr, 70 * dpr, 70 * dpr);
        wx.canvasToTempFilePath({
          canvas: canvas,
          destHeight: 381 * 750 / wx.getSystemInfoSync().windowWidth, //输出图片的高度
          destWidth: 273 * 750 / wx.getSystemInfoSync().windowWidth, //输出图片的宽度
          width: 273 * dpr, //画布的宽度
          height: 381 * dpr, //画布的高度
          success: (ret) => {
            this.setData({
              goodsImg: ret.tempFilePath,
            });
          },
          fail: (err) => {
            console.log(err);
          }
        })
      }
    }
  }
  

将图片转成canvas合并然后保存成图片最长出现的一个问题就是图片会变得很模糊，所以这里要注意两个问题，一个是render开头去获取像素比，然后在转成临时图片地址的时候设置画布的宽高都要乘以像素比，还有就是输出图片的宽高都要乘 750 / wx.getSystemInfoSync().windowWidth。

这里吧，讲真的我也没有完全理解这里面的原理，但是我之前只用像素比的时候没有现在这种方法下载出来的清晰，希望知道的大佬能帮忙解释一下。
转成临时图片地址之后就简单啦，wx.saveImageToPhotosAlbum()把图片下载下来就可以了，这里就必须说一下，官方文档很重要的。

over，主要是记录一下小程序图片合并的方法，还有就是想问问有没有更好的图片更清晰的方法，谢谢！！

啊，最后，我发现ios里面createSelectorQuery()的回调好像没有用哦，也没看到官方回复说解决了，所以最后我找了后端帮我合并然后直接返回地址给我我只要下载就行了哈哈哈哈哈，贼高清。