图片裁剪功能学习小结近期有需要使用图片裁剪的功能,在使用插件和自己写裁剪组件之间犹豫了很久,后来根据需求经过反复的考虑,还是自己封装吧,毕竟自己动手,丰衣足食,对吧?嗯,????????????????????????是的!最后生成裁剪后的图片使用了 html2canvas插件,实现了图片的裁剪功能。但是,发现需求之中竟然有裁剪GIF的需求,然而我的裁剪组件并不能满足这个需求,还存在图片清晰度的问题。为了实现这个需求,在后端使用 node 插件进行截图,但是并没有找个一个满足需求的插件,最后决定使用七牛云的图片高级处理服务。在实现该功能的过程中,对一些插件进行了总结,方便记忆,有什么不正确的地方,希望大家多多指教!一、插件展示二、前端裁剪插件1. html2canvashtml2canvas 能够直接在浏览器端将整个页面或者部分页面生成截图,将DOM结构渲染成canvas画布。使用方法:http://html2canvas.hertzen.co…部分代码:遇到的问题:原因:图片跨域问题,尽管不通过 CORS 就可以在画布中使用图片,但是这会污染画布。一旦画布被污染,你就无法读取其数据。例如,你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法,调用它们会抛出安全错误。解决办法:html2canvas的配置项中配置 allowTaint:true 或 useCORS:true(二者不可共同使用);使用反向代理或者服务器添加响应头 header(“Access-Control-Allow-Origin: *")2. jQuery Jcrop 图像裁剪Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序可以快速的实现图片裁剪的功能。(没有使用过…)使用方法:http://code.ciaoca.com/jquery…3. vue-cropper 基于vue的裁剪组件使用方法:http://xyxiao.cn/vue-cropper/…三、node 裁剪插件1. gm第一次首先要安装 GraphicsMagick或者ImageMagick,Mac OS X可以使用brew安装。使用方法: 安装: brew install imagemagick brew install graphicsmagick npm install –save gm 引入: var fs = require(‘fs’) var gm = require(‘gm’).subClass({imageMagick: true})部分代码 gm(./upload/${req.body.name}) .resize(‘300’, ‘468’, ‘^’) .gravity(‘Center’) .crop(‘200’, ‘400’) .write(./upload/${cropName}, function (e) {// 输出的图片路径 if(e) { console.log(e.message) }else { res.send({ stat: 1, data: { mesg: ‘OK’, url: http://${req.headers.host}/upload/${cropName} } }) console.log(‘done’) }优缺点可以裁剪GIF图,但是使用rise函数缩放之后,GIF图会失真。裁剪的图片和原图的大小一样,选中的区域被裁剪,但是其他地方是透明的。效果图左图为缩放之后裁剪的图片,右图为原图3. sharp使用方法 安装 npm install –save sharp 引入: var sharp = require(‘sharp’)部分代码 sharp(‘图片路径’) .extract(top, left, width, height) .resize(150, 150) .sharpen() .quality(100) .toFile(‘裁剪之后保存的路径’, function (err) { if (err) throw err; console.log(‘done!’) res.send({ stat: 1, data: { mesg: ‘OK’, url: http://${req.headers.host}/upload/${cropName} } }) });优缺点sharp只可以裁剪GIF的第一帧,但是使用比较方便参考文献http://shieldax.github.io/201… sharp裁剪