欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于canvas.toDataURL的那些坑

程序员文章站 2022-03-09 21:39:03
...

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 绘制就会有问题