html2canvas 图片跨域及截图模糊处理

html2canvas 图片跨域及截图模糊处理

/*图片跨域及截图模糊处理*/

let shareContent = domObj,//需要截图的包裹的（原生的）DOM 对象
	width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度
	height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度
	canvas = document.createElement("canvas"), //创建一个canvas节点
	scale = 2; //定义任意放大倍数 支持小数
	
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale

let opts = {
	scale: scale, // 添加的scale 参数
	canvas: canvas, //自定义 canvas
	logging: false, //日志开关，便于查看html2canvas的内部执行流程
	width: width, //dom 原始宽度
	height: height,
	useCORS: true // 【重要】开启跨域配置，同时服务器图片要设置允许跨域
};

html2canvas(shareContent,opts);

html2canvas 其他坑点

参考链接：https://www.cnblogs.com/padding1015/p/9225517.html

关键词：htmlcanvas跨域
所属分类：网站技术
本文地址：https://me.i-i.me/article/41.html