Javascript: 通過圖片url擷取圖片blob對象

為什麼要這樣做呢？

1. 無需讓使用者下載圖片後再通過 input file 上傳;
2. chrome外掛程式可以直接右鍵點擊頁面上的圖片，直接上傳圖片;
3. 都是為了增加使用者體驗！

思路

1. 通過ajax請求圖片，得到圖片的位元據
2. 組合Uint8Array和BlobBuilder，得到圖片的blob對象
3. 增加fileName和fileType，偽裝成File對象

實現代碼

/** * 將符合位元組流的string轉化成Blob對象 *  * @param {String} data * @return {Blob}  * @api public */function binaryToBlob(data) {    var bb = new BlobBuilder();    var arr = new Uint8Array(data.length);    for(var i = 0, l = data.length; i https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Receiving_binary_data    // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]    r.overrideMimeType('text/plain; charset=x-user-defined');    r.send(null);    var blob = binaryToBlob(r.responseText);    blob.name = blob.fileName = url.substring(url.lastIndexOf('/') + 1);    blob.fileType = "image/jpeg"; //"image/octet-stream";    return blob;};/** * 將dataUrl轉化成Blob對象 *  * @param {String} dataurl * @return {Blob}  * @api public */function dataUrlToBlob(dataurl) {    // data:image/jpeg;base64,xxxxxx    var datas = dataurl.split(',', 2);    var blob = binaryToBlob(atob(datas[1]));    blob.fileType = datas[0].split(';')[0].split(':')[1];    blob.name = blob.fileName = 'pic.' + blob.fileType.split('/')[1];    return blob;};

更多閱讀

• https://developer.mozilla.org/en/DOM/Blob
• http://www.w3.org/TR/FileAPI/#dfn-Blob
• https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Receiving_binary_data
• http://www.nihilogic.dk/labs/canvas2image/

有愛

^_^ 希望本文對你有用