公司的移动页面, 上传图片时缩略图是靠后端生成, 但是随着现在的手机越来越牛X(摄像头比数码相机还厉害~), 图片体积也越来越大. 一个几M的图, 也许我们只是用来生成一个100*100的小图, 上传到后端再生成缩略图就大大的浪费了, 而且提交表单的等待时间也非长久, 对用户体验也不好. 普通的web表单, 上传图片靠后端来生成缩略图很平常, 但有了HTML5, 针对移动Web开发可以考虑使用前端生成缩略图了. 写了个生成缩略图的jquery的插件, 主要参数: width: 生成缩略图的宽; height: 生成缩略图的高; 大体思路如下: 首先判断是否支持fileReader(支持fileReader, canvas就不在话下了) 不支持的话: 不做任何操作, 默认的input type="file"上传, 靠后端生成缩略图. 支持的情况: input change时, 判断选择的文件是图片, 就创建一个隐藏的canvas, 并把图片画到canvas里, 因为要生成缩略图, 所以在canvas里画图的时候, 控制剪切坐标和被剪切的宽高就OK了. 另外可以加上水印, 图片水印或者文字水印加到canvas上面也是比较方便的. 最后 canvas.toDataURL 转成base64, post到后端(先把input type="file"移除, 再生成个新的input type="hidden"储存图片数据), 后端接收后直接保存为图片就OK了. 主要用到: FileReader和canvas, 一个用来读取本地图片, 一个用来生成缩略图. 做移动网页开发的同学可以考虑下. |