javascript – 使用正确的文件名而不是src =“blob …”将文件对象转换为图像

我有一个File对象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”.文件对象中的文件名已消失.有没有办法设置图像文件名？

解决方法:

问题

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

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

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

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

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

标签：javascript,image,image-processing,filereader,fileapi
来源： https://codeday.me/bug/20190519/1135015.html