[英]Converting image object to File object, javascript
我想在客户端使用HTML5将“图像对象”转换为“文件对象”,以将文件上传到天蓝色的blob存储。
由于我正在使用AngularJs,因此我的计划是
我发现了很多使用FileReader将File对象转换为图像的示例,但是我找不到相反的示例。
我听说不可能使用客户端JavaScript将文件写入本地文件系统,但是我不需要存储文件,我只需要文件对象引用来上传文件。
有什么办法解决这个问题?
您可以使用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
有一种方法可以通过文件系统API将文件保存到本地文件系统,但只有Chrome和Opera支持。 如果要将图像文件从File / Blob渲染到IMG标签,则可以执行
img.src = URL.createObjectURL(myFileOrBlob);
这会将File / Blob转换为URL,该URL仅在浏览器内部可用,看起来像这样
blob:http%3A//localhost/2ee59cd6-9220-429c-add9-05983645639e
使用完图像后,最好通过执行以下操作释放内存
URL.revokeObjectURL(blobURL);
希望我能正确理解您,对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.