使用正确的文件名而不是src ="blob ..."将文件对象转换为图像

Question

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

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:协议读取的数据将仅包括二进制文件数据本身,如通过其他协议加载时.不会通过协议提供元数据(例如文件名).

不考虑文件名的其他示例可以是通过例如PHP或ASPX页面(/getimage.aspx?id=1)加载图像的情况.此外,没有提供元数据,浏览器会在这种情况下建议使用类似" getimage.aspx%3Fid = 1 "的文件名.正如所料.

IMG即使在源点使用了一个文件名,标签本身也不会假设任何文件名; 它只保存通过src属性/属性as- is给它的内容,作为检索所需二进制数据以进行解码的连接点.

在这种情况下,源点blob:*/*,然后会是怎样IMG通过标签引用src,并且是当数据是什么浏览器使用进行保存.

解决方法

保持File对象文件名的唯一方法是跟踪它,以便在需要下载时访问它.

但这也是有限的,因为您只能使用标记中的download属性指定文件名A.当然,某些浏览器(如<= IE11)不支持此属性.

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

在IE10 +中,有一种专有方法msSaveBlob()可以代替使用:

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

除此之外,没有通用的方法在客户端中指定默认文件名.

示例小提琴