图片裁剪功能学习小结

图片裁剪功能学习小结

近期有须要使用图片裁剪的功能，在使用插件和本身写裁剪组件之间犹豫了好久，后来根据需求通过反复的考虑，仍是本身封装吧，毕竟本身动手，丰衣足食，对吧？嗯，💪🏻💪🏻💪🏻是的！最后生成裁剪后的图片使用了 html2canvas插件，实现了图片的裁剪功能。可是，发现需求之中居然有裁剪GIF的需求，然而个人裁剪组件并不能知足这个需求，还存在图片清晰度的问题。为了实现这个需求，在后端使用 node 插件进行截图，可是并无找个一个知足需求的插件，最后决定使用七牛云的图片高级处理服务。在实现该功能的过程当中，对一些插件进行了总结，方便记忆，有什么不正确的地方，但愿你们多多指教！

1、插件展现

2、前端裁剪插件

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/...

3、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裁剪