ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2019-05-19 12:23:32  阅读:383  来源: 互联网

标签:javascript image image-processing filereader fileapi


我有一个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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有