使用wxml2canvas将微信小程序页面转为图片
最近有个微信小程序项目,需要将页面转为图片。微信小程序提供的Api是wx.canvasToTempFilePath,这个方法是将画布指定区域的内容导出生成指定大小的图片,但是我们是将页面导出图片,所以可以使用wxml2canvas解决
1、安装wxml2canvas
npm init
npm install wxml2canvas --save --production
npm init 是npm初始化,这个时候根据编译器终端一路回车最终会生成一个package.json文件
--production 是减少安装与业务无关的包,减少项目的体积。
2、引入wxml2canvas
import Wxml2Canvas from 'wxml2canvas'
引入之后需要对微信开发者工具做出如下设置,否则引入之后会报错
其次选择微信开发者工具--》工具---》构建npm
这个时候就不会报错了
3、使用wxml2canvas
首先在需要生成图片的wxml文件中创建canvas容器以及选择生成图片的范围
<canvas canvas-id="myCanvas" class="myCanvas"></canvas>
<view id="my-canvas" class="my_canvas><view class="header my_draw_canvas"><image class="headerImg my_draw_canvas" src="{{order.headerImg}}" data-type="image" data-url="{{order.headerImg}}"></image><text class="headerTitle my_draw_canvas" data-type="text" data-text="您的订单详情">您的订单详情</text></view>
</view>
每个需要生成图片的内容,需要注明类型。
text标签对应的data-type='text',image标签对应的data-type=‘image’
data-text=‘需要展示的文本’ data-url='需要展示的图片'
其他的data-type类型可以参考https://github.com/liudongyun1215/wxml2canvas
这个链接里面包含了许多配置项,就不一一列举了,遇到问题的时候可以参考这个文档
js文件的方法
drawMyCanvas() {wx.showLoading()const that = thisconst query = wx.createSelectorQuery().in(this);query.select('#my-canvas').fields({ // 选择需要生成canvas的范围size: true,scrollOffset: true}, data => {let width = data.width;let height = data.height;that.setData({width,height})setTimeout(() => {that.startDraw()}, 1500);}).exec()
},
startDraw() {let that = this// 创建wxml2canvas对象let drawMyImage = new Wxml2Canvas({element: 'myCanvas', // canvas的id,obj: that, // 传入当前组件的thiswidth: that.data.width * 2,height: that.data.height * 2,background: '#141415', // 生成图片的背景色progress(percent) { // 进度// console.log(percent);},finish(url) { // 生成的图片wx.hideLoading()that.savePoster(url)},error(res) { // 失败原因console.log(res);wx.hideLoading()}}, this);let data = {// 获取wxml数据list: [{type: 'wxml',class: '.my_canvas .my_draw_canvas', // my_canvas要绘制的wxml元素根类名, my_draw_canvas单个元素的类名(所有要绘制的单个元素都要添加该类名)limit: '.my_canvas', // 要绘制的wxml元素根类名x: 0,y: 0}]}// 绘制canvasdrawMyImage.draw(data, this);},
savePoster() {const that = thiswx.saveImageToPhotosAlbum({filePath: that.data.imgUrl,success: function() {wx.showToast({title: '保存成功',icon: 'none',duration: 1500});},fail(err) {if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {wx.showModal({title: '提示',content: '需要您授权保存相册',showCancel: false,success: modalSuccess => {wx.openSetting({success(settingdata) {if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.saveImageToPhotosAlbum({filePath: that.data.imgUrl,success: function () {wx.showToast({title: '保存成功',icon: 'success',duration: 2000})},})} else {wx.showToast({title: '授权失败,请稍后重新获取',icon: 'none',duration: 1500});}}})}})}}})},
4、注意
使用wxml保存图片的时候,如果包含在线的图片链接,需要在微信小程序后台设置白名单,将在线链接的域名放置downloadFile合法域名里,否则生成图片的时候会报错
还有就是页面上的标签需要有宽度,否则模拟器导出正常,真机导出样式就会乱
使用wxml2canvas将微信小程序页面转为图片相关推荐
- 微信小程序页面背景图片设置
微信微信小程序页面背景图片background-image使用及大小设置 源代码//index.wxss page{ background-size:100% 100%; background-ima ...
- 微信小程序页面跳转如何传递对象参数
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. 微信小程序页面跳转如 ...
- 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
- 微信小程序页面搜索框查询(无后台接口情况下)
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
- 小程序向Java传值,微信小程序 页面传值详解
微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
- vue用公共组件页面传值_微信小程序页面传值、组件间通信总结
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便 捷地获取和传播,同时具有出色的使用体验.对于微信小程序,前端开发应该不陌生,目前也 是非常火,很多公司都会进行开发.对 ...
- h5跳转小程序页面url_微信小程序页面跳转方法
我所知道的,微信小程序页面跳转有以下方法,下面分情况说明下 一.利用小程序提供的 API 跳转: 1.简单page页面之间跳转 // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateB ...
- 微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // ...
- 微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替 前言 代码 效果图 前言 张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...
- 微信小程序页面跳转,url传参参数丢失问题
微信小程序页面跳转,url传参参数丢失问题 // pages/order/purchase/index.js// 跳转到采购订单详情toPurchaseOrderDetail(e) {// conso ...
最新文章
- 生物战教训、生物安全问题以及未来监控军民两用生物技术扩散的手段
- 在Matlab中调用Mathematica的函数
- wps打包exe文件_如何使用PTEmaker将PPT打包为exe可执行文件(图文) - 电脑教程
- Yii2.0学习资源
- java读取本地图片的绝对地址_我想使用图片的绝对路径。为什么java不能使用图片的绝对路径。...
- 64. 整合异步脚本
- dockerfile拉取私库镜像_关于kubernetes拉取私库镜像需要注意的点
- iPhone 4 Cydia使用教程!精选Cydia源!cydia怎么添加源!Cydia源使用方法!越狱后使用cydia全攻略!...
- java宠物店管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
- 高等数学复习笔记——第八章:向量代数与空间解析几何
- 安装指定版本Kubernetes
- 【C++】读取txt文件中指定行的内容
- 上传大文件解决方案方法
- 计算机主机对人体的辐射,电脑辐射的范围是多少
- 回家过年要花多少钱?算完感觉生无可恋~
- java和class的区别
- 优思学院|测量系统分析(MSA)中的偏倚和线性是什么?
- Contacts(CNContactStore)
- 一、python可视化——热力图
- 如何在 Excel 中实现下拉多选、反选
热门文章
- 百度云破解不限速版(绿色免安装)
- Tomcat启动缓慢 Creation of SecureRandom instance for ... 花费时间过长的解决方法
- 北航计算机691,2021考研:北京航空航天大学物理学专业691普通物理综合考试
- 一文理解UDS安全访问服务(0x27)
- 【源码】林业害虫检测小程序(可拓展美化)
- 四/六层板层叠设计思路
- 数据库原理和应用和mysql有联系吗_《数据库原理与应用》考试试卷和答案
- Android 直接拨号和调用拨号盘
- python英文单词排序-作业
- centos格式化优盘命令_centos 格式化分区