时间:2021-05-26
前言
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容,下面话不多说了,来一起看看详细的介绍吧
方法如下
1)使用 XMLHttpRequest 对象获取图片url的Blob值
//获取图片的Blob值function getImageBlob(url, cb) { var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { if(cb) cb(this.response); } }; xhr.send();}注意这里的XMLHttpRequest必须使用异步模式,同步模式不能设置 responseType = "blob"
2)使用 FileReader 对象获取图片 Blob 对象的 data 数据
function preView(url){ let reader = new FileReader(); getImageBlob( url , function(blob){ reader.readAsDataURL(blob); }); reader.onload = function(e) { var img = document.createElement("img"); img.src = e.target.result; document.body.appendChild(img); }}总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue将文件/图片批量打包下载各种格式都可以,只要url能够打开或者下载文件即可.1.通过文件的url,使用js的XMLHttpRequest获取blob2.将
js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览HTML代码实现功能的js代码//获取图片路劲的方法,兼容多种浏览器,通过crea
本文实例为大家分享了angularjs上传多张图片并预览的具体代码,供大家参考,具体内容如下directive.js/**多图片上传及预览指令(需指定图片类名)
浅谈js图片前端预览之filereader和window.URL.createObjectURL//previewimg:filereader方式documen
本文实例讲述了JS实现获取图片大小和预览的方法。分享给大家供大家参考,具体如下:JS获取图片大小和预览【兼容IE和其它浏览器】functionpreviewIm