关于canvas.toDataURL的那些坑
程序员文章站
2022-03-09 21:39:03
...
关于canvas.toDataURL的那些坑
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。
如果画布的高度或宽度是0,那么会返回字符串“data:,”。
如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么该传入的类型是不支持的。
Chrome支持“image/webp”类型
html2canvas(element).then(function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var imgWidth = 2000;
var imgHeight = 2000/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', [imgWidth,imgHeight]);
pdf.addImage(pageData, 'png', 0, 0, imgWidth, imgHeight);
pdf.save($("#sn").html()+'.pdf');
});
此代码是用了jspdf生成当前页面的pdf 发现pageData 由canvas.toDataURL(‘image/jpeg’, 1.0); 获取的变量没有内容,查了好久网上也没发现问题,后来突然想到是有张图片404 导致的 有这种问题的同学 注意下404 页面有错误 canvas.toDataURL 绘制就会有问题
上一篇: linux中关于时间的设置和同步
下一篇: 关于极光的那些事-那些踩过的坑