javascript - 切片 blob 时无法设置正确的 MIME 类型

Question

我遇到了一个 svg 图像无法在 Safari 上显示的错误。经过调查，我意识到这是因为我将资源作为我在浏览器中拆分的文件包/存档加载。

当我加载资源时，我得到一个纯文本 blob。我用 blob.slice()提取资源，传递正确的 MIME 类型。但是，似乎新的 blob 没有正确的 MIME 类型，但仍然是旧的(纯文本)。结果发现，在 Chrome 和 Firefox 上，即使 MIME 类型不正确也能显示图片，但在 Safari 上却不行。

这是不起作用的代码:

const blob = new Blob([ressource], {
  type: "text/plain",
});

const slicedBlob = blob.slice(0, blob.size, "image/svg+xml"); 
// slicedBlob.type is "text/plain"

我还复制了一些最小的测试用例:https://jsbin.com/yavaxadalo/edit?js,output

来自 MDN 文档和 W3C specs看起来我也按预期使用了该方法，但也许我遗漏了什么？

Answer 1

我不得不承认我对这个 Safari 的错误有点无能为力。 这可能应该是 reported .

我想指出您的 jsbin 有点误导，因为 slice 方法返回的 Blob 正确地将其 type 设置为 'image/svg+xml'(您正在记录原始 blob2 的类型)，但这只会让事情变得更奇怪......

现在，我不太清楚你为什么要在这里使用 Blob.slice，如果你只是想改变那个 Blob 的类型，那么你可以简单地使用 Blob( ) 构造函数，它也接受其他 Blob 作为 blobType。

const blob1 = new Blob([
`<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100"/>
</svg>`
], {type: 'text/plain'});
console.log(blob1.type);

const blob2 = new Blob([blob1], {type: 'image/svg+xml'});
console.log(blob2.type);
img.src = URL.createObjectURL(blob2);

<img id="img">

如果您真的想使用 Blob.slice 方法，那么作为一种解决方法，您可以从 Blob 构造函数中创建一个新的方法来正确包装它:

const blob1 = new Blob([
`<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100"/>
</svg>[BAD-DATA]`
], {type: 'text/plain'});

// if we need to slice it
const sliced = blob1.slice(0, blob1.size - '[BAD-DATA]'.length);
// wrap it again for Safari...
const blob2 = new Blob([sliced], {type: 'image/svg+xml'});
img.src = URL.createObjectURL(blob2);

<img id="img">