码迷,mamicode.com
首页 > Web开发 > 详细

js 获取图片url的Blob值并预览

时间:2017-03-01 12:37:43      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:status   load   doc   nbsp   this   ade   ima   image   class   

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值并预览

标签:status   load   doc   nbsp   this   ade   ima   image   class   

原文地址:http://www.cnblogs.com/tujia/p/6483255.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!