共计 1813 个字符，预计需要花费 5 分钟才能阅读完成。
图片裁剪功能学习小结
近期有需要使用图片裁剪的功能，在使用插件和自己写裁剪组件之间犹豫了很久，后来根据需求经过反复的考虑，还是自己封装吧，毕竟自己动手，丰衣足食，对吧？嗯，???????????????????????? 是的！最后生成裁剪后的图片使用了 html2canvas 插件，实现了图片的裁剪功能。但是，发现需求之中竟然有裁剪 GIF 的需求，然而我的裁剪组件并不能满足这个需求，还存在图片清晰度的问题。为了实现这个需求，在后端使用 node 插件进行截图，但是并没有找个一个满足需求的插件，最后决定使用七牛云的图片高级处理服务。在实现该功能的过程中，对一些插件进行了总结，方便记忆，有什么不正确的地方，希望大家多多指教！
一、插件展示
二、前端裁剪插件
1. html2canvas
html2canvas 能够直接在浏览器端将整个页面或者部分页面生成截图，将 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 裁剪
