html2canvas使用报错Attempting to parse an unsupported color function ""

html2canvas使用报错Attempting to parse an unsupported color function “”

开发中遇到很神奇的bug,试图分析不支持的颜色函数,一脸懵,心想难道浏览器不支持canvas吗,不可能呀,我这可是chrome,可给我吓坏了。中间去官网下载了最新的html2canvas代码,也用npm安装尝试了,发现都不管用。最后发现是打包工具的问题,打包出现了错误,去网上找了已经压缩好的文件尝试。爽的一批~~~,附上文件链接,有需要请自提。
引入方法

import './html2canvas/index';

使用方法

html2canvas(dom,{useCORS:true}).then(canvas => {
	console.log(canvas.toDataURL())
})

当然,这样设置出来的图片是不会太清晰的,下面附上生成清晰图片的代码

import './html2canvas/index';
export default{
	getImage(){
	    var shareContent = document.querySelector("#img");
	    var width = shareContent.offsetWidth; 
	    var height = shareContent.offsetHeight; 
	    var scale = 2;
	    var canvas = document.createElement("canvas");
	    canvas.width = width * scale; //定义canvas 宽度 * 缩放
	    canvas.height = height * scale; //定义canvas高度 *缩放
	    var content = canvas.getContext("2d");
	    content.scale(scale, scale)
	    var rect = shareContent.getBoundingClientRect();
	    content.translate(-rect.left,-rect.top);
	    html2canvas(shareContent,{
	    	useCORS: true,
	        height: height,
	        width: width,
	        canvas: canvas,
	        scale:scale,
	        dpi: window.devicePixelRatio*2,
	    }).then(canvas => {
	    	var context = canvas.getContext('2d');
	        context.mozImageSmoothingEnabled = false;
	        context.webkitImageSmoothingEnabled = false;
	        context.msImageSmoothingEnabled = false;
	        context.imageSmoothingEnabled = false;
	        console.log(canvas.toDataURL())
	    })
	}
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值