Wxml2Canvas是什么?
Wxml2Canvas 是一个用于微信小程序开发的工具库,主要用途是将小程序页面的内容绘制成图片,以便生成海报或保存分享图片到相册等功能。具体用途包括:
①海报生成功能:允许开发者将当前页面的特定部分或整个页面内容绘制到 Canvas 上,并导出为图片,用于生成自定义的海报。
②分享图片生成:可以将页面内容(如用户生成的图表、统计数据等)转换为图片形式,方便用户保存或分享到社交平台。
③动态数据展示:支持将动态生成的数据内容实时绘制到 Canvas 上,使得用户可以查看并导出实时更新的信息。
④自定义绘制:可以根据项目需求自定义绘制逻辑,包括绘制图形、文本、图片等元素,以满足复杂的界面设计和展示要求。
⑤用户交互的延展:通过将用户交互的内容绘制到图片上,可以实现一些特殊的需求,如生成用户定制的表单、报告等。
总之,Wxml2Canvas 提供了一种在微信小程序中动态生成图片的有效方法,极大地增强了小程序开发的可视化和用户互动性。
1.效果
2.下载依赖
npm install wxml2canvas --save
3.微信开发者 工具==》构建npm
4.需要生成海报得页面引入Wxml2Canvas (根据自己得路径来)
import Wxml2Canvas from '../../miniprogram_npm/wxml2canvas/index'
5.完整代码 index.wxml
<view style="position: relative;height: 100%;overflow: hidden;width: 100%;">
<view style="position: relative;z-index: 999;" catchlongpress="savePoster">
<canvas canvas-id="canvas2" class="share__canvas"></canvas>
</view>
<view style="position: absolute;left: 0;top: 0;opacity: 0;" >
<view id="share__canvas2" data-index="2" class="share__canvas share__canvas2">
<image data-index="2" class="share__canvas2-image draw_canvas" data-type="image" data-url="{{hb_bg}}" src="{{hb_bg}}" ></image>
<image data-index="2" class="share__canvas2-image-2 draw_canvas" data-type="image" data-url="{{hb_wx2code}}" src="{{hb_wx2code}}" mode="widthFix" data-mode="scaleToFill"></image>
<image data-index="2" class="share__canvas2-image-3 draw_canvas" data-type="image" data-url="" src="" mode="widthFix" data-mode="scaleToFill"></image>
</view>
</view>
</view>
6.index.js
import Wxml2Canvas from '../../miniprogram_npm/wxml2canvas/index'
Page({
data: {
imgUrl:"", // 存储海报图片路径
width:"", // canvas宽度
height:"", // canvas高度
hb_wx2code: "https://img1.baidu.com/it/u=221788990,2355506378&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
hb_bg: "https://img1.baidu.com/it/u=3918992979,2476051043&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
},
/**
* 生命周期函数--监听页面加载
* 页面加载时触发,延迟500ms后调用drawMyCanvas()绘制canvas
*/
onLoad(options) {
setTimeout(() => {
this.drawMyCanvas();
}, 500);
},
/**
* 绘制canvas
* 使用wx.createSelectorQuery()获取选择器查询对象,获取指定范围内的宽度和高度,并设置到data中,
* 然后在延迟1.5秒后调用startDraw()开始绘制canvas
*/
drawMyCanvas() {
wx.showLoading({
mask: true
});
const that = this;
const query = wx.createSelectorQuery().in(this);
query.select('#share__canvas2').fields({
size: true,
scrollOffset: true
}, data => {
console.log("获取宽度", data);
let width = data.width;
let height = data.height;
that.setData({
width,
height
});
setTimeout(() => {
that.startDraw();
}, 1500);
}).exec();
},
/**
* 开始绘制canvas
* 创建Wxml2Canvas对象,设置canvas的id、宽度、高度、背景色等参数,
* 调用draw()方法开始绘制canvas内容,并在绘制完成后隐藏加载框,更新海报图片路径到data中
*/
startDraw() {
let that = this;
// 创建wxml2canvas对象
let drawMyImage = new Wxml2Canvas({
element: 'canvas2', // canvas的id
width: that.data.width * 2, // canvas宽度(实际像素倍增)
height: that.data.height * 2, // canvas高度(实际像素倍增)
obj: that,
background: '#141415',// 背景色
progress(percent) {
console.log(percent);// 绘制进度回调(未使用)
},
finish(url) {
console.log("完成", url); // 绘制完成回调,输出绘制完成的图片路径
wx.hideLoading();// 隐藏加载框
that.setData({
imgUrl: url // 将绘制完成的图片路径更新到data中
});
},
error(res) {
console.log(res); // 绘制出错回调(未使用)
wx.hideLoading(); // 隐藏加载框
}
});
let data = {
list: [{
type: 'wxml',
class: '.share__canvas2 .draw_canvas',
limit: '.share__canvas2',
x: 0,
y: 0
}]
};
drawMyImage.draw(data, this); // 调用Wxml2Canvas的draw方法开始绘制
},
/**
* 保存海报到相册
* 调用wx.saveImageToPhotosAlbum()保存海报图片到相册,若保存失败则进行授权提示
*/
savePoster() {
const that = this;
wx.saveImageToPhotosAlbum({
filePath: that.data.imgUrl, // 海报图片路径
success: function () {
wx.showToast({
title: '保存成功',
icon: 'none',
duration: 1500
});
},
fail(err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.saveImageToPhotosAlbum({
filePath: that.data.imgUrl,
success: function () {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
},
});
} else {
wx.showToast({
title: '授权失败,请稍后重新获取',
icon: 'none',
duration: 1500
});
}
}
});
}
});
}
}
});
},
})
7.样式代码
.share__canvas {
width: 100vw;
height: 100vh;
font-size: 32rpx;
}
.share__canvas2 {
position: relative;
}
.share__canvas2-image {
width: 100%;
height: 100%;
}
.share__canvas2-image-2 {
width: 200rpx;
position: absolute;
left: 100rpx;
bottom: 80rpx;
}
.share__canvas2-image-3 {
width: 350rpx;
position: absolute;
left: 190rpx;
bottom: 350rpx;
}
8.注意:外层容器 .share__canvas一定要写宽高,否则里面元素使用百分比,页面生成出来的是空白