html5中如何将图片的绝对路径转换成文件对象

2020-04-21 23:32:06易采站长站整理

{
dataURL: "data:image/png;base64,xxx"
type: "image/jpg"
}
*/
var img2 = convertBase64UrlToBlob(base64);
console.log(img2);
/*
打印信息如下:
Blob {size: 9585, type: "image/jpg"}
*/
}
</script>
</body>
</html>

注意:在HTML5中,新增一个Blob对象,代表原始二进制数据,其实file对象也是继承了Blob对象。因此我们可以使用图片的绝对地址转换成文件对象。

因此我们可以使用绝对地址的图片转换成file文件对象,详细的demo可以看我git上图片上传控件,该插件先是图片上传支持,然后突然发现到编辑页面的时候,需要显示默认的图片,也可以同时支持在默认显示图片的情况下继续上传新图片,或者删除所有的图片,但是开发人员给我的只有图片的绝对地址,所以就一直想通过图片的绝对地址如何转换成file对象,如果不转成file对象的话,使用这句代码的时候 var reader = new FileReader(); 会报错,因此可以使用我们上面讲的blob对象先转换成blob对象,然后就可以使用文件操作对象 fileReader。

详细的代码,请看我git上的 图片上传控件(https://github.com/tugenhua0707/html5UploadImage) , 效果查看 https://tugenhua0707.github.io/html5UploadImage/index.html