背景：
小程序项目中遇到需要生成海报并分享的功能，为了实现生成海报功能，起初使用h5端的html-to-canvas，结果明显不能使用，毕竟编译之后不通用，生成失败。
然后尝试在网上查找小程序的替代插件，所以在网上找到wxml2canvas，经过一段时间研究，也一直不能实现功能，晦涩难懂的文档，不完善的详细配置文章导致很多尝试都无济于事。同样的比较知名的github海报插件wxa-plugin-canvas，Painter也经过一番研究，都不能解决我们遇到的问题。有兴趣的小伙伴可以自己研究。
于此同时呢，也在微信小程序官方文档中找到了对应的生成图片的方案——wxml-to-canvas。经过一番官网文档的研究之后发现，此方案也只是支持wxml的原声小程序canvas图片生成。而我们项目是uni-app的vue文件，还是无法实现此功能。
然而在频繁网络搜索刷文档之后，不经意间找到了一款迄今为止Fork为0，star为0的牛逼插件——uniapp-wxml-to-canvas，跟上面的插件似乎一样好像能够解决问题，但是又充满不确定因素。github上的文档极其简单，也可以说几乎没有，但是不经意间去查看了源码，终于发现了新大陆。
延用了骗子文章一惯的标题风格。加上言简意赅的解决方案描述。真是好的东西从不废话。
看项目目录，简洁明了，完全契合我们的项目结构，所以我就一不小心点开了pages目录，从此打开新世界的大门。
/pages/share/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-box msg-box" v-else :style="{width: canvasWidth + 'px', height: canvasHeight + 'px' }">
{{msg}}
</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, // 设备宽度
name: '',
pic: '',
chapter1: '',
chapter2: '',
widget: null,
msg: '加载中，请稍等...', // 提示语
}
},
onLoad (options) {
console.log('options', options);
this.name = 'Willam Yang'
this.pic = 'https://pic1.zhimg.com/80/v2-58fe538a59f870407b1435bfd45893ed_720w.jpeg'
this.chapter1 = '第一段'
this.chapter2 = '第二段'
// 获取设备信息
wx.getSystemInfo({
success: (res) =>{
this.screenWidth = res.screenWidth
this.canvasWidth = this.screenWidth * 0.9
this.canvasHeight = this.screenWidth * 1.1
console.log('screenWidth', this.screenWidth)
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.chapter1, this.chapter2)
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()
// this.container = res
}).catch((err) => {
console.log('生成失败')
})
},
// 保存到朋友圈
extraImage() {
if (!this.show) {
wx.showToast({title: '海报生成失败，无法分享到朋友圈', icon: 'none'})
return
}
const p2 = this.widget.canvasToTempFilePath()
let that = this
p2.then(result => {
let path = result.tempFilePath
wx.getSetting({
success: res => {
// 非初始化且未授权的情况，需要再次弹窗提示授权
if (res.authSetting['scope.writePhotosAlbum'] != undefined && res.authSetting['scope.writePhotosAlbum'] != true) {
wx.showModal({
title: '是否授权相册权限',
content: '需要获取相册权限，请确认授权，否则无法使用相关功能',
success: res => {
if (res.confirm) {
wx.openSetting({
success: dataAu => {
if (dataAu.authSetting["scope.writePhotosAlbum"] == true) {
wx.showToast({
title: '授权成功',
icon: 'none',
duration: 1000
});
that.saveIMg(path);
} else {
wx.showToast({
title: '授权失败',
icon: 'success',
duration: 1000
});
}
}
});
}
}
});
} else {
// 初始化且未授权，系统默认会弹窗提示授权
// 非初始化且已授权，也会进入这里
that.saveIMg(path);
}
}
});
})
},
// 保存到相册
async saveIMg (tempFilePath) {
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: async (res) => {
wx.showModal({
content: '图片已保存，分享给好友吧！',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
wx.navigateBack({
//返回
delta: 1
});
},
fail: function (res) {
console.log('res', res);
}
});
},
fail: function (res) {
wx.showToast({
title: '您取消了授权',
icon: 'none',
duration: 2000
})
}
});
}
}
}
</script>
/pages/share/DomData.js
/**
*
*
* @param {*} number 第几位
* @param {*} src 名片头像
* @param {*} name 名片名字
* @param {*} qrCodeUrl 小程序codeURL图片
*/
const wxml = (name, pic, c1, c2) =>`
<view class="container">
<image src="`+pic+`" class="pic"/>
<text class="name">`+ name +`</text>
<text class="content">`+ c1 +`</text>
<text class="content">`+ c2 +`</text>
<view class="bottom">
<image src="`+pic+`" class="qr"/>
<text class="msg">扫码一起加入学习吧</text>
</view>
</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',
},
"bottom":{
width: canvasWidth,
height: screenWidth * 0.2,
flexDirection: 'row',
justifyContent: 'self-start',
alignItems: 'center',
backgroundColor: '#fafafa',
position: 'absolute',
bottom: 0,
left: 0,
},
"qr": {
width: canvasWidth * 0.14,
height: screenWidth * 0.14,
marginLeft: canvasWidth * 0.04,
marginRight: canvasWidth * 0.04,
},
"msg": {
fontSize: 14,
color: '#a1a1a1',
width: canvasWidth * 0.74,
height: 14,
textAlign: 'left'
},
}
}
module.exports = {
wxml,
style
}
到这里，已经大概有一套比较完整的方案已经出来了。
方案：依托微信官方wxml-to-canvas的一套生成方案
1.微信官网地址：
https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/component-plus/wxml-to-canvas.html
根据官网文档开始安装，配置，引入组件，注意样式一定要详细阅读
2.详细项目配置信息
毕竟我们是uni-app项目，所以跟原生小程序开发还是不一样。所以我们只看微信官网是不能正常实现生成canvas的。详细的uni-app配置信息如下：
一、 在uniapp项目中 构建wxcomponents文件夹
二、下载微信小程序官方的wxml-to-canvas代码片段，将其中的这个两个组件复制到我们自己创建的wxcomponents中
三、修改wxml-to-canvas index.js中 的
module.exports = require("widget-ui");
改为
module.exports = require("../widget-ui/index.js");
四、在globalStyle中配置全局组件
"usingComponents":{
"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
}
这样就配置好了 剩下的使用方法跟在小程序中使用wxml-to-canvas是一致的 参考官网即可。
3.实现代码
同样的，我们只知道详细配置信息，不知道项目中如何使用也是不能实现生成海报功能，查看详细代码更为重要。
https://github.com/WillamYang/uniapp-wxml-to-canvas
4.重要‼️
一、生成海报不能写在组件中（有异议，没实现）。
二、对象属性值为对应 wxml 标签的 class 驼峰形式。
三、需为每个元素指定 width 和 height 属性，否则会导致布局错误。
整体总结这次生成海报功能，道路非常坎坷，东拼西凑的文章合在一起才拼出来了一套完整实现方案。问题总结如下：
1.微信官网给了我们解决方案，但是只针对wxml，对与uni-app开发来说，只看官方文档很难有实质性的帮助。
2.对于网上搜索的大部分文章，理论写的都很好，苦于没有实践代码，项目中配置但凡缺配少配都不能正常使用。即使配置完成，如何书写实现代码，又无从下手。
3.大部分的相关github仓库代码晦涩难懂，要么文档过于简单，要么代码文件过多，没有一套简洁明了且比较完善的实现方案。
