base64格式的圖片如何上傳到oss

標籤：this   size   append   恢複   --   圖片   call   fill   沒有   

---恢複內容開始---

對於base64圖片的上傳這個東西，一直是一個問題尤其是上傳到oss。我們這次開發由於需要修剪圖片，使用了h5的很多新特性。

h5修剪圖片，使用了我們的canvas。這個步驟是這樣的。img->canvas->base64(by toDataURL)。很多人走到了這個地方直

接懵逼，base64怎麼上傳啊。找了很多網上的，發現確實找不到，沒什麼人上傳base64的教程。有點小絕望，感覺使用新特性，

修改圖片可能是種錯誤的選擇，然後出現了一個新的東西Blob對象，這個東西就無敵了。

　　img->canvas->base64(by toDataURL)->Blob

　　polyfill

if (!HTMLCanvasElement.prototype.toBlob) { Object.defineProperty(HTMLCanvasElement.prototype, ‘toBlob‘, {  value: function (callback, type, quality) {    var binStr = atob( this.toDataURL(type, quality).split(‘,‘)[1] ),        len = binStr.length,        arr = new Uint8Array(len);    for (var i=0; i<len; i++ ) {     arr[i] = binStr.charCodeAt(i);    }    callback( new Blob( [arr], {type: type || ‘image/png‘} ) );  } });} 

這樣我們就可以轉為我們的blob對象。blob對象是可以直接上傳的。這樣只需要在DataForm裡面append（file， blob）。這樣我們的就可以上傳我們的檔案了。
你當然可以說還可以更簡單，對簡單。。。一開始怎麼不說。。。先繁後簡。。。canvas.toBlob()

這樣可以直接轉成我們base64
img->canvas->Blob（by toBlob） canvas.toBlob(callback, mimeType, qualityArgument)

可以在回調裡面寫入我們的上傳的代碼。
目前來說這個東西，只是chrome ^50 ，firefox ^19,  IE ^10
你要考慮相容的話，那就沒有辦法使用這個東西了。事物是向前發展的， canvas會面的使用一定成為主流。長痛不如短痛。
趕緊試試吧。很方便。

base64格式的圖片如何上傳到oss