uniapp APP端使用html2canvas截图分享小程序卡片图片模糊、跨域等问题解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp APP端使用html2canvas截图分享小程序卡片图片模糊、跨域等问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

项目场景：uniapp APP端，分享小程序到微信好友，使用html2canvas截取当前页面做卡片封面图。仅是需要展示部分内容用作卡片封面就可以，不强制需要全屏截图。

问题描述

问题1、部分页面截取到的图片分享到微信后卡片图片模糊。

问题2、截图时报错：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported。

实现方案：

APP端 html2canvas截图步骤：

1、npm方式下载

npm i html2canvas

2、引用 html2canvas

import html2canvas from 'html2canvas'

3、APP中需要用renderjs方式进行,开始截图：

1）在需要截图的页面定义如下renderjs的截图函数：

<script module="canvasToImage" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {}
		},
		methods: {
			getImage(event, ownerInstance) {
				ownerInstance.callMethod('showLoading', {})
				//containert为需要操作的dom节点，也就是定义的id值
				var dom = document.getElementById('containert');
				html2canvas(dom, {
					width: window.clientWidth,
					height: 200,
					useCORS: true,
					scale: 1,
					dpi: 1000
				}).then(function(canv) {
					let url = canv.toDataURL('image/jpg'); // base64数据
					//getImgToShare回调到主script的函数
					ownerInstance.callMethod('getImgToShare', {
						base64data: url,
					})
				});
			},
		}
	}
</script>

2）、在主script定义回调函数“getImgToShare”，用于处理分享逻辑

getImgToShare(data) {
				let that=this
				let base64data = data.base64data;
				let bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64data, function() {
					let url = '_downloads/yflPic' + Date.now() + '.png';
					bitmap.save(url, {}, function(i) {
						var obj={
							title: '分享标题',
							path: '分享的小程序路径',
							appid: '小程序原始id originalId',
							imageUrl:url
						}
						uni.share({
						    provider: 'weixin',
						    scene: "WXSceneSession",
						    type: 5,
						    imageUrl: obj.imageUrl',
							title: obj.title,
						    miniProgram: {
						        id: obj.appid,
						        path: obj.path,
						        type: 0,
						        webUrl: 'http://uniapp.dcloud.io'
						    },
						    success: ret => {
						        console.log(JSON.stringify(ret));
						    }
						});
					}, function(e) {
						bitmap.clear();
					});
				}, function() {
					bitmap.clear();
				});
			},

3）页面触发：@click="canvasToImage.getImage"

<view class="share-app" @click="canvasToImage.getImage">
					<image  class="clap-detail-comment_btn_img" :src="imgServer('ruralRevitalization/clapDetail/comment-share.png')"></image>
				</view>

4）定义需要截取的dom，对需要操作的标签用 id="containert"标记

<view class="mainBox" id="containert"> 
		<view class="">
			截取内容
		</view>
	</view>

解决方案：

以上步骤就能实现了截图分享小程序功能，现在来解决开头说的两个问题：

问题1、分享的卡片图片模糊

在代码中找到如下代码：

html2canvas(dom, {
					width: window.clientWidth,//画布宽度
					height: 200,//画布高度
					useCORS: true,//支持跨越
					scale: 1,//缩放比例
					dpi: 1000//图片尺寸
				})

参数调整，不同的页面可能需要调整不同的参数才能得到清晰的图片：

1、 width,画布的宽度，这个不用调整；

2、height,画布的高度，有时候页面可能有很多内容，高度太长，截取到的图片也会模糊，所以可以写一个固定值，具体值多少可根据实际效果来定，

3、useCORS: true 支持跨域，不需要改

4、scale，缩放比例，值越高，图片越高清，默认值为1，可适当提高

5、dpi，dpi是指某些设备分辨率的度量单位。dpi越低，扫描的清晰度越低，dpi越高，清晰度越高.

所以我们可以动态调整height、scale、dpi这三个值，就可以得到清晰的图片。