我们经常会遇上动态生成海报的需求，而在小程序中，生成图片非Canvas莫属。但是在实际工作当中，为了追求效率，我们会不可避免地去使用一些JS插件，而 wxml-to-canvas 就是一款官方推荐且非常优秀的插件，它可以轻松地帮你将HTML代码转换成Canvas，进而生成可保存分享的图片。

但是wxml-to-canvas是通过静态模板和样式绘制 canvas ，进而导出图片，需要单独写一份静态模板用于编译，对于很多场景还是有些限制，比如有时需要将图文混排的富文本内容生成分享图，对于这种长度不定，内容动态变化的图片生成需求，直接利用官方的canvas接口绘制是十分困难的，包括但不限于文字换行、表情文字图片混排、文字加粗、子标题等元素都需要一一绘制

我们的目标是实现一个通过wxml节点标记，收集元素从而进行编译转换，仅依赖wxml直出需要绘制的canvas进而快速实现图片分享，为此学习了 wxml2canvas npm包，实现了基础功能的wxml2canvas

• 此文暂不讨论图片类型的wxml转canvas

先看结果

实现一个小程序分享图 wxml2canvas相关推荐

1. 基于海豚PHP框架 七牛云（插件），合成小程序分享图 并上传到七牛云

   <?php // +---------------------------------------------------------------------- // | 海豚PHP框架 [ D ...

2. 抖音小程序实践四：实现小程序分享

   有时候我们要把一个小程序分享给别人,去看套餐.买东西之类的,是一个很常见的功能,但是在接入抖音小程序的时候,初始化右上角三个点并没有分享的入口,那看来不是要申请,就是有别的开发的口子了.下面我们一起了 ...

3. 小程序分享到朋友圈功能_微信小程序开放分享到朋友圈功能

   2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...

4. 小程序分享朋友圈之填坑模式

   上一个博客介绍了小程序分享朋友圈,但是如果你按照上面的方法去写,你还是会发现一些问题,怎么回事呢? 下面我来说一下小程序分享朋友圈的坑有哪些? 坑1:canvas画的图片地址.小程序码地址都必须&qu ...

5. 小程序分享到朋友圈功能_来啦！小程序支持分享朋友圈

   上线4年后的小程序,终于能发朋友圈了. 这应该小程序开发者最期待的功能之一. 小程序的推广渠道本来就少,没有链接,没有消息,不在微信和通讯录列表. 在此前,更没有机会获得朋友圈的展示. 作为一个日活近 ...

6. Python 练习册，每天一个小程序

   Python 练习册,每天一个小程序 说明: Python 练习册,每天一个小程序.注:将 Python 换成其他语言,大多数题目也适用 不会出现诸如「打印九九乘法表」.「打印水仙花」之类的题目 点此 ...

7. 轻松生成小程序分享海报

   小程序海报组件 github.com/jasondu/wxa- 需求 小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成 ...

8. 【小程序】766- 一文看懂小程序分享到朋友圈

   点击上方 关注我们 作者简介 张所勇 转转平台运营中心前端负责人,在前端领域有深入研究,包括:sketch一键切图.前端数据模型化,小程序基础能力建设等多个方面,10年工作经验中,做了2年工程师,5年 ...

9. 支付宝小程序分享转发

   最近公司在做一系列支付宝小程序,其中分享拉新显然是很重要的一环,我们对分享的期望是每次分享的背景图都带有用户独特标识并且图片中多处位置每人每天都不相同, 为了完成这个需求对支付宝小程序的分享进行了一些 ...

最新文章

1. 女儿社交媒体求生日卡 美96岁失明二战老兵收海量祝福
2. docker build 没有网络 执行dockerfile中yum报错 curl#6 - “Could not resolve host: mirrorlist.centos.org 解决方法
3. hdu2.1.2 How many prime numbers(计算素数的个数)
4. 云炬随笔20210714(1)
5. 【Linux】一步一步学Linux——file命令(37)
6. [置顶] 动软软代码生成器使用（127.0.0.1）无法看到 SQLServer2008 新附加数据库的 原因 以及 解决方案...
7. 【经典回放】多种语言系列数据结构算法：数组
8. s2 安恒 漏洞验证工具_Struts2漏洞利用工具下载(更新2017-V1.8版增加S2-045/S2-046)
9. 分享几个有意思的视频
10. 网络 网络层 | IP协议、网段划分、公网与私网、路由选择
11. 在FreeBSD上彻底禁用sendmail
12. JAVA生成UUID
13. GPT分区和MBR分区切换
14. 跨境erp系统功能分析
15. BlenderProc安装bop_toolkit问题
16. OSChina 周六乱弹 —— 女菩萨，你可愿做贫僧的……
17. 【微信小程序】获取Bmob后端云数据库某一数据表的所有记录
18. 520还在画玫瑰？教你用MATLAB画个玫瑰花球
19. MindManager2022免序列号弹窗解除功能限制
20. HashSet和HashMap

热门文章

1. UML系列——时序图（顺序图）
2. vmware扩展磁盘分区
3. 微信小程序原生开发功能合集一：微信小程序开发介绍
4. 红山服务器虚拟化解决方法,红山虚拟化：数据备份与灾难恢复
5. SVN怎么去掉版本控制，去除调svn绿色图标显示
6. 古希腊神话故事：纳鲁斯和普鲁吐斯
7. 将蓝牙rssi(信号强度)转换成距离
8. Mac电脑上Android Studio自带模拟器无法关闭
9. 关于鸿蒙开发系统组件的摘抄及运用1
10. [paper]Intriguing properties of neural networks（L-BFGS）