html5 canvas
前端生成缩略图

更新: 
2013/08/01: 解决了后面遇到的bug: 图片被压扁(IOS6);
图片被旋转; 
整个源码放在:
https://github.com/kairyou/html5-make-thumb 
新方案需要后面实现的,
就是下面的旧版本里的功能(水印/是否强制拉伸以适应目标尺寸等功能).

w3ctech长沙站交流会, 里面分享的PPT:
http://www.slideshare.net/99leon/html5-create-thumbnail

之前有bug的版本放在分支old里(不推荐使用),
请使用更新的方案~

2013/01/07:
11年做的公司的移动页面,
上传图片时缩略图是靠后端生成, 但是随着现在的手机越来越牛X(摄像头比数码相机还厉害~), 图片体积也越来越大.
一个几M的图,
也许我们只是用来生成一个100*100的小图, 上传到后端再生成缩略图就大大的浪费了, 而且提交表单的等待时间也非长久,
对用户体验也不好.
普通的web表单, 上传图片靠后端来生成缩略图很平常,
但有了HTML5, 针对移动Web开发可以考虑使用前端生成缩略图了.

写了个生成缩略图的jquery的插件, 主要参数:

1. width:生成缩略图的宽; height:生成缩略图的高;


2. fill:图片小于缩略图尺寸时,是否填充(false:缩略图宽高自动缩放到适应图片,true:缩略图尺寸不变)


3. background:生成图片填充背景(默认#fff,
   设置null时, 背景透明)


4. type:生成图片类型(‘image/jpeg‘或‘image/png‘)


5. size:生成缩略图方式,生成缩略图的效果主要参考了CSS3的background-size属性:


6. contain:等比缩放并拉伸,图片全部显示;


7. cover:等比缩放并拉伸,图片把容器完全覆盖;


8. auto:图片不拉伸,居中显示.


9. mark:水印


10. 文字水印: mark ={padding:5,
    height:18, text:‘test‘,
    color:‘#000‘, font:‘400 18px Arial‘}


11. 图片水印: mark ={padding:5,
    src:‘mark.png‘, width:34, height:45};


12. stretch:小图是否强制拉伸以适应缩略图的尺寸(size =auto/contain时)


13. success:生成缩略图后 callback

大体思路如下:
首先判断是否支持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, 一个用来读取本地图片, 一个用来生成缩略图.

做移动网页开发的同学可以考虑下.

转自：http://www.fantxi.com/blog/archives/create-thumbnail-images-html5/

html5 canvas 前端生成缩略图,布布扣,bubuko.com