微信小程序绘制图片并保存到相册功能 wxml2canvas

微信小程序绘制图片并保存到相册功能 wxml2canvas

主要用到的插件是wxml2canvas

https://github.com/wg-front/wxml2canvas插件下载地址感谢大佬的插件

上代码

drawCanvas() {
let self = this;
const systemInfo = wx.getSystemInfoSync();
console.log(systemInfo);
this.drawImage1 = new Wxml2Canvas({
  width: systemInfo.screenWidth, // 宽， 以iphone6为基准，传具体数值，其他机型自动适配
  height: systemInfo.screenHeight, // 高
  element: 'canvas1',
  background: '#fff',
  progress(percent) {
  },
  finish(url) {
    console.log(url);
    wx.saveImageToPhotosAlbum({
      filePath: url,
      success(res) {
        wx.showToast({
          title: '名片已经保存到相册中',
        })
      },
      fail:function (err) {
        console.log(err);
      }
    })
  },
  error(res) {
  }
});
let data = {
  list: [{
    type: 'wxml',
    class: '.share__canvas1 .draw_canvas', // draw_canvas指定待绘制的元素
    limit: '.share__canvas1', // 限定绘制元素的范围，取指定元素与它的相对位置
    x: 0,
    y: 0
  }]
}
	this.drawImage1.draw(data);
 }

重点是绘制的图片必须要先缓存到本地，这样绘制出来的才会有效不然图片是显示不了的

wx.getImageInfo({
  src: url,
  success(res) {
    that.setData({
      [`${key}`]: res.path,
    })
  }
})

图片的标签上附上data-url=缓存好的地址