将图像对象转换为文件对象，javascript

我想在客户端使用HTML5将“图像对象”转换为“文件对象”，以将文件上载到azure blob存储

由于我使用AngularJs，我的计划是

• 将图像转换为文件
• 使用将文件上载到blob存储

我已经找到了很多使用FileReader将文件对象转换为图像的例子，但是我找不到相反的例子

我听说用客户端javascript将文件写入本地文件系统是不可能的，但是我不需要存储文件，我只需要文件对象引用来上传文件

---

有办法解决这个问题吗？

有办法通过文件系统API将文件保存到本地文件系统，但只有Chrome和Opera支持。如果要将图像文件从file/Blob渲染为IMG标记，可以执行以下操作

img.src = URL.createObjectURL(myFileOrBlob);

这会将文件/Blob转换为URL，该URL仅在浏览器内部可用，如下所示

blob:http%3A//localhost/2ee59cd6-9220-429c-add9-05983645639e

使用完图像后，最好通过执行以下操作来释放内存

URL.revokeObjectURL(blobURL);

---

希望我正确理解了您的意思，这对您有所帮助。

您可以使用fetch和FormData进行转换和上载

//load src and convert to a File instance object
//work for any type of src, not only image src.
//return a promise that resolves with a File instance
function srcToFile(src, fileName, mimeType){
    return (fetch(src)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], fileName, {type:mimeType});})
    );
}

//usage example: (works in Chrome and Firefox)
//convert src to File and upload to server php
srcToFile('/images/logo.png', 'new.png', 'image/png')
.then(function(file){
    var fd = new FormData();
    fd.append('file1', file);
    return fetch('/upload.php', {method:'POST', body:fd});
})
.then(function(res){
    return res.text();
})
.then(console.log)
.catch(console.error)
;

---

对于您的情况，只需将

'/images/logo.png'

替换为

imageObject.src

blobURL供本地使用，不应上载到服务器。