微信在线相册制作 - 图片篇
最近做了个微信上的在线相册的玩意,设计到了无数的坑,就此扯两句...
图片选择
图片选择涉及到单选多选的问题,file标签的新属性multiple,贴上该属性的文档描述点这里.
PC上浏览器支持除了IE基本没啥问题,但是到移动端,貌似Android上还没有支持,无用武之地啊.
还有个问题就是这个属性只能标志单选、多选,不能限制选择数量,也是个问题.
图片上传
图片上传主要就是将图片的file对象使用ajax发送到后台,不过会有一个问题,图片上传一般比较慢,所以肯定会同时上传多张图片,而浏览器本身存在同域名下的并发连接数限制的问题,一般是 6~10,此时如果有其他请求就会引起阻塞,所以这时需要对图片上传做点处理, 比如一个请求上传多张图片、代码中做限制,将同时上传的图片数设置为较小值、或者将图片服务器域名换成几个等.
图片预览
选择图片后基本都需要在本地预览选中的图片,这时就要用到FileReader了,主要使用到的是FileReader的readAsDataURL方法将图片选择的File对象读取为base64URLFileReader 文档,然后可以直接将起嵌入到图片的src标签当中就可以成功预览图片了,不过有个问题就是base64可能会比较长.
图片压缩
base64太长,就需要压缩图片了,而且移动端性能瓶颈的问题,图片还是压缩一下的好,压缩主要就是用到canvas来实现,使用canvas将base64塞进去渲染成对应大小的图片,然后使用canvas.toDataURL得到压缩后的base64.
可能某些需求会需要将压缩后的图片上传而不是原图片,可以直接将base64上传到后台,当然也可以使用BlobBuilder或者Blob将其转为Blob然后上传.
图片方向
拍摄时设备会将拍照时的方向存到图片的Exif中的Orientation里,而有时某些软件会忽视Orientation属性,这是就会出现图片方向不对的问题,此时需要做一些处理,比如将Orientation读取后图片旋转,然后在上传到服务器,或者服务器做处理,一般的图片处理工具都会处理好这部分功能.
canvasResize
canvasResize是一个简单的图片处理的库,里面封装了图片压缩、旋转等一些基本功能,还有将base64转为Blob等,依赖于Exif库 ,Exif库里封装了一些对图片Exif处理的方法,包括了上文的图片方向解决.
参考的 Blog 和文章有: