天天看點

移動端UC浏覽器不支援Blob的解決方案

前言

  • uc浏覽器不支援Blob的解決方案
  • 參考文章:http://www.haomou.net/2016/01/14/2016_android_blob/
  • 如果你使用canvas導出圖檔,并将圖檔存儲在uint8Array中,然後想通過blob構造之後上傳到諸如aliyun oss伺服器,或者個人檔案伺服器,那麼你要注意了。在chrome早先版本和目前的android中,至少是andrid5.1之前的浏覽器,包括微信浏覽器等,都不支援blob的構造方法,需要使用BlobBuilder。

原因

var jpeg = new Blob( [array.buffer], {type : "image/jpeg"});
           

這個blob的構造方法,在ios手機浏覽器是支援的,但是在android手機浏覽器不行。

桌面版的chrome浏覽器解決了這個blob bug, 但是android手機還是有這個問題,會傳回一個type error,因為android浏覽器不支援這個構造方法。你必須使用老版本的BlobBuilder API.

解決方法

var array = new Int8Array([, -]);

try{
  var jpeg = new Blob( [array], {type : "image/jpeg"});
}
catch(e){
    // TypeError old chrome and FF
    window.BlobBuilder = window.BlobBuilder ||
                         window.WebKitBlobBuilder ||
                         window.MozBlobBuilder ||
                         window.MSBlobBuilder;
    if(e.name == 'TypeError' && window.BlobBuilder){
        var bb = new BlobBuilder();
        bb.append([array.buffer]);
        var jpeg = bb.getBlob("image/jpeg");
    }
    else if(e.name == "InvalidStateError"){
        // InvalidStateError (tested on FF13 WinXP)
        var jpeg = new Blob( [array.buffer], {type : "image/jpeg"});
    }
    else{
        // We're screwed, blob constructor unsupported entirely
    }
}
           

繼續閱讀