当前位置：首页 > news >正文

原生微信小程序wxml2canvas生成海报并包保存至本地

news 来源：原创 2024/9/21 3:25:43

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的idwidth: 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一定要写宽高，否则里面元素使用百分比，页面生成出来的是空白