Question

我有一个SVG，我需要通过JavaScript动态“转换”为.png图像。这样做的方法是将SVG绘制到虚拟HTML5画布元素中，然后通过toDataURL方法转换为数据URI。代码如下：

HTML：

<div id="something" data-svg="<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'><path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/></svg>">

JS（使用jQuery）：

$(function() {

  var svgData = $('#something').data('svg');
  var imageUrl = svgToImageURL(svgData);


  function svgToImageURL(svgString){
    var canvas = document.createElement("canvas");
    canvas.width = 260;
    canvas.height = 260;
    var ctx = canvas.getContext("2d");
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);

    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      var png = canvas.toDataURL("image/png");
      document.getElementById('something').innerHTML = '<img src="'+png+'"/>';
      DOMURL.revokeObjectURL(png);
    };

    img.src = url;
  }

这里可以看到一个小提琴来证明：https://jsfiddle.net/hejjgu7b/。它应该将Adobe徽标渲染为页面中的图像。

它在Chrome和Edge中运行良好，但在Firefox中，图像始终为空。看起来数据URI在某种程度上是格式错误的，因为它比Chrome / Edge中呈现的要短得多。

我想知道是否有人能够理解为什么会这样，以及如何让Firefox呈现正确的数据URI？

非常感谢。

Answer 1

根据this post，似乎有一个错误，即除非SVG具有（非基于百分比的）宽度和高度属性，否则Firefox不会将SVG渲染到画布。

这个项目的挑战之一是我们的SVG不具备这些属性，但我们可能能够克服这一点。现在通过添加尺寸（<svg width='105' height='93'...>）修复此问题，根据更新的小提琴：https://jsfiddle.net/hejjgu7b/2/

Answer 2

为什么这么复杂？您不需要在画布中渲染svg。您可以使用btoa（）

将其编码为base 64

btoa("<svg>...");

然后，您只需添加data-url前缀。

"data:image/svg+xml;base64," + btoa("<svg>...");

将SVG转换为不在Firefox中工作的数据URI

2 个答案: