uniapp小程序使用wxml-to-canvas生成图片
开发框架：uniapp
场景：小程序保存页面为图片并上传
尝试方案：使用html-to-canvas，问题：小程序不允许操作dom，也无法获取dom标签，只能通过wx.createSelectorQuery()获取dom信息。
微信小程序官方解决方案：wxml-to-canvas。问题：只支持wxml的原生小程序canvas图片生成，相关配置也是原生小程序的配置。
解决方案：
1、打开微信小程序官方代码片段代码片段
2、在程序根目录下新建wxcomponents文件夹，将代码片段中的miniprogram_npm下的widget-ui和wxml-to-canvas两个文件夹复制进去
3、将/wxcomponents/wxml-to-canvas/index.js中的
module.exports = require("widget-ui");
//改为
module.exports = require("../widget-ui/index.js")
4、配置pages.json(这样uni-app才会打包wxcomponents)
"pages": [ { "path": "pages/share", "style": { "usingComponents": { "wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index" } } }, ... ]
5、主页面 pages/share.vue
<template>
<view class="share-page">
<view class="share-page-box" id="box" v-if="show"
:style="{width: canvasWidth + 'px', height: canvasHeight + 'px' }">
<wxml-to-canvas class="widget" :width="canvasWidth" :height="canvasHeight"></wxml-to-canvas>
</view>
<view class="share-page-btn" @tap="extraImage">
<button class="btn-big" :style="getBtnStyle">保存图片</button>
</view>
</view>
</template>
<script>
const {
wxml,
style
} = require('./domData.js')
export default {
name: '',
data() {
return {
show: false, // 是否显示canvas
canvasWidth: 320, // 默认canvas宽高
canvasHeight: 480,
screenWidth: null, // 设备宽度
screenHeight: null, // 设备宽度
name: '',
pic: '',
chapter: '',
widget: null,
}
},
onLoad(options) {
console.log('options', options);
this.name = 'wxml生成canvas(liangtao)'
this.pic = 'https://pic1.zhimg.com/80/v2-58fe538a59f870407b1435bfd45893ed_720w.jpeg'
this.chapter = ['第一段对话','第二段对话','第三段对话','第四段对话','第五段对话','第六段对话','第七段对话','第八段对话','第九段对话','第十段对话','第十一段对话','第十二段对话','第十三段对话']
// 获取设备信息
wx.getSystemInfo({
success: (res) => {
console.log("设备信息",res);
this.screenWidth = res.screenWidth
this.screenHeight = 1000//高度建议计算得出或写死。如使用res.screenHeight，文字过长时无法生成
this.canvasWidth = this.screenWidth
this.canvasHeight = this.screenHeight
this.show = true
// 数字容器宽度 动态设置
setTimeout(() => {
wx.showLoading({
title: '图片生成中...'
})
this.widget = this.selectComponent('.widget')
this.renderToCanvas()
}, 1000)
}
});
},
methods: {
// wxml 转 canvas
renderToCanvas() {
console.log('this.widget', this.widget)
const _wxml = wxml(this.name, this.pic, this.chapter)//调用wxml
const _style = style(this.screenWidth, this.canvasWidth, this.canvasHeight)
const p1 = this.widget.renderToCanvas({
wxml: _wxml,
style: _style
})
p1.then((res) => {
console.log('生成成功');
wx.hideLoading()
}).catch((err) => {
console.log('生成失败')
})
},
// 保存图片
extraImage() {
const p2 = this.widget.canvasToTempFilePath()
let that = this
p2.then(result => {
let path = result.tempFilePath
console.log(path);
})
},
}
}
</script>
6、配置wxml页面 /pages/domData.js
const wxml = (name, pic, c1) => ` <view class="container"> <image src="` + pic + `" class="pic"/> <text class="name">${name}</text> <text class="content">` + c1[0] + `</text> <text class="content">` + c1[1] + `</text> <text class="content">` + c1[2] + `</text> <text class="content">` + c1[3] + `</text> <text class="content">` + c1[4] + `</text> <text class="content">` + c1[5] + `</text> <text class="content">` + c1[6] + `</text> <text class="content">` + c1[7] + `</text> <text class="content">` + c1[8] + `</text> <text class="content">` + c1[9] + `</text> <text class="content">` + c1[10] + `</text> <text class="content">` + c1[11] + `</text> <text class="content">` + c1[12] + `</text> </view> ` /** * @param {*} screenWidth 屏幕宽度 * @param {*} canvasWidth 画布宽度 * @param {*} canvasHeight 画布高度 * @param {*} numberWidth 数字宽度，动态设置 * @return {*} */ const style = (screenWidth, canvasWidth, canvasHeight) => { return { "container": { width: canvasWidth, height: canvasHeight, position: 'relative', overflow: 'hidden', backgroundColor: '#ffffff', }, "name": { fontSize: 20, color: '#333', marginLeft: canvasWidth * 0.08, width: canvasWidth * 0.84, height: screenWidth * 0.18, textAlign: 'center', }, "content": { fontSize: 14, color: '#333', width: canvasWidth * 0.84, height: screenWidth * 0.15, marginLeft: canvasWidth * 0.08, }, "pic": { width: canvasWidth * 0.3, height: screenWidth * 0.28, marginTop: canvasWidth * 0.1, marginLeft: canvasWidth * 0.35, marginBottom: canvasWidth * 0.05, borderRadius: screenWidth * 0.14, overflow: 'hidden', }, } } module.exports = { wxml, style }
需要说明一点，此处的wxml返回的是字符串，也就是页面实际呈现的结果，不可以在里面写wx:if，wx:for等语法。
如果需要加，在箭头函数里面直接用js写法，去判断和遍历，然后return字符串。
7、最终效果
wxml-to-canvas要注意的一些问题
1、只能画view，text，img
2、每个元素必须要设置宽高
3、默认是flex布局，可以通过flexDirection: "column"来改变排列方式
