ajax接口返回图片类型数据，转为base64赋值给img

工作中常用到接口生成图片，返回的数据JS怎么处理转成base64展示？

主要利用xhr2.0，responseType="blob"返回blob数据类型，代码如下：
第一种：

function fetchImageDataFromUrl(url, cb) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.withCredentials = true;
    xhr.onload = function() {
        if (xhr.status < 400)
            cb(this.response, null);
        else
            cb(null, "HTTP Status " + xhr.status + " for url " + url);
    }
    xhr.onerror = function(e) {
        cb(null, e);
    }

    xhr.send();
}

fetchImageDataFromUrl(url, function () {
	var reader = new FileReader();
	reader.onload = function (event) {
	    var txt = event.target.result;
	    console.log(txt)
	    $('#sharePicPop img').attr('src', txt);
	    $('#sharePicPop').removeClass('dn');
	};
	reader.readAsDataURL(arrayBuffer);
})

第二种主要是利用arraybuffer

function fetchImageDataFromUrl(url, cb) {
    // Fetch image data via xhr. Note that this will not work
    // without cross-domain allow-origin headers because of CORS restrictions
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "arraybuffer";
    xhr.withCredentials = true;
    xhr.onload = function() {
        if (xhr.status < 400)
            cb(this.response, null);
        else
            cb(null, "HTTP Status " + xhr.status + " for url " + url);
    }
    xhr.onerror = function(e) {
        cb(null, e);
    }
    xhr.send();
}

fetchImageDataFromUrl(url, function(arrayBuffer) {
    var buffer = new Buffer(arrayBuffer.byteLength);
     var view = new Uint8Array(arrayBuffer);
     for (var i = 0; i < buffer.length; ++i) {
         buffer[i] = view[i];
     }
     var type = 'image/jpeg';
     var e = "data:" + type + ";base64," + buffer.toString("base64");
     $('#sharePicPop img').attr('src', e);
     $('#sharePicPop').removeClass('dn');
})

第三种利用canvas转换base64数据

var imgUrl = '' //  带有参数的的ajax接口url
var img = new Image();
img.crossOrigin = location.host;
 img.src = imgUrl;
 img.onload = function() {
     var canvas = document.createElement('canvas');
     canvas.width = img.width;
     canvas.height = img.height;
     var ctx = canvas.getContext('2d');
     ctx.drawImage(img, 0, 0, img.width, img.height);
     $('#sharePicPop img')[0].src = canvas.toDataURL('image/jpeg');
     $('#sharePicPop').removeClass('dn');
     common.stopScroll();
 };
 img.onerror = function(e,s) {
     console.log(e);
     console.log(s);
 } 

参考文章：http://javascript.ruanyifeng.com/stdlib/arraybuffer.html

---

扫一扫 关注我的公众号【前端名狮】，更多精彩内容陪伴你！