base64格式的图片如何上传到oss

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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会面的使用一定成为主流。长痛不如短痛。
赶紧试试吧。很方便。

以上是关于base64格式的图片如何上传到oss的主要内容,如果未能解决你的问题,请参考以下文章

阿里云对象存储 OSS-base64 上传

php图片上传为啥要base64上传

ajax异步上传图片文件并将其转换为base64格式

Jmeter测试上传图片base64编码接口

Base64 格式图片上传至服务器

微信小程序如何将base64转成file格式