将文件对象转换为具有正确文件名的图像而不是src =" blob ..." [英] File object to image with correct file name instead of src="blob..."

问题描述

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

I have a File object myFile that looks like this in console:

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

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

But when i create an image out of it with

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。文件对象中的文件名已消失。有没有办法设置图像文件名？

When i try to save the file with right-click, the file-name is empty or "6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5" instead of "myimage.jpg". The file-name from the file-object is gone. Is there any way to set the image file name?

推荐答案

问题

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

The Problem

The File object is sort of an extended version of a Blob that allows it to hold metadata such as filename, size etc.

然而，当 createObjectURL（）将引用文件和 Blob 通过 blob读取的数据：协议只包含二进制文件通过其他协议加载时的文件数据。不会通过协议提供元数据（例如文件名）。

However, while createObjectURL() will reference both File and Blob the data read through the blob: protocol will only consist of the binary file data itself as when loading via other protocols. No metadata (such as filename) will be provided via the protocol.

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

Other examples where filename is not considered could be when an image is loaded via for example a PHP or ASPX page (/getimage.aspx?id=1). Also here there is no metadata provided and browser would suggest something like "getimage.aspx%3Fid=1" as filename in this case. As expected.

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

The IMG tag itself never assumes any filename even if one is used at source point; it only holds what is given to it via the src attribute/property as-is, as a connection point to retrieve the needed binary data for decoding.

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

In this case the source point is blob:*/* which then will be what IMG tag references via src, and is what the browser use when the data is to be saved.

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

The only way to hold on to a filename from the File object is to keep track of it so you have access to it when needed for download.

但这也是有限的，因为你只能使用下载指定文件名 A 标记中的属性。当然，某些浏览器（例如< = IE11）不支持此属性。

But also this is limited as you can only specify a filename using the download attribute in an A tag. And of course, some browsers such as <= IE11 does not support this attribute.

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

在IE10 +中有专有方法 msSaveBlob（） 可以代替使用：

In IE10+ there is the proprietary method msSaveBlob() which can be used instead though:

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

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

Besides from these there are no common way to specify a default filename from within the client.

示例小提琴

Example fiddle

这篇关于将文件对象转换为具有正确文件名的图像而不是src =&quot; blob ...&quot;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！