绘制 SVG 后画布“被污染”答案

【问题标题】：Canvas 'tainted' after drawing SVG绘制 SVG 后画布“被污染”
【发布时间】：2017-11-27 20:34:45
【问题描述】：

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

我想做的是从画布上获取一个数据 URL，该画布上绘制了一个 SVG 文档。我已经尝试了各种方法，但只要 SVG 靠近该画布，IE9 和 Chrome 就不允许我拥有该 URL。

我试过了：

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

我的想法已经不多了。

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

【问题讨论】：

您能发布一个您拥有的代码示例，以便我们可以使用它吗？
我可以，但我看不出它会有什么帮助。问题不是代码错误，而是我缺少通用解决方案。
有Fabric.js
今天试用了 fabric.js——这是个好主意，但是当我给它一个复杂的 svg 文档（剪辑路径、图案填充、viewBox、使用 dataURL 的图像等）时，它没有输出任何有用的东西)。
如果没有完整的测试用例，很难说为什么它会失败，但根据code.google.com/p/chromium/issues/detail?id=279445，它应该可以在 Chrome 中工作。

标签： svg cross-browser html5-canvas rasterizing taint

【解决方案1】：

如果你想光栅化 SVG，这里有几个项目：

这是一个浏览器兼容性表：

From SVG to Canvas and Back

【讨论】：

【解决方案2】：

做三件事，

获取 SVG 并使用 XMLSerializer 对其进行解析
在绘制 SVG 之前更改画布高度和宽度
使用“canvg”库来解析 SVG，而不是使用浏览器上的画布和原生画布方法。

//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);
}

希望这会有所帮助。

【讨论】：