如果是H5页面的话给大家推荐一款不错的插件html2canvas,这个插件可以将html元素转为canvas并一键生成png图片,但是本文的重点是在小程序上如何实现生成图片的功能。因为小程序没有DOM,所以不能引用插件实现。

进入正题!!

step1

创建canvas组件

注意:canvas画布绘制的图片会被压缩导致失帧,可以通过增大画布大小来提高图片质量。并且该canvas元素不应该呈现给用户观看,所以利用绝对定位将元素隐藏。

image标签是用来展示最终海报生成效果的

step2

获取页面画布元素

因为canvas组件中的drawImage方法不接收网络图片地址,所以必须使用wx.getImageInfo将网络图片保存在本地缓存中,再通过drawImage将图片绘制在canvas画布上。

注意:在这里的网络图片地址是需要在微信公众平台上设置域名白名单的。

step3

到这里为止网络图片已经绘制在canvas画布上了,接下来就是将海报的效果图展示给用户并且保存到本地相册上。

  本次demo只是示范了如何将含有网络图片的页面绘制在canvas画布并生成海报展示给用户和保存在本地相册。实际项目需求肯定还有其他文字描述说明之类的信息,这就不在该文章的说明范围内了。毕竟官方文档上有对应API的使用说明。

最后附上完整demo代码

  效果图

微信小程序海报生成功能的更多相关文章

  1. 微信小程序一键生成源码 在线制作定制功能强大的微信小程序

    微信小程序发展到现在,短短的一年不到的时间(很快就要迎来微信小程序周年庆),在快迎来周年庆之际,百牛信息技术bainiu.ltd特记录一下这个发展的历程,用于将来见证小程序发展的辉煌时刻,我们还能知道 ...

  2. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  3. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  4. 微信小程序调用蓝牙功能控制车位锁

    第一次学用微信小程序,项目需要,被逼着研究了一下,功能是调用微信小程序的蓝牙功能,连接上智能车位锁,控制升降,大概步骤及调用的小程序接口API如下: 1.打开蓝牙模块 wx.openBluetooth ...

  5. 微信小程序新闻列表功能(读取文件、template模板使用)

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  6. 微信小程序实战 购物车功能

    代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/ ...

  7. 微信小程序在线支付功能使用总结

    最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...

  8. 微信小程序开发-蓝牙功能开发

    0. 前言 这两天刚好了解了一下微信小程序的蓝牙功能.主要用于配网功能.发现微信的小程序蓝牙API已经封装的很好了.编程起来很方便.什么蓝牙知识都不懂的情况下,不到两天就晚上数据的收发了,剩下的就是数 ...

  9. 微信小程序实现支付功能

    小程序支付,没有封装支付代码:直接上一段可用的流程代码吧:微信小程序支付官网文档有详细的说明,这里我就不再赘述啦:客户端js: wx.request({ url:'https://www.xxxx.c ...

随机推荐

  1. java 线程理解

    import java.util.concurrent.Executor; import java.util.concurrent.ExecutorService; import java.util. ...

  2. chrome添加离线插件

    1.首先用户点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择工具选项,然后点击扩展程序来启动Chrome浏览器的扩展管理器页面. 2.在打开的谷歌浏览器的扩展管理器中用户可以看到一些已经安装程序 ...

  3. 内存泄漏学习案例-1-ArrayList

    解决 内存泄漏 于是赶快登陆探测服务器,首先是 top free df 三连,结果还真发现了些异常. 我们的探测进程 CPU 占用率特别高,达到了 900%. 我们的 Java 进程,并不做大量 CP ...

  4. HTML5 新的 Input 类型

    Input 类型: color(拾色器) color 类型用在input字段主要用于选取颜色,如下所示: 支持浏览器 实例 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type= ...

  5. react的学习笔记

    React中几个核心的概念### 虚拟DOM(Virtual Document Object Model) + **DOM的本质是什么**:浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作 ...

  6. 解决spring-boot配置文件使用加密方式保存敏感数据启动报错No decryption for FailsafeTextEncryptor. Did you configure the keystore correctly

    spring-boot配置文件使用加密方式保存敏感数据 application.yml spring: datasource: username: dbuser password: '{cipher} ...

  7. snmp服务中snmpwalk命令常用方法总结

    在日常监控中,经常会用到snmp服务,而snmpwalk命令则是测试系统各种信息最有效的方法,命令格式: snmpwalk  -c SNMP读密码 -v 1或2(代表SNMP版本) 交换机或路由器IP ...

  8. go中单链表

    package main import ( "fmt" ) type ListNode struct { Val int Next *ListNode } type List st ...

  9. listview--Java泛型应用之打造Android万能ViewHolder-超简洁写法

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010785585/article/details/52808656 转载请注明出处:http:// ...

  10. Unity Input,生命周期,Light,获取组件

    1.     递归方法遍历获取指定子物体 知识点:递归的使用:transform.childCount.GetChild(index) 2.  Input输入控制类,检测玩家输入 知识点: Input ...