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的parseInt 进制问题
May 07 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python Django批量导入数据
2016/03/25 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
python实现图片插入文字
2019/11/26 Python
python 画函数曲线示例
2019/12/04 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
元旦促销方案
2014/03/15 职场文书
护理专业自荐书
2014/06/04 职场文书