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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python使用KNN算法识别手写数字
2019/04/25 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
工作失职检讨书范文
2014/01/16 职场文书
员工入职担保书范文
2014/04/01 职场文书
期末评语大全
2014/05/04 职场文书
个人投资合作协议书
2014/10/12 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
网络营销计划书
2015/01/17 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书