微信小程序> 微信小程序截屏保存图片

微信小程序截屏保存图片

浏览量:6881 时间: 来源:吕振辉

在小程序的分享功能中,截屏是一个比较常见的需求。而截屏不只是截取当前页面,还要将二维码放进去以方便用户长按识别。从营销方面来看,这样可以说是一举两得了。要实现的效果如下:


小程序

实话说,一开始收到这个需求是懵b的,完全没有任何思路。试过用a标签的download属性,但是只能在电脑端才能下载…一路坎坎坷坷,四处碰壁,虐得我体无完肤…后来终于在慢慢摸索中发现了生的希望。
小程序

1  背景

需要截屏的页面是在h5页面中实现的,通过webview嵌进去小程序


2  步骤

1.将html元素转化为canvas;
2.将canvas转化为base64的图片;
3.调用微信api保存网络图片到本地;
4.保存成功后返回原页面

总之!!截屏功能是在h5页面中实现的,而图片的保存是在一个新的小程序页面。


小程序

3  思路

新建一个canvas,将原界面的html转成canvas,生成base64图片,再通过canvas.getContext(‘2d’).drawImage()分别把原界面和二维码画上去,将base64传到后台返回一张网络图片,把这张图片通过url从webview传到小程序,同时跳转到新的小程序页面,最后利用微信api保存图片到本地,保存图片成功后返回上一层页面。

4  实现

截屏:使用html2canvas插件

1.将html转成canvas,生成base64图片
小程序
小程序

2.将base64通过接口获取网络地址
小程序

保存:调用微信api
小程序
小程序

以上!!

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎