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

时间:2017-01-11 13:04:04

标签: javascript svg html5-canvas data-uri

我有一个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?

非常感谢。

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:1)

为什么这么复杂?您不需要在画布中渲染svg。您可以使用btoa()

将其编码为base 64
btoa("<svg>...");

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

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