+
80
-

uniapp如何对页面指定范围区域截图生成图片分享?

uniapp如何对页面指定范围区域截图生成图片分享?


网友回复

+
0
-

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实现
我知道答案,我要回答