1、利用page.$getAppWebview()与plus.nativeObj.Bitmap实现应用界面截图,具体代码如下:
<template> <view> <image src="//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实现
网友回复
js如何流式输出ai的回答并折叠代码块,点击代码块右侧可预览代码?
ai大模型如何将文章转换成可视化一目了然的图片流程图图表?
大模型生成html版本的ui原型图和ppt演示文档的系统提示词怎么写?
rtsp视频直播流如何转换成websocket流在h5页面上观看?
为啥coze会开源工作流agent coze studio?
如何检测网页是通过收藏夹打开的?
python如何实现类似php的http动态脚本请求处理响应代码?
js如何实现类似php的http动态脚本请求处理响应代码?
trae与solo有啥区别不同?
vue如何让ai动态生成问卷调查多步骤表单式收集基础信息自动规划执行任务?