uniapp如何对页面指定范围区域截图生成图片分享?
网友回复
1、利用page.$getAppWebview()与plus.nativeObj.Bitmap实现应用界面截图,具体代码如下:
<template> <view> <image src="http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" style="width: 750rpx;" mode="widthFix"></image> <view @tap="downloadFile">截图下载</view> </view> </template> <script> export default { data() { return { } }, methods: { downloadFile() { let $this = this; uni.showLoading({ //加载框 title: '保存中...', mask: true }) var pages = getCurrentPages(); //获取当前页面信息 var page = pages[pages.length - 1]; var bitmap = null; // $this.$nextTick(()=> { var currentWebview = page.$getAppWebview(); bitmap = new plus.nativeObj.Bitmap('amway_img'); // 将webview内容绘制到Bitmap对象中 currentWebview.draw(bitmap, function() { // console.log('截屏绘制图片成功'); //这里我将文件名用四位随机数拼接了,不然会出现当前图片替换上一张图片只能保存一张图片的问题 let rand = Math.floor(Math.random() * 10000) let saveUrl = '_doc/' + rand + 'a.jpg' bitmap.save(saveUrl, {}, function(i) { console.log('保存图片成功:' + JSON.stringify(i)); uni.saveImageToPhotosAlbum({ filePath: i.target, success: function() { // bitmap.clear(); //销毁Bitmap图片 uni.showToast({ title: '保存成功', duration: 1500 }); },complete() { uni.hideLoading(); } }); }, function(e) { console.log('保存图片失败:' + JSON.stringify(e)); }); }, function(e) { console.log('保存图片失败:' + JSON.stringify(e)); }); }, } } </script> <style> </style>
draw还可以设置区域
currentWebview.draw(bitmap, () => { console.log('截屏绘制图片成功'); let rand = Math.floor(Math.random() * 10000) let saveUrl = '_doc/' + rand + 'a.jpg' bitmap.save(saveUrl, {}, function(i) { console.log('保存图片成功:' + JSON.stringify(i)); uni.saveImageToPhotosAlbum({ filePath: i.target, success: function() { bitmap.clear(); //销毁Bitmap图片 uni.showToast({ title: '保存截图成功', duration: 1500 }); }, complete() { uni.hideLoading(); } }); }, function(e) { console.log('保存图片失败:' + JSON.stringify(e)); }); }, (e) => { console.log('截屏绘制图片失败:', e); }, { check: true, // 设置为检测白屏 clip: { top: uni.getSystemInfoSync().statusBarHeight + 45, left: '0px', height: '266px', width: '100%' } // 设置截屏区域 });2、还可以使用html2canvas实现