uni-app 微信小程序图文生成图片 wxml-to-canvas

在做的小程序要增加一个将文字与图片生成图片不可修改的功能，第一次做，在网上找了不少资料。参考了wxml-to-canvas | 微信开放文档，又看了一些相关事例，尝试写了一下。

需要准备的文件及配置项：

1、先把代码片段下载到本地

2、创建wxcomponents目录，把代码片段中的文件拷到此目录下，并将下图的目录改成真实目录。

3、修改配置文件pages.json，找到要写此功能的路径，加上

"style": {
               "app-plus": {
                   "titleNView": false //禁用原生导航栏
               },
               "navigationBarTitleText": "",
               "enablePullDownRefresh": false,
               "navigationStyle": "custom",
               "usingComponents":{
                   "wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
               }
           }

4、开始写组件。注意this.widget = this.selectComponent('.widget');一定要放在onLoad页面生命周期中，不然不生效

<view :style="{width: canvasWidth + 'px', height: canvasHeight + 'px' }">
<wxml-to-canvas class="widget" :width="canvasWidth" :height="canvasHeight"></wxml-to-canvas>
</view>

const {wxml,style} = require('./notification.js')export default {data() {return {imgSrc: '/static/img/3.png',//最后生成的图片信息imageData: null,canvasWidth: 320, // 默认canvas宽高canvasHeight: 480,screenWidth: null, // 设备宽度screenHeight: null, // 设备宽度userInfo: {},isRegister: '',controlContent: undefined,statusCode: undefined,//上个页面用到的图片地址tempFile:undefined}},onLoad(option) {this.userInfo = uni.getStorageSync('weixin-userInfo') ? JSON.parse(uni.getStorageSync('weixin-userInfo')) :{};// 获取设备信息wx.getSystemInfo({success: (res) => {this.screenWidth = res.screenWidththis.screenHeight = 800 //高度建议计算得出或写死。如使用res.screenHeight，文字过长时无法生成（安卓手机，最新鸿蒙系统高度不能超过1000）this.canvasWidth = this.screenWidththis.canvasHeight = this.screenHeightsetTimeout(() => {this.widget = this.selectComponent('.widget');this.controlContent = option.controlContent;this.tempFile = option.tempFilethis.download();}, 1000)}});},methods: {//生成图片download() {// 数字容器宽度 动态设置 setTimeout(() => {uni.showLoading({title: '图片生成中...'})this.renderToCanvas()}, 1000)},renderToCanvas() {const _wxml = wxml('test', this.tempFile, this.controlContent) //调用wxmlconst _style = style(this.screenWidth, this.canvasWidth, this.canvasHeight)setTimeout(() => {const p1 = this.widget.renderToCanvas({wxml: _wxml,style: _style})p1.then((res) => {uni.hideLoading()this.saveImageToPhotosAlbum();}).catch((err) => {console.log('生成失败')})}, 100)},//保存图片到本地saveImageToPhotosAlbum() {uni.showLoading({title: '正在保存中...'})const p2 = this.widget.canvasToTempFilePath()let that = thisp2.then(result => {let path = result.tempFilePathuni.uploadFile({url: '上传服务地址',filePath: path,name: 'file',formData: {'user': 'test'},success: (res) => {let data = JSON.parse(res.data)if (data.code == 200) {uni.saveImageToPhotosAlbum({filePath: path,success: () => {uni.hideLoading()uni.showToast({title: '保存成功，可去手机相册查看',duration: 2000,icon: 'none'});/* uni.redirectTo({url: '../communityControl/notification?tempFile='+ this.tempFile    });     */uni.navigateBack();}});}}});})}}}

5、写notification.js文件，必须要按照wxml-to-canvas写生成模板，不然不生效

const wxml = (name, pic, content) => `
<view class="container"><text class="content">` + content + `</text><image src="` + pic + `"  class="pic"/>
</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',padding: '30rpx 20rpx',},"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.84,marginLeft: canvasWidth * 0.08,marginTop: canvasWidth * 0.08,},"pic": {width: canvasWidth * 0.4,height: screenWidth * 0.2,marginTop: canvasWidth * 0.1,marginLeft: canvasWidth * 0.35,marginBottom: canvasWidth * 0.05,borderRadius: screenWidth * 0.14,overflow: 'hidden',},}
}module.exports = {wxml,style
}

本文档适用于vue2，并正式运用到项目中，但本人未在vue3的环境下使用，有友友提醒说不能用在vue3中，特在此说明，也欢迎使用的友友们提出宝贵意见。

uni-app 微信小程序图文生成图片 wxml-to-canvas相关推荐

微信小程序之生成图片分享
通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径.小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该小程序页面.但是小程序目前不支持直接分享 ...
微信小程序之生成图片保存到相册
微信小程序之生成图片保存到相册需求概要电商项目中需要将自己小店的商品带上自己的小程序码生成海报,保存到本地,然后分享到万能的朋友圈,QQ空间,微博等等来广而告之- 如下图,三种海报格式轮播展示,左 ...
wxml php,微信小程序教程之WXML
WXML WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 用以下一些简单的例子来看看WXML具有什么能力: 数据绑 ...
微信小程序：计算wxml里盒子的宽、高.....
微信小程序:计算wxml里盒子的宽.高等信息由于某些标签需要动态设置页面的高度,此时需要计算每个盒子的高度(由于盒子是一些东西撑开的,无法直接得到高度),根据盒子数量及边距距离设置页面高度得到的数 ...
微信小程序10：WXML 组件- 轮播图 swiper
微信小程序10:WXML 组件- 轮播图 swiper 官网地址https://developers.weixin.qq.com/miniprogram/dev/component/swiper.ht ...
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
微信小程序怎么在wxml中插入多个图片_兰州小程序开发流程费用推荐品牌_便企网...
兰州小程序开发流程费用推荐品牌,有人说既然开发文档这么详细那直接跟着开发文档来学习就可以轻松入门,你有这份自信是非常好的,也希望你有很强的学习能力,但对于很多的普通人新手来说(当然也包括我),做作品的 ...
微信小程序入门五: wxml文件引用、模版、生命周期
实例内容 wxml文件引用(include.import) 模版小程序生命周期实例一: include方式引用header.wxml文件文件引用对于代码的重用非常重要,例如在web开发中我们可以 ...
微信小程序之生成图片分享朋友圈
通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径.小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该小程序页面.但是小程序目前不支持直接分享 ...

uni-app 微信小程序图文生成图片 wxml-to-canvas

uni-app 微信小程序图文生成图片 wxml-to-canvas相关推荐

最新文章

热门文章

uni-app 微信小程序 图文生成图片 wxml-to-canvas

uni-app 微信小程序 图文生成图片 wxml-to-canvas相关推荐

最新文章

热门文章

uni-app 微信小程序图文生成图片 wxml-to-canvas

uni-app 微信小程序图文生成图片 wxml-to-canvas相关推荐