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

Question

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

当我加载资源时，我得到一个纯文本 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">