关于使用uniapp截图APP内容的两种办法，及一种小程序原生的截图办法

方法一 html2canvas

截图内容分享给朋友保存到相册export default {data() {return {logo: logo(),topBackground: topBackground(),QrCode: QrCode(),data: {type: '',titleTime: '',Slogan: []},info: {},name: uni.getStorageSync('nickname'),avatar: uni.getStorageSync('avatar')}},mounted() {},methods: {            // 保存图片getSaveImg(data) {uni.showLoading({mask: true})let base64data = data.base64data;// console.log("base64data", base64data)// return let bitmap = new plus.nativeObj.Bitmap("test");bitmap.loadBase64Data(base64data, function() {console.log("加载Base64图片数据成功");let time = Date.now()let url = '_downloads/yflPic' + time + '.png';uni.hideLoading()bitmap.save(url, {}, function(i) {console.log('保存图片成功：' + JSON.stringify(i));// 保存图片到相册uni.saveImageToPhotosAlbum({filePath: url,success: function() {uni.showToast({title: '图片保存成功',icon: 'none'})// 图片保存成功后，将临时保存的图片删除plus.io.resolveLocalFileSystemURL(url,function(entry) {entry.getMetadata(function(metadata) {// console.log("fileCount=" + metadata.fileCount);entry.remove(); //删除单个文件 _downloads/改文件名});},function(error) {// uni.showToast({ title: "下载文件" });console.log("error" + error);});bitmap.clear()}});bitmap.clear();}, function(e) {onsole.log('保存图片失败：' + JSON.stringify(e));bitmap.clear();});}, function() {console.log('加载Base64图片数据失败：' + JSON.stringify(e));bitmap.clear();});},            // 分享图片getSaveImg_Share(data) {uni.showLoading({mask: true})let base64data = data.base64data;let bitmap = new plus.nativeObj.Bitmap("test");bitmap.loadBase64Data(base64data, function() {console.log("加载Base64图片数据成功");let time = Date.now()let url = '_downloads/yflPic' + time + '.png';uni.hideLoading()bitmap.save(url, {}, function(i) {console.log('保存图片成功：' + JSON.stringify(i));// 转发图片到微信uni.share({provider: "weixin",scene: "WXSceneSession",type: 2,imageUrl: url,success: function(res) {console.log("success:" + JSON.stringify(res));bitmap.clear();},fail: function(err) {console.log("fail:" + JSON.stringify(err));}});}, function(e) {onsole.log('保存图片失败：' + JSON.stringify(e));bitmap.clear();});}, function() {console.log('加载Base64图片数据失败：' + JSON.stringify(e));bitmap.clear();});},}}import html2canvas from 'html2canvas';export default {data() {return {}},methods: {// 获取设备的Dpr值getDpr() {if (window.devicePixelRatio && window.devicePixelRatio > 1) {return window.devicePixelRatio;}return 1;},/** * 将传入值转为整数 * @param value * @returns {number} */parseValue(value) {return parseInt(value, 10);},            // 截图后保存到本地generateImage(event, ownerInstance) {// 获取想要转换的dom节点var dom = document.getElementById('container');html2canvas(dom, {// allowTaint: false,width: dom.clientWidth,height: dom.clientHeight,scrollY: 0,scrollX: 0,useCORS: true}).then(function(canv) {// 将canvas转换成图片渲染到页面上let url = canv.toDataURL('image/jpg'); // base64数据ownerInstance.callMethod('getSaveImg', {base64data: url})});},            // 截图后分享给好友generateImage_Share(event, ownerInstance) {// 获取想要转换的dom节点var dom = document.getElementById('container');html2canvas(dom, {// allowTaint: false,width: window.clientWidth,height: window.clientHeight,useCORS: true,dpi: 350}).then(function(canv) {// 将canvas转换成图片渲染到页面上let url = canv.toDataURL('image/jpg'); // base64数据ownerInstance.callMethod('getSaveImg_Share', {base64data: url,})});},}}.content {// display: flex;// flex-direction: column;// align-items: center;// justify-content: center;}.card {width: 100%;background: #3F65F4;// padding: 16px;.topTitle {background: url('data:image/png;base64,iVBORw0K...GgoK5CYII=') no-repeat;//这里想要图片能够截取清晰则必须使用base64background-size: 100% 100%;width: 100%;height: 151px;padding: 16px;.title {font-weight: 600;font-size: 36px;color: #F5F5F7;}.time {margin-top: 15px;font-weight: 500;font-size: 12px;color: #fff;}}    }

方法二 播放视频时截图

 抓拍    2                3import {throttle,formatDate} from '@/common/util.js'export default {data() {return {videoCode: '',videoId: '',videoNo: null,videoName: '',playUrl: '',current: 0, // tabs组件的current值，表示当前活动的tab选项swiperCurrent: 0,// 回放时间datetimerange: [],// 抓拍时间datetimerangePic: [],dataList: [],videoContext: ''}},onLoad(options) {},methods: {// tabs通知swiper切换tabsChange(index) {this.swiperCurrent = index},// swiper-item左右移动，通知tabs的滑块跟随移动transition(e) {let dx = e.detail.dxthis.$refs.uTabs.setDx(dx)},// swiper滑动结束，分别设置tabs和swiper的状态animationfinish(e) {let current = e.detail.currentthis.$refs.uTabs.setFinishCurrent(current)this.swiperCurrent = currentthis.current = currentconsole.log("tab滑动", this.current);},datetimePlay(e) {console.log("回放时间", e);},datetimePic(e) {console.log("抓拍时间", e);},doshot() {this.videoContext = uni.createVideoContext('container'); //创建视频实例指向videothis.videoContext.pause(); //先对视频进行暂停，防止截图黑屏this.$nextTick(() => {this.getCapture()})},getCapture() {let that = thislet pages = getCurrentPages();let page = pages[pages.length - 1];let ws = page.$getAppWebview()var bitmap = new plus.nativeObj.Bitmap('test');// 将webview内容绘制到Bitmap对象中  ws.draw(bitmap, () => {// 将原生Bitmap转换成Base64字符串  let base64data = bitmap.toBase64Data()bitmap.loadBase64Data(base64data, function() {// console.log("加载Base64图片数据成功");let time = formatDate(new Date(), 'yyyyMMddHHmmss')let url = '_downloads/four-faith_' + time + '.jpg';uni.hideLoading()bitmap.save(url, {}, function(fileinfo) {// console.log('保存图片成功：' + fileinfo);// 保存图片let params = {base64: base64data.split(',')[1],captureTime: formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'),deviceNo: that.videoCode,fileName: "app_" + that.videoCode + '_' + that.videoNo + '_' +time +'.jpg',fileSize: fileinfo.size,videoNo: 1}uni.showToast({title: '抓拍成功',icon: 'none',})bitmap.clear();}, function(e) {onsole.log('保存图片失败：' + JSON.stringify(e));bitmap.clear();});}, function() {console.log('加载Base64图片数据失败：' + JSON.stringify(e));bitmap.clear();});this.videoContext = uni.createVideoContext('container'); //创建视频实例指向videothis.videoContext.play();}, (e) => {console.log('截屏绘制图片失败：', e);uni.showToast({title: '抓拍失败',icon: 'none',})}, {check: true, // 设置为检测白屏// 设置截屏区域clip: {top: uni.getSystemInfoSync().statusBarHeight + 90,left: '0px',height: '400px',width: '100%'}});},}}page {background-color: #f6f5f8;}.swiper {height: 100%;}.videoBox {width: 100%;height: 300px;/* background-color: #fff000; */}.ctrlBox {margin-top: 30rpx;}.remoteBox {display: flex;justify-content: center;}.selectTime {padding: 10rpx 20rpx;}

方法三 小程序原生使用的截图