BLOB URL在Safari中不起作用 [英] BLOB URL not working in Safari
问题描述
我正在使用D3生成图形,并希望将其导出为图像,该图像在除Safari之外的所有浏览器中均能正常工作.该代码生成D3 SVG,该D3 SVG在BLOB中用作图像,并在BLOB中用作图像,并添加到可以导出的画布中.
I'am using D3 to generate a graph and want to export this to an image, which works fine in all browsers except Safari. The code generates a D3 SVG, which is used in a BLOB, which is used as an image, which is added to a canvas which can be exported.
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代码).但是它不会将其显示为图像,因此我无法导出它.
In Safari, the onload function is never triggered and the image element is also not displaying the image. I logged both the blob element and URL and both seem fine (if i manually open the blob URL in safari it downloads the SVG code). But it won't display it as an image and therefore i can't export it.
我注意到的是,当我检查img元素并在新选项卡中打开src时,它会在URL https://www.mysite.nl/mypage/blob:https://www.mysite.nl/2a173f60-8b34 -4b1c-894b-4ff6adcfe9fa
Something i noticed is that when i inspect the img element and open the src in a new tab it opens on the URL https://www.mysite.nl/mypage/blob:https://www.mysite.nl/2a173f60-8b34-4b1c-894b-4ff6adcfe9fa
因此出于某些原因,Safari将BLOB URL解释为相对的而不是绝对的.有人知道如何解决此问题吗?
So for some reason Safari interprets the BLOB URL as a relative instead of an absolute one. Anyone got an idea on how to fix this?
推荐答案
Safari不喜欢您的Blob的MIME类型.
Safari doesn't like your Blob's MIME Type.
正确的是image/svg+xml
字符集标头是无用的,虽然我不确定它实际上是否被允许存在,但还是无用的.
The correct one is image/svg+xml
the charset header is useless, and while I'm not sure it's actually allowed to be there, it is anyway useless.
因此从type
选项中删除;charset=utf-8
部分,就可以了:
So remove the ;charset=utf-8
part from your type
option, and you'll be fine:
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中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!