如果是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. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  2. Java Native

    native 什么是Native Method 简单地讲,一个Native Method就是一个java调用非java代码的接口.一个Native Method是这样一个java的方法:该方法的实现由 ...

  3. zabbix使用客户端和不使用客户端监控指定端口

    监控指定端口也很简单,以监控181主机的22端口为例 点击已成功监控的181主机的监控项 点击创建监控项 使用客户端监控端口:选择键值net.tcp.listen[port],需要自己把port改成2 ...

  4. oc 语法基础

    1:https://mp.weixin.qq.com/s/IqICB4aW2vZdU0382S9sTA  <1-7高质量OC代码> 2:https://blog.csdn.net/qq_3 ...

  5. mysql导入sql文件出错的一种解决方法

    转:https://blog.csdn.net/u011806486/article/details/60147358 本人在本地使用navicat for mysql可以连接到服务器数据库,但是从服 ...

  6. 【linux】常用命令之用户管理

    查看用户 cat /etc/passwd 查看某一个用户 cat /etc/passwd|grep javaluna 新增用户 useradd xxx 更新密码 passwd xxx 删除用户及相关配 ...

  7. Ubuntu 15.10 下Scala 操作Redis Cluster

    1 前言 Redis Standalone,Redis Cluster的安装在前面介绍过,地址:http://www.cnblogs.com/liuchangchun/p/5063477.html,这 ...

  8. jenkins疑惑

    本地仓库,脚本 os.getcwd() 获取当前脚本目录 正常 把脚本放到了工作区,os.getcwd()获取的却是 项目的主目录 打算: 思路: 兼容一波,给jenkins的写个配置文件在 项目的主 ...

  9. no module named win32api

    1 首先下载pywin32 https://sourceforge.net/projects/pywin32/files/pywin32/ 2进入虚拟环境 D:\env\jdscrapy\Lib\si ...

  10. Unity 三角函数 向量 运算

    其实三维的和二维的基本差不多,一样的运算方式,unity已经把所有的方法都封装起来,主要是理解,能理解了就直接调用了 三角函数 知识点:三角函数基础正玄余玄.三角函数曲线.弧度制和角度制.弧度制和角度 ...