专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

html5 canvas 前端生成缩略图

更新
2015/03/02: 解决了Chrome/IE11下面的图片空白问题;

  • 优先用二进制代替base64, 提升性能;
  • before/always 参数, 针对很大的图(>=20M), 缩图时间较长时, 可以设置loading提示. 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的插件, 主要参数:

width: 生成缩略图的宽; height: 生成缩略图的高;
fill: 图片小于缩略图尺寸时, 是否填充(false: 缩略图宽高自动缩放到适应图片, true: 缩略图尺寸不变)
background:生成图片填充背景(默认#fff, 设置null时, 背景透明)
type: 生成图片类型 ('image/jpeg' 或 'image/png')
size: 生成缩略图方式, 生成缩略图的效果主要参考了CSS3的background-size属性:
  contain: 等比缩放并拉伸, 图片全部显示;
  cover: 等比缩放并拉伸, 图片把容器完全覆盖;
  auto: 图片不拉伸, 居中显示.
mark: 水印
  文字水印: mark = {padding: 5, height: 18, text: 'test', color: '#000', font: '400 18px Arial'}
  图片水印: mark = {padding: 5, src: 'mark.png', width: 34, height: 45};
stretch: 小图是否强制拉伸以适应缩略图的尺寸(size = auto/contain时)
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, 一个用来读取本地图片, 一个用来生成缩略图.

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

/ 分类: 开发,实践 / TrackBackhttps://xhl.me/archives/create-thumbnail-images-html5/trackback标签: mobile web

已有 41 条评论 »

  1. xuxiaodong xuxiaodong

    楼主太感谢了,我原本做了一个,可是在手机上拍照后,图片被压扁(ios7),一直找不到原因,谢谢楼主的代码

  2. nullSir nullSir

    赞一个.

  3. summer summer

    好东西啊,昨天折腾了一天了,没想到楼主已经做出来了。

  4. erico erico

    你好,请问我base64位后面多了,_loginbg.png 这部分是哪里多出来的.

    1. kairyou kairyou

      你好,这名称是你要上传的文件名?源码肯定是没这个的,不知道你是什么设备,是否可以自行debug下?

  5. 慢行中 慢行中

    能否实现多张图片处理并上传?

    1. kairyou kairyou

      Hi 可以的, 不过要后面改进了, 目前为止也收到了一些建议/反馈, 希望后面能抽一些时间来改进下. 目前的是最简单的使用例子了, 通用性还是不强.

  6. hwadzan hwadzan

    你好,感谢开发这么好的插件,有个问题请教一下,我在ios 8上的safari中测试没有问题,但是android的内置浏览器上传图片预览就是空白的。请问是什么原因呢

    1. kairyou kairyou

      你好, 内置浏览器的user-agent是什么?Android版本太多, 以前开发时就发现sumsang的内置浏览器有bug. 你如果能根据源码debug下, 把问题找出来就好了, 我担心没有你同样的环境.

  7. zcx zcx

    上传图片预览图是白色的怎么解决得的呀

    1. kairyou kairyou

      Hi,没遇到过这种情况,请看系统版本/浏览器版本/图片是不是特殊的导致.

添加新评论 »