乐趣区

关于前端:微信小程序将图片保存到本地的方法

jiezi

记一下小程序 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() 的回调如同没有用哦，也没看到官网回复说解决了，所以最初我找了后端帮我合并而后间接返回地址给我我只有下载就行了哈哈哈哈哈，贼高清。

退出移动版