uni-app页面截图保存到相册

最近app的新需求里面提到了分享邀请，用到了截图二维码邀请页面，这里简单分享下。

其原理就是唤醒手机的截图功能，截取当前页面，上代码：（这里用到的二维码生成器需要的可以自行去下载：wxqrcode.js）

<template><view class="bg_weixin" ><view class="bg"><image src="../../../static/img/user/bg1.png" mode=""></image></view><view class="img_bg"><image class="wx" :src="img"></image></view><view class="footer"><button @click="toImage()" type="default">保存图片</button></view><u-toast ref="uToast" /></view>
</template><script>import QR from "@/common/wxqrcode.js" // 二维码生成器  export default {data(){return {codes:"",img:'',test:'',}},onReady() {const that = this;//防止切图成白屏setTimeout(function() {that.toImage();}, 1000);},onLoad(option) {this.codes=option.code;this.qrcode()},methods:{qrcode() {let url = 'http://app-dbc.itipool.co/?code=' + this.codesthis.img = QR.createQrCodeImg(url, {size: parseInt(280) //二维码大小  })},toImage() {const that = this;/* 获取屏幕信息 */let ws = this.$mp.page.$getAppWebview();let bitmap = new plus.nativeObj.Bitmap('test');// 将webview内容绘制到Bitmap对象中ws.draw(bitmap,function(e) {/* 获取base64 */that.test= bitmap.toBase64Data();/* 加载base64编码 */bitmap.loadBase64Data(bitmap.toBase64Data(),function() {console.log('加载Base64图片数据成功');/* 保存图片 */bitmap.save('_doc/share.jpg',{},async (i)=>{console.log('保存图片成功：' + JSON.stringify(i));uni.saveImageToPhotosAlbum({filePath: i.target,success: function() {/* 清除 */bitmap.clear();that.$refs.uToast.show({title: '保存成功,请到相册中查看',type: 'success',})},fail(e) {that.$refs.uToast.show({title: '保存失败'+e,type: 'error',})}});},function(e) {console.log('保存图片失败：' + JSON.stringify(e));});},function() {console.log('加载Base64图片数据失败：' + JSON.stringify(e));});},function(e) {console.log('截屏绘制图片失败：' + JSON.stringify(e));},{check: true, // 设置为检测白屏clip: { top: '100px', left: '0px', height: '100%', width: '100%' } // 设置截屏区域});},}}</script>

uni-app页面截图保存到相册相关推荐

【Flutter 问题系列第 22 篇】在 Flutter 中如何截取屏幕并显示到页面中，以及如何将截图保存到相册
这是[Flutter 问题系列第 22 篇],如果觉得有用的话,欢迎关注专栏. 关于在 Flutter 中如何截取屏幕,以及如何将截图保存到相册的文章少之又少,即使有,也是错误一大片,有的甚至运行后都 ...
小程序超长页面截图保存web-view+html2canvas
web-view文档建议参考----支付宝提供的文档,html2canvas官方文档(官网可以下载html2canvas.js 和 html2canvas.min.js).由于篇幅受限,这里就贴了一下 ...
uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...
uni app页面跳转后，刷新页面参数丢失问题
正常页面路由跳转地址应该是这样的:http://localhost:8080/#/pages/study/hiring?id=1393112968202870785 浏览器刷新之后就编程这样子:htt ...
用canvas绘制微信小程序海报页面并保存相册-适用微信原生
微信小程序绘制海报并保存相册 tip:代码中使用的是uni的api 如果使用原生微信小程序开发,可以把uni更换成wx使用文章目录微信小程序绘制海报并保存相册前言一.分析需求二.准备数据三 ...
《从0到1上线微信小游戏》第十二节实现截图和保存到相册功能
第十二节实现截图和保存到相册功能新建节点截图功能保存到相册在这一小节中,我们将通过调用微信小游戏API来给俄罗斯方块这个游戏加上截图和保存到相册这两个功能. 如果大家还需要实现截图后的预览功 ...
长按UIWebView上的图片保存到相册
不知道各位对于这个需求要如何解决? 可能有些人会想到js与原生交互,js监听图片点击事件,然后将图片的url传递给原生App端,然后原生App将图片保存到相册,这样子麻烦吗?超麻烦.(1).js监听图 ...
教你实现微信公众号效果：长按图片保存到相册
不知道各位对于这个需求要如何解决? 可能有些人会想到js与原生交互,js监听图片点击事件,然后将图片的url传递给原生App端,然后原生App将图片保存到相册,这样子麻烦吗?超麻烦.(1).js监听图 ...
Android 截图并保存到相册
2019独角兽企业重金招聘Python工程师标准>>> 参考博客:Android从相册中获取图片以及路径一.截图方法屏幕截图,屏幕截图只能截取到当前窗体的图形,并不能截取,网上找 ...

uni-app页面截图保存到相册

uni-app页面截图保存到相册相关推荐

最新文章

热门文章