文件对象到具有正确文件名而不是 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: 协议读取的数据将仅包含 二进制文件data 本身就像通过其他协议加载时一样。协议不会提供任何元数据（例如文件名）。

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

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

在这种情况下，源点是 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

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

File object to image with correct file name instead of src="blob..."

javascript

image

image-processing

filereader

fileapi

问题

解决方法