圖片裁剪功能學習小結

圖片裁剪功能學習小結

近期有須要使用圖片裁剪的功能，在使用插件和本身寫裁剪組件之間猶豫了好久，後來根據需求通過反覆的考慮，仍是本身封裝吧，畢竟本身動手，豐衣足食，對吧？嗯，💪🏻💪🏻💪🏻是的！最後生成裁剪後的圖片使用了 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裁剪