根據(jù)標(biāo)題來看，是個很泛泛的說法。這只是一種大致的思路。web端需要操作圖片的時候，有時需要的不僅僅是一個src，可能老大要你將獲取到的圖片轉(zhuǎn)為二進(jìn)制，以方便保存、上傳、復(fù)制、粘貼等等。怎么做呢？
假設(shè)你有一個<img>標(biāo)簽，圖片已經(jīng)在網(wǎng)頁中顯示出來了，你能直接（同步的）取到它的二進(jìn)制格式嗎？答案好像是否定的。
我們知道圖片的src，如果要加載一遍src需要等待，需要異步的回調(diào)。既然圖片已經(jīng)顯示出來了，我們?yōu)楹芜€要再去load一遍圖片呢？我是這么想的，但是現(xiàn)實(shí)情況好像沒這么完美。
第一種方法：Ajax請求圖片可以返回Blob或ArrayBuffer。后用FileReader，可以讀取Blob或者ArrayBuffer
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; //設(shè)定返回數(shù)據(jù)類型為Blob
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result); //FileReader讀取后的回調(diào)
}
reader.readAsDataURL(xhr.response); //xhr.response就是一個Blob，用FileReader讀取
};
xhr.open('GET', url);
xhr.send();
}
用法：
toDataUrl('http://path/to/your/pic.png',function(dataUrl){
console.info(dataUrl); //dataUrl是base64格式
});
該方法很慢，兩個回調(diào)函數(shù)。也需要瀏覽器兼容
第二種方法：圖片加載后用canvas畫出來，然后再toDataUrl
function 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.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat); //image/png, image/jpeg
callback(dataURL);
};
img.src = src;
}
方法執(zhí)行完后，就等著GC自動回收img和canvas對象吧。
中間變量
有時候我們要關(guān)注這個過程的中間變量。比如第一種方法產(chǎn)生的Blob對象。
