base64转化字节流 js_JavaScript 图片与Base64数据互相转换脚本

图片转换为Base64数据

方法一：非Html 5使用FileReader

使用XMLHttpRequest将图像加载为blob，接着使用FileReader API将其转换为dataURL。function toDataURL(url, callback) {

var xhr = new XMLHttpRequest();

xhr.onload = function() {

var reader = new FileReader();

reader.onloadend = function() {

callback(reader.result);

}

reader.readAsDataURL(xhr.response);

};

xhr.open('GET', url);

xhr.responseType = 'blob';

xhr.send();

}

toDataURL('https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon&f=y', function(dataUrl) {

console.log('结果:', dataUrl)

})

方法二：Html 5使用Canvas

将图像加载到Image对象中，将其绘制到Canvas上，最后转换为dataURLfunction toDataURL(src, callback, outputFormat) {

var img = new Image();

img.crossOrigin = 'Anonymous';

img.onload = function() {

var canvas = document.createElement('CANVAS');

var ctx = canvas.getContext('2d');

var dataURL;

canvas.height = this.naturalHeight;

canvas.width = this.naturalWidth;

ctx.drawImage(this, 0, 0);

dataURL = canvas.toDataURL(outputFormat);

callback(dataURL);

};

img.src = src;

if (img.complete || img.complete === undefined) {

img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

img.src = src;

}

}

toDataURL(

'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon&f=y',

function(dataUrl) {

console.log('结果:', dataUrl)

}

)

Base64数据转换为图片

这里是把Base64的字符串转换为Blob ，这样就可以把数据传到一些图片服务器。function base64toBlob(base64Data, contentType) {

contentType = contentType || '';

var sliceSize = 1024;

var byteCharacters = atob(base64Data);

var bytesLength = byteCharacters.length;

var slicesCount = Math.ceil(bytesLength / sliceSize);

var byteArrays = new Array(slicesCount);

for (var sliceIndex = 0; sliceIndex 

var begin = sliceIndex * sliceSize;

var end = Math.min(begin + sliceSize, bytesLength);

var bytes = new Array(end - begin);

for (var offset = begin, i = 0; offset 

bytes[i] = byteCharacters[offset].charCodeAt(0);

}

byteArrays[sliceIndex] = new Uint8Array(bytes);

}

return new Blob(byteArrays, { type: contentType });

}