跨浏览器 - 绘制 SVG 后画布'tainted'

Question

类似的问题已经被问过了，并且问题的原因很好理解，我要求的是替代方案或解决方法：

我想做的是从绘制了SVG文档的画布中获取数据URL。 我已经尝试了各种各样的方法，但是一旦SVG靠近该画布，IE9和Chrome就不会让我拥有该URL。

我试过：

• Canvg（不支持我需要的一切）
• 将 svg 文件直接绘制到画布上 （content.drawImage（svg， 0 0））
• 创建整个 svg 文档的 base64 字符串，使其成为 的源，然后将该图像绘制到画布上。
• 将 svg 保存到文件，设置 src 属性以指向该文件（在同一域上），然后将其绘制到画布上

我的想法快用完了。

我可以尝试类似的库来栅格化 svg 吗？在绘制之前，我是否可以将 SVG 转换为其他内容，以便画布永远不会知道涉及 SVG？有没有一种非常简单的方法可以使用PHP或类似的东西进行服务器端的转换？

Answer 1

如果要栅格化 SVG，这里有几个项目：

• SVG BTOA 序列化程序
• 来自序列化 SVG 的服务器端光栅化

下面是浏览器兼容性表：

• 从 SVG 到画布再返回

Answer 2

做三件事，

1. 获取 SVG 并使用 XMLSerializer 对其进行解析
2. 在绘制 SVG 之前更改画布的高度和宽度
3. 使用"canvg"库来解析SVG，而不是在浏览器上使用带有本机canvas方法的画布。

//Get SVG element and then serialize it to convert to a stream of String
var svg = document.querySelectorAll('svg');
var base64 = [];
for(i=0; i < svg.length; i++){
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg[i]);
var canvas = document.querySelectorAll('canvas');
var render_width = 1000;
var render_height = 600;
//CHange/Set Canvas width/height attributes to reset origin-clean flag
canvas[i].height = render_height;
canvas[i].width = render_width;
//Use canvg library to parse SVG and draw the image on given canvas
canvg(canvas[i], svgString, {
useCORS: true,
scaleWidth: render_width,
scaleHeight: render_height,
ignoreDimensions: true,
log: true
});
//Convert canvas to png formated dataURL and save the body of it
var rawImage = canvas[i].toDataURL("image/png");
//Array containing all the images in the form of base64 data URLs.
base64ImageArray.push(rawImage);
}

希望这有帮助。