1、下载
小程序内部要安装wxml2canvas
github地址：https://github.com/liudongyun1215/wxml2canvas
1.1、初始化package.json, 下面两种代码都可以初始化package.json
npm init
yarn init
1.2、安装wxml2canvas
yarn add wxml2canvas
npm i wxml2canvas
1.3、构建npm
2、使用
2.1、在js页面引入
import Wxml2Canvas from 'wxml2canvas';
2.2、在js中使用， 需要在使用的方法中引用drawCanvas
drawCanvas: function () {
wx.showLoading({
title: '加载中'
})
const that = this
const query = wx.createSelectorQuery().in(this);
query.select('#answer-canvas').fields({ //answer-canvas要绘制的canvas的id
size: true,
scrollOffset: true
}, data => {
let width = data.width;
let height = data.height;
console.log(width, height);
that.setData({
width: width,
height: height
})
setTimeout(() => {
that.draw()
}, 1500);
}).exec()
},
draw(){
let that = this
//创建wxml2canvas对象
let drawImage = new Wxml2Canvas({
element: 'answerCanvas', // canvas节点的id,
obj: that, // 在组件中使用时，需要传入当前组件的this
width: 696, // 宽 自定义
height: 522, // 高 自定义
background: 'transparent', // 默认背景色 设置背景色
progress(percent) { // 绘制进度
// console.log(percent);
},
finish(url) {
console.log("创建的图片", url);
wx.hideLoading()
that.setData({
imgUrl: url
})
},
error(res) {
console.log(res);
// uni.hideLoading()
// 画失败的原因
}
}, this);
let data = {
//直接获取wxml数据
list: [{
type: 'wxml',
class: '.answer_canvas .answer_draw_canvas', // answer_canvas这边为要绘制的wxml元素跟元素类名， answer_draw_canvas要绘制的元素的类名（所有要绘制的元素都要添加该类名）
limit: '.answer_canvas', // 这边为要绘制的wxml元素跟元素类名,最外面的元素
x: 0,
y: 0
} ]
}
//传入数据，画制canvas图片
drawImage.draw(data, this);
}
2.3、xwml中添加元素
canvas元素添加
<canvas canvas-id="answerCanvas" class="answerCanvas"></canvas>
生成后的图片展示
<image class="canvas_img" src="{{imgUrl}}" wx:if="{{imgUrl}}" show-menu-by-longpress="{{true}}"></image>
要生成图片的html元素
<view class="canvasImg answer_canvas " id="answer-canvas" wx:if="{{!imgUrl}}">
<view class="inner answer_draw_canvas" data-type="background-image">
<image class="left_icon answer_draw_canvas" src="/images/htsi/left_icon.png" data-type="image" data-url="/images/htsi/left_icon.png"></image>
<view class="name answer_draw_canvas" data-type="text" data-text="姓名：XXX">姓名：XXX</view>
<view class="desc answer_draw_canvas" data-type="text" data-text="这边是要绘制的文字">这边是要绘制的文字</view>
<view class="desc answer_draw_canvas" data-type="text" data-text="要绘制的文字描述">要绘制的文字描述</view>
<view class="bottom answer_draw_canvas">
<image src="https://img0.baidu.com/it/u=753216696,2669208484&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657299600&t=c358bbe8685325dfa573277881d24cea" alt="" class="mini answer_draw_canvas" data-type="image" data-url='https://img0.baidu.com/it/u=753216696,2669208484&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657299600&t=c358bbe8685325dfa573277881d24cea'/>
<view class="left answer_draw_canvas">
<text class="company answer_draw_canvas" data-type="text" data-text="要绘制的文字">要绘制的文字</text>
<text class="time answer_draw_canvas" data-type="text" data-text="2022年03月05日">2022年03月05日</text>
</view>
</view>
</view>
</view>
3、要添加元素的格式
3.1、背景图片
元素要添加背景图片的时候需要添加data-type=“background-image”
<view class="inner answer_draw_canvas" data-type="background-image"></view>
3.2、图片
元素要是image的时候要添加data-type=“image” data-url=‘图片地址’， 这边图片地址要在小程序配置白名单，背景图片同下
3.3、文字绘制
文字绘制需要添加data-type=“text” data-text=“要绘制的文字”
<text class="time answer_draw_canvas" data-type="text" data-text="要绘制的文字">要绘制的文字</text>
4、遇到的问题
4.1、边框不展示
要看一下是否设置了box-sizing: border-box;如果css设置了该属性会导致边框不出现文章来源：https://www.toymoban.com/news/detail-509487.html
4.2、图片
图片本地的正常引用，如果是链接的一定要保证配置白名单，详情见3.2，否则生成会一直加载中文章来源地址https://www.toymoban.com/news/detail-509487.html
到了这里，关于wxml2canvas 小程序元素生成图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
