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的更多相关文章
- base64格式的图片上传阿里云
base64格式的图片上传阿里云 上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...
- 上传base64格式的图片到服务器
上传base64格式的图片到服务器 /**bash64上传图片 * @param $base64 图片的base64数据 * @param $path 保存路径 */ function base64_ ...
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- js 图片压缩上传(base64位)以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
- PHP使用七牛云存储之图片的上传、下载、303重定向教程,CI框架实例
网上关于七牛云存储的教程除了官网上的API文档,其他的资料太少了.研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向. http://blog.csdn.net/cqcre/arti ...
- 图片剪裁上传插件 - cropper
图片剪裁上传插件 - cropper <style> .photo-container{float: left;width: 300px;height: 300px;} .photo-co ...
- HTML5 本地裁剪图片并上传至服务器(转)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- 深入研究HTML5实现图片压缩上传
上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起.虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢 ...
- 使用canvas压缩图片 并上传
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- C# DateTime.ToString的坑
当需要将时间类型转换为字符串类型时,一般直接使用datetime.ToString()方法即可 1.直接使用ToString(),不带任何参数,代码如下 static void Main(string ...
- SQL语句优化实践
减少查询的影响结果集,避免出现全表扫描. 影响结果集是SQL优化的核心.影响结果集不是查询返回的记录数,而是查询所扫描的结果数.通过Explain或Desc分析SQL,rows列的值即为影响结果集(还 ...
- gulp 学习笔记 (初识)
根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...
- SimpleChannelInboundHandler和ChannelInboundHandlerAdapter区别
一般用netty来发送和接收数据都会继承SimpleChannelInboundHandler和ChannelInboundHandlerAdapter这两个抽象类,那么这两个到底有什么区别呢? 其实 ...
- Loadrunner不能调用IE解决方法大全
在使用loadrunner进行性能调试时,录制脚本的时候,发现loadrunner不能调用IE.不能自动启动IE,还有一种情况是可以启动,但是录制不到内容,action的内容为空. 一般遇到这种情况, ...
- 完整的 mime type 列表
原文地址:http://blog.csdn.net/zhaoyw2008/article/details/46647723 Suffixes applicable Media type and sub ...
- 【C#】项目优化实战
[C#]项目优化实战 一. 数据库设计 1. 常量的枚举值直接存中文不要存数字(注意是常量,如果显示值可变就不能) 例如:男女,在数据库中不要存1和0,直接存男和女. 这样的好处:读取数据的时候可以避 ...
- Debug模式,不能进入打断点的类,反而进入代理类里
有史以来,第一次,遇到这个问题, 设置好断点,Debug模式开启项目,,没有进入原来打好的断点类,反而,进入的是和断点类相同名字(但是图标不同)的一个类里, 不能真正的调试,调试变得很麻烦, 解决方案 ...
- OpenLDAP双主
1:主A服务器 然后重新生成配置文件数据 主B服务器 注意:两个主服务器的rid必须得一样 在做主从的时候,必须得安装必要的软件包,comp ...
- C# 从字符串中取出英文字母
string fid = context.Request["value2"];//fid=FCT1234 Regex re = new Regex(@"[a-zA-Z]+ ...