圖片裁剪功能學(xué)習(xí)小結(jié)

近期有需要使用圖片裁剪的功能，在使用插件和自己寫(xiě)裁剪組件之間猶豫了很久，后來(lái)根據(jù)需求經(jīng)過(guò)反復(fù)的考慮，還是自己封裝吧，畢竟自己動(dòng)手，豐衣足食，對(duì)吧？嗯，??????是的！最后生成裁剪后的圖片使用了 html2canvas插件，實(shí)現(xiàn)了圖片的裁剪功能。但是，發(fā)現(xiàn)需求之中竟然有裁剪GIF的需求，然而我的裁剪組件并不能滿足這個(gè)需求，還存在圖片清晰度的問(wèn)題。為了實(shí)現(xiàn)這個(gè)需求，在后端使用 node 插件進(jìn)行截圖，但是并沒(méi)有找個(gè)一個(gè)滿足需求的插件，最后決定使用七牛云的圖片高級(jí)處理服務(wù)。在實(shí)現(xiàn)該功能的過(guò)程中，對(duì)一些插件進(jìn)行了總結(jié)，方便記憶，有什么不正確的地方，希望大家多多指教！

一、插件展示

二、前端裁剪插件

1. html2canvas

html2canvas 能夠直接在瀏覽器端將整個(gè)頁(yè)面或者部分頁(yè)面生成截圖，將DOM結(jié)構(gòu)渲染成canvas畫(huà)布。

• 使用方法：http://html2canvas.hertzen.co...
• 部分代碼：

• 遇到的問(wèn)題：

• 原因：圖片跨域問(wèn)題，盡管不通過(guò) CORS 就可以在畫(huà)布中使用圖片，但是這會(huì)污染畫(huà)布。一旦畫(huà)布被污染，你就無(wú)法讀取其數(shù)據(jù)。例如，你不能再使用畫(huà)布的 toBlob(), toDataURL() 或 getImageData() 方法，調(diào)用它們會(huì)拋出安全錯(cuò)誤。

• 解決辦法：

  html2canvas的配置項(xiàng)中配置 allowTaint:true 或 useCORS:true(二者不可共同使用); 使用反向代理或者服務(wù)器添加響應(yīng)頭 header("Access-Control-Allow-Origin: *")

2. jQuery Jcrop 圖像裁剪

Jcrop 是一個(gè)功能強(qiáng)大的 jQuery 圖像裁剪插件，結(jié)合后端程序可以快速的實(shí)現(xiàn)圖片裁剪的功能。（沒(méi)有使用過(guò)...）

• 使用方法：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')}

• 優(yōu)缺點(diǎn)
  可以裁剪GIF圖，但是使用rise函數(shù)縮放之后，GIF圖會(huì)失真。裁剪的圖片和原圖的大小一樣，選中的區(qū)域被裁剪，但是其他地方是透明的。
• 效果圖
  左圖為縮放之后裁剪的圖片，右圖為原圖
  

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}`}})});

• 優(yōu)缺點(diǎn)
  sharp只可以裁剪GIF的第一幀，但是使用比較方便

參考文獻(xiàn)
http://shieldax.github.io/201... sharp裁剪

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。