base64图片存储超过2M的解决方案
2018-02-26 15:10
435 查看
toDataURL():我们要获取
canvas中图片的信息,用
toDataURL就可以转换成上面用到的
DataURL
// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了,所以用img.split获得逗号后面的字符串
在javascript中如何使用Base64转码var str = 'javascript';
window.btoa(str)
//转码为base64二进制结果 "amF2YXNjcmlwdA=="
window.atob("amF2YXNjcmlwdA==")
//解码base64二进制结果 "javascript"
XMLHttpRequest Level 2添加了一个新的接口
FormData.利用
FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的
send()方法来异步的提交这个"表单".比起普通的ajax,使用
FormData的最大优点就是我们可以异步上传一个二进制文件
HTML5 本地裁剪图片并上传至服务器(老梗)
html5
时允 2014年11月03日发布赞 | 21收藏 | 225
80.7k 次浏览
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的。但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 5 步。步骤繁琐不说,当很多用户上传图片的时候也很影响服务器性能。HTML5 的出现让我们可以更方便的实现这一需求。虽然这里所说的技术都貌似有点过时了(前端界的“过时”,你懂的),但还是有些许参考价值。在这里我只说一下要点,具体实现同学们慢慢研究。下面奉上我自己写的一个demo,在输入框中选好自己服务器 url, 生成好图片后点击 Submit 上传,然后自己去服务器里看看效果吧~~浏览器要求支持以下 Feature:File API
Blob
atob
canvas
代码直接从现有项目移植过来,没有经过“太多的”测试,写的很乱,也没注释,大家就慢慢看吧。。。重点就在 js 脚本的 28 行,
clipImage函数中,同学们可以直接跳过去看。http://jsfiddle.net/windwhinny/d5qan0q7/点击预览
第一步:获取文件
HTML5 支持从input[type=file]元素中直接获取文件信息,也可以读取文件内容。我们用下面代码就可以实现:
$('input[type=file]').change(function(){ var file=this.files[0]; // continue ... });
第二部:读取文件,并生成 Image
元素
这一步就需要用到 FileReader了,这个类是专门用来读取本地文件的。纯文本或者二进制都可以读取,但是本地文件必须是经过用户允许才能读取,也就是说用户要在
input[type=file]中选择了这个文件,你才能读取到它。通过
FileReader我们可以将图片文件转化成
DataURL,就是以
data:image/png;base64,开头的一种URL,然后可以直接放在
image.src里,这样本地图片就显示出来了。
$('input[type=file]').change(function(){ var file=this.files[0]; var reader=new FileReader(); reader.onload=function(){ // 通过 reader.result 来访问生成的 DataURL var url=reader.result; setImageURL(url); }; reader.readAsDataURL(file); }); var image=new Image(); function setImageURL(url){ image.src=url; }
Image就是在
html里的
<img>标签,所以可以直接插入到文档流里。
第三步:获取裁剪坐标
这一步没啥好说的,实现的方法也很多,需要获得下面四个裁剪框的坐标:Y坐标X坐标
高度
宽度
如下图所示:
第四部:裁剪图片
这是时候我们就需要用到canvas了,
canvas和图片一样,所以新建
canvas时就要确定其高宽。这里我们还运用到
image.naturalHeight和
image.naturalWidth这两个属性来获取图片原始尺寸。将图片放置入
canvas时需要调用
drawImage,这个接口参数比较多,在 MDN 上有详细的说明。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
因为我们用
canvas只是用于裁剪图片的,所以需要新建一个
canvas让它的尺寸和裁剪之后图片的尺寸相等,此时
canvas就相当与我们的裁剪框。运用这个函数还可以将大图缩放成小图,同学们自己研究吧。
// 以下四个参数由第三步获得 var x, y, width, height; var canvas=$('<canvas width="'+width+'" height="'+height+'"></canvas>')[0], ctx=canvas.getContext('2d'); ctx.drawImage(image,x,y,width,height,0,0,width,height); $(document.body).append(canvas);将
canvas加入文档流之后,就可以看到裁剪后的效果了。不过我们还需要将图片上传至服务器里。
第五步:读取裁剪后的图片并上传
这时我们要获取canvas中图片的信息,用
toDataURL就可以转换成上面用到的
DataURL。 然后取出其中 base64 信息,再用
window.atob转换成由二进制字符串。但
window.atob转换后的结果仍然是字符串,直接给
Blob还是会出错。所以又要用
Uint8Array转换一下。总之这里挺麻烦的。。
var data=canvas.toDataURL(); // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了 data=data.split(',')[1]; data=window.atob(data); var ia = new Uint8Array(data.length); for (var i = 0; i < data.length; i++) { ia[i] = data.charCodeAt(i); }; // canvas.toDataURL 返回的默认格式就是 image/png var blob=new Blob([ia], {type:"image/png"});这时候裁剪后的文件就储存在
blob里了,我们可以把它当作是普通文件一样,加入到
FormData里,并上传至服务器了。
FormData顾名思义,就是用来创建表单数据的,用
append以键值的形式将数据加入进去即可。但他最大的特点就是可以手工添加文件或者
Blob类型的数据,
Blob数据也会被当作文件来处理。原生 js 可以直接传递给
xhr.send(fd), jquery 可以放入
data里请求。
var fd=new FormData(); fd.append('file',blob); $.ajax({ url:"your.server.com", type:"POST", data:fd, success:function(){} });然后你服务器里应该就可以收到这个文件了~https://segmentfault.com/a/1190000000754560
相关文章推荐
- [转]关于CLOB存储Base64图片编码,直接在前台显示解决方案
- Base64--在XML中存储图片的解决方案
- Base64--在XML中存储图片的解决方案
- base64图片存储
- Flex 3中如何显示被存储为Base64编码字符串的图片的例子
- base64图片存储
- ScienceWord控件问题以及IE8对于base64编码图片长度限制的解决方案
- 揭秘淘宝286亿海量图片存储与处理架构,海量小文件存储的解决方案
- 运用ORACLE的OO4O类库函数解决调用存储过程向远程数据库上传超过32K图片失败的问题
- Asp读取xml存储的图片Base64编码,还原成图片
- Img图片超过了DIV的最大宽度 解决方案
- [置顶] 压缩图片并根据图片md5 存储的一种优化解决方案
- Nodejs把接收图片base64格式保存为文件存储到服务器上
- 用JDOM+Base64编码存储和读取图片进XML
- golang 图片处理,剪切,base64数据转换,文件存储
- 实现文件上传不超过2m的图片
- 解决Picasso占用内存,使用Picasso在加载超过2M左右的图片时完全不能显示图片问题(不同的手机可能不同)
- java实现将图片读取成base64字符串,将base64字符串存储为图片。
- MongoDB GridFS图片文件存储解决方案
- 系统中图片存储的解决方案——将图片放在服务器上,将其路径存入数据库