Question

我试图通过将SVG文件绘制到画布来将其转换为PNG文件。

var svgToCanvas = function(svgElement) {
  setNameSpaceOnEl(svgElement);
  appendCSSRules(svgElement, getCssRules(svgElement));

  var image = new Image();

  // this is ugly but will do:
  var svgXml = $('<div>').append($(svgElement).clone()).html();
  var b64str = btoa(unescape(encodeURIComponent(svgXml)));
  // var svgXml = new XMLSerializer().serializeToString(svgElement);

  var defer = $q.defer();

  image.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
    defer.resolve(canvas);
  };
  image.src = 'data:image/svg+xml;base64,' + b64str;
  return defer.promise;
};

问题在于即使图像处理发生在onload函数内部，Firefox也会在行上产生错误NS_ERROR_NOT_AVAILABLE: ...

context.drawImage(image, 0, 0);。

使用断点我看到image.src此时是一个有效的base64字符串，我甚至可以打开图像本身。

上述代码适用于Chrome，但不适用于Firefox。有关如何在Firefox中解决这个问题的任何建议吗？

将SVG图像添加到画布会在Firefox中生成NS_ERROR

0 个答案: