微信小程序绘制图片并保存到相册功能 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=缓存好的地址