3

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

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

我试过了：

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

我的想法不多了。

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

4

2 回答 2

0

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

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

于 2013-10-09T23:49:18.553 回答
0

做三件事，

  1. 获取 SVG 并使用 XMLSerializer 解析它
  2. 在绘制 SVG 之前更改画布的高度和宽度
  3. 使用“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);
}

希望这可以帮助。

于 2017-11-27T12:34:45.990 回答