js如何获取图片url的Blob值并预览示例代码
更新时间：2019年03月07日 08:40:36 作者：Tiac
这篇文章主要给大家介绍了关于js如何获取图片url的Blob值并预览的相关资料，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
前言
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);
}
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了Javascript字符串浏览器兼容问题,实例形式对比分析了不兼容字符串与兼容字符串的区别,是非常实用的技巧,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了JavaScript实现淘宝京东6位数字支付密码效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要为大家详细介绍了原生js实现自定义难度的扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要为大家详细介绍了微信小程序实现折叠展开效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了微信小程序学习笔记之本地数据缓存功能,结合实例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage针对数据缓存的存取、删除等相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要为大家详细介绍了微信小程序自定义键盘，内部虚拟支付，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要为大家详细介绍了JS实现可控制的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的,所以下面这篇文章主要给大家介绍了关于uniapp微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
实现JS拖拽插件主要从六个方面做介绍：一、js拖拽插件的原理，二、根据原理实现的最基本效果，三、代码抽象与优化，四、扩展：有效的拖拽元素，五、性能优化和总结，六、jquery插件化 ,需要的朋友可以参考下2015-08-08
点击a标签的时候给其换背景的方法有很多，在本文将为大家介绍下js是如何实现的，感兴趣的朋友不要错过2013-10-10
最新评论