图片可以让页面更有吸引力, 尤其是处理的恰当的时候, 但问题是, 图片的处理是个麻烦事情, 它的创建和裁剪对于一个普通人来说是个困难的任务, 尤其是那些自己上传图片的用户, 比如头像图片, logo 图片, 有可能是各式各样的图片格式, 大小不一的图片尺寸.
最近发现了一个有趣的浏览器端智能处理图片的 JavaScript 脚本, https://github.com/jwagner/smartcrop.js/ , 它能智能的分析图片的内容, 识别出图片的主体内容和人像, 人脸, 我可以用它轻松的将一个图片裁剪成合适大小, 让人物, 人脸或图景主体等最重要的部分突出, 裁剪掉多余的部分.
观看演示
下面是一个样本, 使用了两张 Lady GaGa 的照片, 经过使用 https://github.com/jwagner/smartcrop.js/ 处理后, 使得两张图片非常适合做头像照片, 图片中的头像放到了正中.
观看演示
这个 JS 工具脚本的调用方法十分的简单, 只需要几行代码就能生效.
- SmartCrop.crop(image, {
- width: 100, height: 100
- }, function(result){
- console.log(result);
- });
- // {
- topCrop: {
- x: 300, y: 200, height: 200, width: 200
- }
- }
详细的介绍请查看它的官方文档, 也可以下载它的源代码理解它的工作原理.
来源: http://www.webhek.com/post/javascript-image-smartcrop.html