---恢复内容开始---

对于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的更多相关文章

  1. base64格式的图片上传阿里云

    base64格式的图片上传阿里云 上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...

  2. 上传base64格式的图片到服务器

    上传base64格式的图片到服务器 /**bash64上传图片 * @param $base64 图片的base64数据 * @param $path 保存路径 */ function base64_ ...

  3. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  4. js 图片压缩上传(base64位)以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  5. PHP使用七牛云存储之图片的上传、下载、303重定向教程,CI框架实例

    网上关于七牛云存储的教程除了官网上的API文档,其他的资料太少了.研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向. http://blog.csdn.net/cqcre/arti ...

  6. 图片剪裁上传插件 - cropper

    图片剪裁上传插件 - cropper <style> .photo-container{float: left;width: 300px;height: 300px;} .photo-co ...

  7. HTML5 本地裁剪图片并上传至服务器(转)

    很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...

  8. 深入研究HTML5实现图片压缩上传

    上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起.虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢 ...

  9. 使用canvas压缩图片 并上传

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. C# DateTime.ToString的坑

    当需要将时间类型转换为字符串类型时,一般直接使用datetime.ToString()方法即可 1.直接使用ToString(),不带任何参数,代码如下 static void Main(string ...

  2. SQL语句优化实践

    减少查询的影响结果集,避免出现全表扫描. 影响结果集是SQL优化的核心.影响结果集不是查询返回的记录数,而是查询所扫描的结果数.通过Explain或Desc分析SQL,rows列的值即为影响结果集(还 ...

  3. gulp 学习笔记 (初识)

    根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...

  4. SimpleChannelInboundHandler和ChannelInboundHandlerAdapter区别

    一般用netty来发送和接收数据都会继承SimpleChannelInboundHandler和ChannelInboundHandlerAdapter这两个抽象类,那么这两个到底有什么区别呢? 其实 ...

  5. Loadrunner不能调用IE解决方法大全

    在使用loadrunner进行性能调试时,录制脚本的时候,发现loadrunner不能调用IE.不能自动启动IE,还有一种情况是可以启动,但是录制不到内容,action的内容为空. 一般遇到这种情况, ...

  6. 完整的 mime type 列表

    原文地址:http://blog.csdn.net/zhaoyw2008/article/details/46647723 Suffixes applicable Media type and sub ...

  7. 【C#】项目优化实战

    [C#]项目优化实战 一. 数据库设计 1. 常量的枚举值直接存中文不要存数字(注意是常量,如果显示值可变就不能) 例如:男女,在数据库中不要存1和0,直接存男和女. 这样的好处:读取数据的时候可以避 ...

  8. Debug模式,不能进入打断点的类,反而进入代理类里

    有史以来,第一次,遇到这个问题, 设置好断点,Debug模式开启项目,,没有进入原来打好的断点类,反而,进入的是和断点类相同名字(但是图标不同)的一个类里, 不能真正的调试,调试变得很麻烦, 解决方案 ...

  9. OpenLDAP双主

    1:主A服务器           然后重新生成配置文件数据       主B服务器             注意:两个主服务器的rid必须得一样   在做主从的时候,必须得安装必要的软件包,comp ...

  10. C# 从字符串中取出英文字母

    string fid = context.Request["value2"];//fid=FCT1234 Regex re = new Regex(@"[a-zA-Z]+ ...