圖片裁剪功能學習小結

近期有需要使用圖片裁剪的功能，在使用插件和自己寫裁剪組件之間猶豫了很久，后來根據需求經過反復的考慮，還是自己封裝吧，畢竟自己動手，豐衣足食，對吧？嗯，??????是的！最后生成裁剪后的圖片使用了 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 imagemagickbrew install graphicsmagicknpm 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裁剪

總結

以上是生活随笔為你收集整理的图片裁剪功能学习小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。