svg到png图像的浏览器内转换(包括IE在内的跨浏览器）

In browser conversion of svg to png image (cross browser including IE)

本文关键字：浏览器 IE 包括 png svg 转换 图像      更新时间：2023-09-26

我使用的是Highcharts，我需要将页面上的所有图表转换为一个可以发送到服务器的图像，这样我就可以将其合并到主导出excel中，该excel已经包含一些表和数据透视网格。这是我迄今为止的代码

var svg = Highcharts.getSVG(charts);
img = new Image();
img.src = "data:image/svg+xml," + encodeURIComponent(svg);
mycanvas = document.createElement('canvas');
mycanvas.width = 1000
mycanvas.height = 1000
ctx = mycanvas.getContext("2d");
ctx.drawImage(img, 0, 0);
$("body").append("<image src='" + mycanvas.toDataURL("image/png") + "'/>");
$.ajax({
    type: "POST",
    url: '@Url.Action("getfile")',
    data: JSON.stringify({ file: mycanvas.toDataURL("image/png").replace("data:image/png;base64,", "") }),
    contentType: 'application/json; charset=utf-8'
});

这是我测试是否从客户端正确获取数据的c#代码（我只是将base64字符串写入一个文件）。Firefox和Chrome正确写入图像，IE只给我一个黑色图像

public void getfile(string file)
{
    System.IO.File.WriteAllBytes(@"c:'yourfile.png", Convert.FromBase64String(file));
}

你可以在这里找到整个代码http://jsfiddle.net/gd7bB/2291/

这个图片在Firefox和Chrome中似乎生成得很好，但在IE中却没有（这里我只得到一个黑色的图片）。我正在使用一个画布，从我收集到的IE支持IE9对HTML5画布标签的支持。

如果你能帮我找出我做错了什么，或者你能指出一个更好的解决方案，我将不胜感激

IE9似乎确实支持画布元素https://msdn.microsoft.com/fr-fr/library/ff975241（v=vs.85）.aspx

以下toDataURL的示例/测试代码适用于我的IE11：http://samples.msdn.microsoft.com/Workshop/samples/canvas/todataurl.html

你给的小提琴在IE11中不起作用；从控制台错误来看，这会导致在图像完成渲染之前无法调用drawImage。IE抛出

调用不支持的方法或方法的属性

添加setTimeout允许IE渲染动态图像并绕过此错误。

但这会导致

Security Error

因为IE似乎已经污染了画布，因为一些"跨来源"问题

SecurityError
The img or video element is not of the same origin or domain
as the document that owns the canvas element. Versions earlier
than Internet Explorer 10 use SECURITY_ERR.

出于安全原因，IE似乎污染了所有用SVG填充的图像-SVG包含的画布IE安全错误到DataURL

我设法使用canvg获得了一个工作版本，它将SVG文件转换为画布指令-https://github.com/gabelerner/canvg

溶液可以归结为

var svg = Highcharts.getSVG(charts);
var mycanvas = document.createElement('canvas');
canvg(mycanvas, svg)
console.log(mycanvas.toDataURL("image/png"))

检查一下这把小提琴http://jsfiddle.net/6bxqbaeb/1/它在IE11 中工作

相关文章：