从 img 标签创建文件对象答案

【问题标题】：Create a file object from an img tag从 img 标签创建文件对象
【发布时间】：2018-09-30 04:35:07
【问题描述】：

假设我有一个带有 base64 src 的 img 标签：

<img src="data:image/jpeg;base64,/9j/4AAQS..." id="id">

如何创建一个文件对象（包含 img 标签的数据），就像用户从文件输入中选择文件后得到的对象一样？以便稍后将其上传到服务器。

就像那个：

File { name: "a22919a70cf8458d654642e0bc2cd881.jpg", lastModified: 1521393615000, lastModifiedDate: Date 2018-03-18T17:20:15.000Z, webkitRelativePath: "", size: 40635, type: "image/jpeg" }

我不是在寻找 BLOB。

【问题讨论】：

How to create a File object from binary data in JavaScript的可能重复
@SunnyPatel 不，最终用户会创建一个 BLOB 而不是 File 对象，就像您通过文件输入获得的那样。

标签： javascript html

【解决方案1】：

您始终可以先创建一个 blob，然后将其转换为文件。

但您几乎不需要 File 实例。尝试构建它们而不是仅使用 blob 会让您更加头疼。如果您需要将它们上传到服务器，您需要使用FormData。当你这样做时，你可以附加一个 blob 并将文件名设置为第三个参数
fd.append(field, blob, filename) 而不是附加文件

除了parts 和options 之间的文件名之外，文件构造函数参数与blob 相同。

File Object 继承了 Blob 对象，因此您也可以在其他 api 中以相同的方式使用它们

new File([parts], filename, options)
new Blob([parts], options)

另一件事是不同的是文件支持另外 1 个选项... lastModified
IE/Edge 可以有文件但构造函数不起作用。这就是为什么你应该使用 blob...

const img = document.getElementById('id')

fetch(img.src)
.then(res => res.blob())
.then(blob => {
  const file = new File([blob], 'dot.png', blob)
  console.log(file)
})

&lt;img id="id" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="&gt;

【讨论】：

【解决方案2】：

File Object 继承了 Blob 对象，因此非常接近。

下面的代码展示了一个成功生成的文件“Blob”对象，可以用来生成一个下载图片的对象url。

（注意：在堆栈溢出时，blob url 有一个空主机，这会导致它不会自动下载为文件，但您仍然可以使用右键另存为。请参阅URL.createObjectURL returns a blob with null prepended. Eg : Blob:null/12415-63）

// https://bl.ocks.org/nolanlawson/0eac306e4dac2114c752 
let dataUrl = document.getElementById("img1").src.split(',')
let base64 = dataUrl[1];
let mime = dataUrl[0].match(/:(.*?);/)[1];
let bin = atob(base64);
let length = bin.length;
// From http://stackoverflow.com/questions/14967647/ (continues on next line)
// encode-decode-image-with-base64-breaks-image (2013-04-21)
let buf = new ArrayBuffer(length);
let arr = new Uint8Array(buf);
bin
  .split('')
  .forEach((e,i)=>arr[i]=e.charCodeAt(0));
  
let f = new File([buf],'filename',{type:mime}); // note: [buf]
let blobUrl = URL.createObjectURL(f);
let link = document.createElement("a"); 
link.href = blobUrl;
link.download = "filename";
link.innerHTML = "Download file.";
document.getElementById("url1").appendChild(link);

<img id="img1" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB1klEQVR42n2TzytEURTHv3e8N1joRhZGzJsoCjsLhcw0jClKWbHwY2GnLGUlIfIP2IjyY2djZTHSMJNQSilFNkz24z0/Ms2MrnvfvMu8mcfZvPvuPfdzz/mecwgKLNYKb0cFEgXbRvwV2s2HuWazCbzKA5LvNecDXayBjv9NL7tEpSNgbYzQ5kZmAlSXgsGGXmS+MjhKxDHgC+quyaPKQtoPYMQPOh5U9H6tBxF+Icy/aolqAqLP5wjWd5r/Ip3YXVILrF4ZRYAxDhCOJ/yCwiMI+/xgjOEzmzIhAio04GeGayIXjQ0wGoAuQ5cmIjh8jNo0GF78QwNhpyvV1O9tdxSSR6PLl51FnIK3uQ4JJQME4sCxCIRxQbMwPNSjqaobsfskm9l4Ky6jvCzWEnDKU1ayQPe5BbN64vYJ2vwO7CIeLIi3ciYAoby0M4oNYBrXgdgAbC/MhGCRhyhCZwrcEz1Ib3KKO7f+2I4iFvoVmIxHigGiZHhPIb0bL1bQApFS9U/AC0ulSXrrhMotka/lQy0Ic08FDeIiAmDvA2HX01W05TopS2j2/H4T6FBVbj4YgV5+AecyLk+CtvmsQWK8WZZ+Hdf7QGu7fobMuZHyq1DoJLvUqQrfM966EU/qYGwAAAAASUVORK5CYII=">
<div id="url1"></div>

【讨论】：