将图像对象转换为文件对象,javascript
Converting image object to File object, javascript
我想在客户端使用 HTML5 将"图像对象"转换为"文件对象",以将文件上传到 Azure blob 存储。
由于我使用的是AngularJs,我的计划是
- 将图像转换为文件
- 使用 Angular-Azure-Blob-upload 将文件上传到 Blob 存储
我找到了很多使用 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支持它。如果要将图像文件从文件/斑点渲染到 IMG 标签,可以
img.src = URL.createObjectURL(myFileOrBlob);
这会将文件/Blob 转换为 URL,该 URL 仅在浏览器中可用,如下所示
blob:http%3A//localhost/2ee59cd6-9220-429c-add9-05983645639e
使用完图像后,最好通过执行
URL.revokeObjectURL(blobURL);
希望我正确理解你,这对你有帮助。
相关文章:
- 面向对象JavaScript中的私有函数
- 对象 Javascript 中的标签无效 - 想要添加事件列表器
- 将字符串转换为对象 javascript/jquery
- 正在检查对象javascript中是否存在嵌套属性
- 时间-日期对象JavaScript getUTCMilliseconds
- 仅在对象(javascript)中解析值
- 使用对象(JavaScript或jQuery)填充选择下拉列表
- 引用另一个对象javascript中的对象
- 如何删除列表中的对象?Javascript nodejs和下划线
- 无法从日期对象javascript获取日期和月份
- 如何在if语句中使用对象-Javascript
- 对象javascript错误
- 对象Javascript的少数实例
- 位置对象Javascript
- 将字符串传递到对象javascript中
- 获取对象Javascript或jQuery的最后一个值
- 鼠标接近对象Javascript
- 这个mixins代码是书中的错误吗;面向对象JavaScript的原理”;
- 使用闭包编译器编写更好的面向对象JavaScript完整示例代码
- 访问对象javascript数组中的对象属性值