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会面的使用必定成为主流。长痛不如短痛。赶忙试试吧。很方便。