Question

已经提出了类似的问题，对这个问题的理解很清楚，我要求的是替代方案或解决方法：

我想要做的是从画布上获取数据URL，该画布上有一个SVG文档。我已经尝试了各种各样的东西，但只要SVG出现在画布附近，IE9和Chrome就不会让我拥有该URL。

我试过了：

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

我的想法已经不多了。

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

Answer 1

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

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

From SVG to Canvas and Back

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

希望这有帮助。

绘制SVG后画布'污染'

2 个答案: