关于canvas.toDataURL的那些坑

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
如果画布的高度或宽度是0，那么会返回字符串“data:,”。

如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
Chrome支持“image/webp”类型

此代码是用了jspdf生成当前页面的pdf 发现pageData 由canvas.toDataURL('image/jpeg', 1.0); 获取的变量没有内容，查了好久网上也没发现问题，后来突然想到是有张图片404 导致的有这种问题的同学注意下404 页面有错误 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 绘制就会有问题

来源：CSDN

作者：森林里丁达尔

链接：https://blog.csdn.net/a985018505/article/details/103613296

标签

data

png

pdf