如何在不调用 canvas toDataURL 的情况下获取 base64 图像数据？答案

【问题标题】：How to get base64 image data without call canvas toDataURL?如何在不调用 canvas toDataURL 的情况下获取 base64 图像数据？
【发布时间】：2015-02-27 09:34:56
【问题描述】：

我正在进行一个需要支持 ie9 或 ie10 的项目。
我正在使用 d3.js 进行数据可视化。
现在我需要提供一个函数来将图表导出为 pdf。
我一直在调查可能的解决方案。似乎canvas + jsPdf 是要走的路，下面是我写的一些代码。
但问题是当toDataURL 被调用时，它会导致IE9 和IE10 上的安全错误。所以我想知道是否有一些工作可以在不使用画布的情况下获取base64图像数据，因为jsPdf只需要base64图像数据？？？

createObjectURL 到根 svg 元素

svgElement = $('svg').get(0); 
serializer = new XMLSerializer();
str = serializer.serializeToString(svgElement);

DOMURL = window.URL || window.webkitURL || window;
url = DOMURL.createObjectURL(new Blob([str], {type: 'image/svg+xml;charset=utf-8'}));

使用画布绘制图像

img = new Image();
img.onload = function(){
    ctx.drawImage(img, 0, 0);

    imgData = $canvas.get(0).toDataURL("image/jpeg");
    DOMURL.revokeObjectURL(url);  

    pdf = new jsPDF('landscape', 'pt', 1000, 800);
    pdf.addImage(imgData, 'JPEG', 0, 0);
    pdf.save('download.pdf');
};
img.src = url;

【问题讨论】：

图片是否来自不同的服务器？
否，图片src url是根据同页dom中的根svg元素动态生成的。

标签： image html5-canvas base64 jspdf todataurl

【解决方案1】：

我终于找到了使用开源项目的解决方案：canvg

【讨论】：