javascript - 文件对象到具有正确文件名而不是 src ="blob..."的图像

Question

我有一个文件对象 myFile 在控制台中看起来像这样:

File {
  name: "myimage.jpg", 
  lastModified: 1465476925001, 
  lastModifiedDate: Thu Jun 09 2016 14:55:25 GMT+0200 (CEST), 
  size: 33002
  type: "image/jpeg"
}

但是当我用它创建一个图像时

var image = new Image();
image.src = URL.createObjectURL(myFile);

我得到:

<img src="blob:http://myurl.com/6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5">

当我尝试通过右键单击保存文件时，文件名为空或“6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5”而不是“myimage.jpg”。文件对象的文件名不见了。有什么方法可以设置图片文件名吗？

Answer 1

问题

File 对象是 Blob 的扩展版本，允许它保存文件名、大小等元数据。

但是，虽然 createObjectURL() 将同时引用 File 和 Blob，但通过 blob 读取的数据:协议(protocol)将仅包含二进制文件数据 本身，就像通过其他协议(protocol)加载时一样。协议(protocol)不会提供任何元数据(例如文件名)。

其他不考虑文件名的示例可能是通过 PHP 或 ASPX 页面 (/getimage.aspx?id=1) 加载图像时。这里也没有提供元数据，在这种情况下，浏览器会建议将类似“getimage.aspx%3Fid=1”的内容作为文件名。正如预期的那样。

IMG 标签本身从不采用任何文件名，即使在源点使用了一个文件名也是如此；它仅按原样保留通过 src 属性/属性提供给它的内容，作为检索所需二进制数据进行解码的连接点。

在这种情况下，源点是 blob:*/*，这将是 IMG 标签通过 src 引用的内容，并且是保存数据时使用的浏览器。

解决方法

从 File 对象中保留文件名的唯一方法是跟踪它，以便在需要下载时可以访问它。

但这也有局限性，因为您只能使用 A 标记中的 download 属性指定文件名。当然，<= IE11等部分浏览器不支持该属性。

<a href="blob:.." download="filename.jpg"><img ..></a>

在 IE10+ 中有 proprietary method msSaveBlob()虽然可以使用它:

window.navigator.msSaveBlob(myBlob, 'filename.jpg');

除此之外，没有通用的方法可以在客户端中指定默认文件名。

Example fiddle