最近在做一個圖片裁剪的功能，然后現在來做個記錄

一般裁剪的原理分兩種，一是固定裁剪圖片的位置，移動裁剪框（多用于pc端）。二是固定裁剪框，移動裁剪的圖片（多用于移動端）

一、pc端圖片裁剪解決方案：cropper.js? ?---? ?裁剪圖片并上傳的插件。屬于固定圖片，移動裁剪框的類型。依賴于jquery插件

具體api可參照官網，中文翻譯課參考以下鏈接? ?https://blog.csdn.net/weixin_38023551/article/details/78792400? ?。

demo下載：鏈接：https://pan.baidu.com/s/1vUDD36jVaCHtnbqealq5eA 密碼：tja2

使用感受：該插件基本能滿足裁剪功能，裁剪的圖片，和裁剪的區域均可放大縮小，移動端也能用。但是整體來說更適合pc端

不足之處：

　　1、截圖只能截圖矩形，不能是圓角矩形或者圓形

　　2、進行裁剪的圖片只能放大縮小，不能上下左右拖動

?

二、移動端照片裁剪解決方案? ： jQuery-photoClip? ?----?

github地址：https://github.com/baijunjie/PhotoClip.js

?原理上是用canvas來實現的。所以在上傳圖片的時候，會對圖片做一些相應的壓縮（比如5M的圖片，輸出時是500k）。但是但你上傳的圖片過小時，輸出的圖片會比原來的圖片要大（比如上傳50k的圖片，輸出時是200k），這些都是正常現象

裁剪的時候類似于qq上傳頭像裁剪功能，裁剪框固定大小，調整圖片上下左右拖動，或放大放小進行裁剪

var clipArea = new PhotoClip("#clipArea", {size: [300, 300], //裁剪框大小outputSize: [0, 0], //打開圖片大小，[0,0]表示原圖大小file: "#file",view: "#view", //裁剪預覽圖片id（需要的自行添加）ok: "#clipBtn",loadStart: function() { //圖片開始加載的回調函數。this 指向當前 PhotoClip 的實例對象，并將正在加載的 file 對象作為參數傳入。（如果是使用非 file 的方式加載圖片，則該參數為圖片的 url） },loadComplete: function() { //圖片加載完成的回調函數。this 指向當前 PhotoClip 的實例對象，并將圖片的 <img> 對象作為參數傳入。},done: function(dataURL) { //裁剪完成的回調函數。this 指向當前 PhotoClip 的實例對象，會將裁剪出的圖像數據DataURL作為參數傳入。 console.log(dataURL); //dataURL裁剪后圖片地址base64格式提交給后臺處理} });

　　

?

轉載于:https://www.cnblogs.com/qqing/p/8857986.html

總結

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

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