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

---恢復內容開始---

對於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會面的使用必定成爲主流。長痛不如短痛。趕忙試試吧。很方便。