微信小程序截屏保存图片

2024-05-12 13:50:08

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

实话说，一开始收到这个需求是懵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

以上！！

微信小程序截屏保存图片相关推荐

微信小程序长按保存图片
微信小程序长按保存图片 wxml部分 <image data-url="{{item}}" bindlongtap="longPressSaveImg " ...
微信小程序 - 骨架屏
骨架屏 - "与其等待网络加载,不如提前给点暗示" 注:不适用复杂交互效果演示示例解释以及使用全在index.wxml中,观看需了解组件使用. 示例下载:微信小程序-骨架屏演示 ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
电脑版微信小程序全屏显示方法，手机横屏方法。
电脑版微信小程序全屏显示方法: 在app.json中加入:"resizable": true 注意要与"pages"同级,网上有许多错误方法! 手机横屏方法: ...
微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
微信小程序长按图片不出现菜单_微信小程序长按保存图片
微信浏览器打开h5页面如果是img标签的话,长按会弹出保存图片的选项.但是微信小程序里面不可以,需要自己写这个功能. 这个功能有两个点,一个是长按,一个是保存图片到本地. 1. 微信小程序关于图片长按 ...
微信小程序白屏问题总结一二
最近时不时有用户反馈,小程序白屏,多数以华为畅享机型,iphone6P机型,荣耀8为主,主要表现为小程序刚进去时显示正常,来回切换几个页面后,个别页面就出现白屏啦. 期初以为是代码问题,JS报错,导致 ...
微信小程序全屏轮播（仿北京环球）
空闲时间看见北京环球的微信小程序,感觉首页效果挺好看的,所以就动手做了一下.仅供参考! 文章目录 1.效果预览 2.代码实现 2.1 HTML 2.2 CSS 2.3 JSON 2.4 JS 1.效果 ...
微信小程序---骨架屏实现，实现起来超级简单
一.什么是骨架屏? 骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容.通常在小程序中,我们需要手工维护骨架屏的代码,当业务变 ...

最新文章

热门文章