最近做了个微信上的在线相册的玩意,设计到了无数的坑,就此扯两句…

图片选择

图片选择涉及到单选多选的问题,file标签的新属性multiple,贴上该属性的文档描述点这里.

PC上浏览器支持除了IE基本没啥问题,但是到移动端,貌似Android上还没有支持,无用武之地啊.

还有个问题就是这个属性只能标志单选、多选,不能限制选择数量,也是个问题.

图片上传

图片上传主要就是将图片的file对象使用ajax发送到后台,不过会有一个问题,图片上传一般比较慢,所以肯定会同时上传多张图片,而浏览器本身存在同域名下的并发连接数限制的问题,一般是6~10,此时如果有其他请求就会引起阻塞,所以这时需要对图片上传做点处理,比如一个请求上传多张图片、代码中做限制,将同时上传的图片数设置为较小值、或者将图片服务器域名换成几个等.

图片预览

选择图片后基本都需要在本地预览选中的图片,这时就要用到FileReader了,主要使用到的是FileReaderreadAsDataURL方法将图片选择的File对象读取为base64URLFileReader文档,然后可以直接将起嵌入到图片的src标签当中就可以成功预览图片了,不过有个问题就是base64可能会比较长.

图片压缩

base64太长,就需要压缩图片了,而且移动端性能瓶颈的问题,图片还是压缩一下的好,压缩主要就是用到canvas来实现,使用canvasbase64塞进去渲染成对应大小的图片,然后使用canvas.toDataURL得到压缩后的base64.

可能某些需求会需要将压缩后的图片上传而不是原图片,可以直接将base64上传到后台,当然也可以使用BlobBuilder或者Blob将其转为Blob然后上传.

图片方向

拍摄时设备会将拍照时的方向存到图片的Exif中的Orientation里,而有时某些软件会忽视Orientation属性,这是就会出现图片方向不对的问题,此时需要做一些处理,比如将Orientation读取后图片旋转,然后在上传到服务器,或者服务器做处理,一般的图片处理工具都会处理好这部分功能.

canvasResize

canvasResize是一个简单的图片处理的库,里面封装了图片压缩、旋转等一些基本功能,还有将base64转为Blob等,依赖于Exif库,Exif库里封装了一些对图片Exif处理的方法,包括了上文的图片方向解决.

参考的Blog和文章有: