【HTML5】基于客户端的图片裁剪及水印添加功能


首先来说说图片裁剪这件事情。

图片裁剪其实不是什么很难的功能,PS、截图都能轻松做到。或者说,在web端,Flash以及后端程序都有图片裁剪的能力。当然也有水印添加的能力,以PHP(求不黑)为例使用GD库所带的一些函数就可以轻松做到图片裁剪。那么大致流程是酱紫的:
既然目前已经有两种方式了,为毛还要再用Canvas来裁剪及添加水印?不妨来对比一下:

服务器端裁剪:

1.兼容性赞赞的,完全没有兼容问题。

2.简单方便好理解,不牵扯跨域balabala的

-1.多了两次请求(处女座)

-2.需要前后端去密切配合

客户端裁剪:

客户端裁剪分成Flash方案和HTML Canvas方案

共同点:

1.纯客户端操作,不需要往后端发送请求。

2.不需要学习一些后端库操作的知识(纯前端可能比后端可能还复杂)

-1.需要浏览器的支持,或者是Flash,或者是HTML5

-2.存在兼容性问题以及跨域等问题

Flash方案你又得懂些flash方面的技术,也有用Flash做crop UI但实际上发送到后端让后端处理的。

那么H5的方案首先你的目标人群得用 Modem browser ,如果你用户都是IE你还是呵呵睡吧。

来说说我的方案,用户上传图片后使用jCrop作为图片裁剪UI,裁剪完毕后计算大小、位置信息然后传递给Canvas并生成图片。说这么多都没见到代码真的很伤心哇!

h5crop => https://github.com/geekpark/h5crop

以上插件只实现了客户端的图片裁剪,其实还有两个问题没有提到。

1.裁剪完毕后的canvas可以导出成Base64的图片编码,那么如果是File Object形式的服务端上传应该怎么解决?
2.加水印在哪里?

对于问题1,简单粗暴的扔一个插件就懂了。

Canvas to Blob => https://github.com/blueimp/JavaScriptCanvas-to-Blob
用于将canvas转换成二进制文件,也就是js中的File Object然后post给服务器就ok
这里面有个坑,项目在本地测试完全没问题结果服务器上报错。原因是因为图片涉及跨域,解决办法是给canvas用到的img标签设置 .prop('crossOrigin', 'Anonymous’) 为毛是prop不是attr ? Google it .

问题2,图片加水印在哪里?

真的很不想总结啊,还是放个Gist自己看吧。

https://gist.github.com/liyaodong/c1cdb208a533c26b926c

好困好困,洗洗睡(个人总结,求轻喷)