Goal - using the client-side:

将动态SVG绘图（使用d3js创建）转换为可下载的PNG图像，并使用Internet Explorer工作 .

Accomplished:

在Chrome中实现，没问题 . 一旦我有PNG DataURI，它就很容易转换为可下载的PNG blob .

不幸的是，在IE中运行相同的代码会产生SecurityException，当我尝试将画布转换为PNG DataURI（canvas.toDataURL）时，它会失败 .

显然这是一个活跃的IE BUG，我在StackExchange上找到了同样问题的其他人 . 我相信它与应用于源自其他域的图像的CORS限制有关（并且在画布中绘制），但我的SVG源自本地页面 .

Thoughts

想知道原因是否与我为IMG元素呈现的SVG图形生成初始DataURI（data：image / svg xml）的方式有关 .

我已经尝试了两种替代方法来生成image / svg xml，base64和charset = utf8，但它们还没有克服遇到的问题 . 所以想知道它是否是SVG的内容，目前SVG绘图中没有图像 .

Code for reference:

var rawSvg = new XMLSerializer().serializeToString(svgElement);

var img3 = new Image();
document.body.appendChild(img3);
var canv = document.createElement("canvas");
var canv_ctx = canv.getContext("2d");

img3.onload = function () {
   //-- Image has loaded using the native data:image/svg+xml 
   canv_ctx.drawImage(this, 0, 0);

   //-- IE Will throw a Security Exception here...
   console.log(canv.toDataURL("image/png")); 
};

img3.src = "data:image/svg+xml;base64," + btoa(rawSvg);
//-- Or utf8
//img3.src = "data:image/svg+xml;charset=utf8," + encodeURIComponent(rawSvg);

UPDATE:

测试了Canvg对2d上下文“drawSvg（...）”的扩展，它绘制在画布上 . 这在canvas元素上调用toDataURL时克服了SecurityException，但是draw函数对于文本呈现和放置来说不够准确 . 所以我仍然需要一个解决方案 .

参见示例屏幕截图，left correct rending using native drawImage and right the incorrect rendering using Canvg's drawSvg

Code using Canvg - NB: You'll need to reference the JS

var canvas = document.createElement("canvas"),
    cctx = canvas.getContext("2d");
var rawSvg = new XMLSerializer().serializeToString(svgClone.node());
canvas.width = svgWidth;
canvas.height = svgHeight;
//cctx.drawImage(this, 0, 0);
//-- Use Canvg's extension to canvasContext
cctx.drawSvg(rawSvg);
//-- This Works on IE - not accurate though
var dataURL = canvas.toDataURL();
internet-explorer canvas svg todataurl