我正在使用 D3 生成图形并希望将其导出为图像,这在除 Safari 之外的所有浏览器中都可以正常工作。代码生成一个 D3 SVG,在 BLOB 中使用,用作图像,添加到可以导出的 Canvas 。
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 函数,图像元素也不会显示图像。我记录了 blob 元素和 URL,两者看起来都很好(如果我在 safari 中手动打开 blob URL,它会下载 SVG 代码)。但它不会将其显示为图像,因此我无法将其导出。
我注意到,当我检查 img 元素并在新选项卡中打开 src 时,它会在 URL https://www.mysite.nl/mypage/blob:https://www.mysite.nl/2a173f60-8b34-4b1c-894b-4ff6adcfe9fa 上打开
因此出于某种原因,Safari 将 BLOB URL 解释为相对而非绝对 URL。有人知道如何解决这个问题吗?
最佳答案
Safari 不喜欢您的 Blob 的 MIME 类型。
正确的是 image/svg+xml
charset header 是无用的,虽然我不确定它是否真的被允许存在,但无论如何它都是无用的。
因此,从您的 type
选项中删除 ;charset=utf-8
部分,您会没事的:
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);
关于javascript - BLOB URL 在 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52060607/