标签：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）。这样我们的就可以上传我们的文件了。
这样可以直接转成我们base64
img->canvas->Blob（by toBlob） canvas.toBlob(callback, mimeType, qualityArgument)
可以在回调里面写入我们的上传的代码。
目前来说这个东西，只是chrome ^50 ，firefox ^19, IE ^10
你要考虑兼容的话，那就没有办法使用这个东西了。事物是向前发展的， canvas会面的使用一定成为主流。长痛不如短痛。
赶紧试试吧。很方便。
标签：this size append 恢复 -- 图片 call fill 没有
原文地址：http://www.cnblogs.com/jlzt/p/5992464.html
