Question

我正在使用D3生成图形，并希望将其导出为图像，该图像在Safari以外的所有浏览器中均能正常工作。该代码生成D3 SVG，该D3 SVG用于BLOB中，用作图像，并添加到可导出的画布中。

var blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
var url = window.URL.createObjectURL(blob);

// Put the svg into an image tag so that the Canvas element can read it in.
var img = d3.select('body').append('img')
 .attr('width', width)
 .attr('height', height)
 .node();

img.onload = function(){
  // Some method which is never called
}
img.src = url;

在Safari中，永远不会触发onload函数，并且image元素也不显示图像。我同时记录了blob元素和URL，并且看起来都不错（如果我在野生动物园中手动打开blob URL，则会下载SVG代码）。但是它不会将其显示为图像，因此我无法导出它。

我注意到的是，当我检查img元素并在新标签中打开src时，它会在URL https://www.mysite.nl/mypage/blob:https://www.mysite.nl/2a173f60-8b34-4b1c-894b-4ff6adcfe9fa

上打开

因此由于某些原因，Safari将BLOB URL解释为相对的而不是绝对的。有人知道如何解决此问题吗？

Answer 1

Safari不喜欢您的Blob的MIME类型。

正确的是image/svg+xml字符集标头是无用的，虽然我不确定它实际上是否被允许存在，但还是无用的。

因此，从您的;charset=utf-8选项中删除type部分，就可以了：

var blob = new Blob(['<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect y="0" width="100" height="100" rx="15" ry="15" x="0"></rect></svg>'], {
  type: 'image/svg+xml' // this is the only MIME for SVG
});
document.body.appendChild(
  new Image()
).src = URL.createObjectURL(blob);

BLOB URL在Safari中不起作用

1 个答案: