js如何获取图片url的Blob值并预览示例代码


Posted in Javascript onMarch 07, 2019

前言

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 相关文章推荐
关于Javascript与iframe的那些事儿
Jul 04 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
理解javascript异步编程
Jan 27 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
mpvue全局引入sass文件的方法步骤
Mar 06 #Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 #Javascript
vue项目前端埋点的实现
Mar 06 #Javascript
vue2.0结合Element-ui实战案例
Mar 06 #Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 #Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 #Javascript
You might like
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP 实现重载
2021/03/09 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
新版小程序登录授权的方法
2018/12/12 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
wxPython中文教程入门实例
2014/06/09 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
python绘图方法实例入门
2015/05/19 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python计算二维矩形IOU实例
2020/01/18 Python
python正则表达式实例代码
2020/03/03 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
给小学生的新年寄语
2014/04/04 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
机关作风建设工作总结
2014/10/23 职场文书
2015年入党决心书
2015/02/05 职场文书