uniapp を使用して APP コンテンツをスクリーンショットする 2 つの方法と、小さなプログラムのネイティブ スクリーンショット方法について

方法 1 html2canvas

<template>
	<view>
		<view id="container" class="content">
			<view ref="imageDom" class="card">
				截图内容
			</view>
		</view>
		<view class="buttonArea">
			<view class="buttonItem" @click="canvasToImage.generateImage_Share">
				<image src="../../static/logo_button.png" class="buttonImg"></image>
				<view class="buttonTxt">分享给朋友</view>
			</view>
			<view class="buttonItem" @click="canvasToImage.generateImage">
				<image src="../../static/save_button.png" class="buttonImg"></image>
				<view class="buttonTxt">保存到相册</view>
			</view>
		</view>
	</view>
</template>

<script>
	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();
				});
			},
		}
	}
</script>

<script module="canvasToImage" lang="renderjs">
	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,
					})
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.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;//这里想要图片能够截取清晰则必须使用base64
			background-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;
			}
		}
    }
</style>

方法 2 ビデオの再生中にスクリーンショットを撮る

<template>
	<z-paging-swiper>
		<view slot="top" style="height: 40px;">
			<u-tabs-swiper ref="uTabs" :list="tabList" active-color="#5148ff" :current="current" @change="tabsChange"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view>
					<video id="container" class="videoBox" :src="playUrl" :controls="true"
						:enable-progress-gesture="false" :title="videoName+videoCode" :is-live="true">
					</video>
				</view>
				<view class="ctrlBox">
					<view class="remoteBox">
						<zhangyubao-remote @remote="remote"></zhangyubao-remote>
					</view>
				</view>
				<view>
					<button @click="doshot"> 抓拍</button>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
			    2
			</swiper-item>
			<swiper-item class="swiper-item">
                3
			</swiper-item>
		</swiper>

	</z-paging-swiper>
</template>

<script>
	import {
		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.dx
				this.$refs.uTabs.setDx(dx)
			},
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current
				this.$refs.uTabs.setFinishCurrent(current)
				this.swiperCurrent = current
				this.current = current
				console.log("tab滑动", this.current);
			},
			datetimePlay(e) {
				console.log("回放时间", e);
			},
			datetimePic(e) {
				console.log("抓拍时间", e);
			},
			doshot() {
				this.videoContext = uni.createVideoContext('container'); //创建视频实例指向video
				this.videoContext.pause(); //先对视频进行暂停，防止截图黑屏
				this.$nextTick(() => {
					this.getCapture()
				})
			},
			getCapture() {
				let that = this
				let 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'); //创建视频实例指向video
					this.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%'
					}
				});
			},
		}
	}
</script>

<style>
	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;
	}
</style>

方法 3 アプレットのネイティブ使用のスクリーンショット