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 相关文章推荐
jQuery插件的写法分享
Jun 12 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 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
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python守护进程(daemon)代码实例
2015/03/06 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python实现电子产品商店
2019/02/26 Python
python输出数学符号实例
2020/05/11 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
交通安全演讲稿
2014/01/07 职场文书
优秀党支部申报材料
2014/12/24 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技