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);
}
}

完。

js 获取图片url的Blob值并预览的更多相关文章

  1. html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  2. JavaScript实现本地图片上传前进行裁剪预览

    本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...

  3. 图片处理:html文本获取图片Url,判断图片大小,存数据库

    1.从html文本获取图片Url /** * html文本中取出url链接 */ public class Url { public static void main(String[] args) { ...

  4. Js获取后台集合List的值和下标的方法

    Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...

  5. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  6. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  7. js获取每个按键的ASCII值

    通过js绑定键盘按下事件onkeydown获取每个按键的ascII值. js获取每个按键的ascii值 <script language="javascript"> / ...

  8. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  9. 网站开发进阶(十八)js获取html标签中的值

    js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...

随机推荐

  1. RSS Feeds with Spring Boot

    http://nixmash.com/post/rss-feeds-with-spring-boot **************************************** We added ...

  2. mysql 开启慢查询记录

    Linux查看mysql 安装路径 一.查看文件安装路径 由于软件安装的地方不止一个地方,所有先说查看文件安装的所有路径(地址). 这里以mysql为例.比如说我安装了mysql,但是不知道文件都安装 ...

  3. asp.net updatepanel 导致JS不能加载,而无法使用

    asp.net updatepanel 局部刷新,导致JS不能加载,而无法使用,而且 updatepanel会刷两次,郁闷的. 解决方法如下: <script type="text/j ...

  4. 基于CSS3自定义美化复选框Checkbox组合

    今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点.有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化check ...

  5. Spring中@Resource与@Autowired

    问题 这其实就是@Autoware与@Resource没有正确的使用,这个错误是因为wmPoiOplogService这个变量装配方式是@Resource,按照@Resource的按名字查找的方式,并 ...

  6. CentOS更新163 yum源

    这个脚本也没啥多大意义,只是为了自己练习着写一下bash ======================================================================= ...

  7. u-boot 2016.05 添加u-boot cmd

    记录一下如何在u-boot 添加一个自己想要的命令. 首先来看一下宏,include/command.h 218 #define U_BOOT_CMD(_name, _maxargs, _rep, _ ...

  8. C#递归累计到父行

    搞了半天 写了一个算法,希望能帮到需要的朋友 效果如下 水电费用是由 就是部门水费和电费累加的,而部门水费由科室水费累加起来的 表结构 DataTable dt = new DataTable(); ...

  9. ps -a,job,netstat,daemons

     kill         -9是强制      -15是正常后执行 进程中的数据都写到 /proc/*这个目录下 进程 ps -l      aux   -lA   zxjf(进程树) job   ...

  10. sparkR could not find function "textFile"

    Yeah, that’s probably because the head() you’re invoking there is defined for SparkR DataFrames[1] ( ...