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())
})
}
}