小程序-uni-app：将页面（html+css）生成图片/海报/名片，进行下载保存到手机

一、需要描述

本文实现，uniapp微信小程序，把页面内容保存为图片，并且下载到手机上。
说实话网上找了很多资料，但是效果不理想，直到看了一个开源项目，我知道可以实现了。
本文以开源项目uniapp-wxml-to-canvas 为蓝本记录集成的步骤，以供参考。
详细内容可以下载并启动 uniapp-wxml-to-canvas项目，详细学习。

GitHub - ThaneYang/uniapp-wxml-to-canvas

二、代码实现

2.1、wxcomponents目录

将”开源项目“的这两个目录及包含的文件复制到自己项目的同名目录下。

2.2、pages.json

在pages.json文件，globalStyle 配置 usingComponents


globalStyle: {"usingComponents": {"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"}
}

2.3、utils/DomData.js

wxml 定义html

style 定义样式


/***** @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
}

2.4、业务页面

<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('@/utils/DomData.js')
export default {name: '',data () {return {show: false, // 是否显示canvascanvasWidth: 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.screenWidththis.canvasWidth = this.screenWidth * 0.9this.canvasHeight = this.screenWidth * 1.1console.log('screenWidth', this.screenWidth)this.show = true// 数字容器宽度 动态设置 setTimeout(() => {wx.showLoading({title: '海报生成中...'})this.widget = this.selectComponent('.widget')this.renderToCanvas()}, 1000)}});},methods: {// wxml 转 canvasrenderToCanvas () {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 = thisp2.then(result => {let path = result.tempFilePathwx.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>
<style lang="scss" scoped>
.share-page {background: #fff;position: relative;overflow: hidden;min-height: 100vh;.msg-box {display: flex;align-items: center;text-align: center;justify-content: center;}.share-page-box {margin: 40rpx auto;position: relative;overflow: hidden;box-shadow: 0rpx 6rpx 20rpx 6rpx rgba(0, 0, 0, 0.2);}.share-page-btn {margin: 0 40rpx 50rpx;img {width: 100%;height: 100%;}}
}
</style>

到此功能实现，集成步骤也比较简单，