cropper.js裁剪圖片的使用
阿新 • • 發佈：2018-08-24
wid https title 圖片比例 屬性 級別 art col ctr
這兩天難得有時間可以整理一下最近學習的東西，這兩天項目中用到了頭像上傳裁剪的功能，這裏只介紹頭像的裁剪吧。
單獨實現圖片剪裁的功能還是挺容易的，入門級別的。看一遍官方給的文檔，基本上就明白了。大家如果不想看英文版的官網介紹，可以看這篇博客，講的特別好。
官網地址：http://fengyuanchen.github.io/cropper/
附上網址：https://blog.csdn.net/weixin_38023551/article/details/78792400
這篇文章講的很好。
我先說一下自己的需求：就是想要實現圖片裁剪的功能，並且要有預覽區域，獲得裁剪後的圖片後點擊確認後上傳。
預覽的頁面結構、樣式要自己設置，為了頁面美觀，可以根據裁剪框的比例來設置，根據aspectRatio這個屬性，如果不設置這個屬性的話，那這個屬性的值就是NAN。一般還是根據需求頁面需要的圖片比例來設置，這樣上傳到服務器上的圖片就是需求要求的圖片了。
具體的選項介紹可以看這篇博客，我就貼一下代碼吧。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> <link rel="stylesheet" href="../css/cropper.css"/> <title>cropper 裁剪圖片並上傳demo</title> <style> .container { width: 70%; float: left; } .img { width: 50%; } .preview-box { width: 320px; height: 180px; overflow: hidden; float: right; margin-right: 20px; } </style> </head> <body> <div class="container" id="container"> <img src="../image/demo_img.jpg" alt="" class="img" id="demoImg"/> <!--真實項目中的路徑需要動態獲取用戶選中圖片的路徑，可以采用base64編碼的形式--> </div> <div class="preview-box"></div><!--預覽框的容器--> <script src="../js/jquery-2.1.3.min.js"></script> <script src="../js/cropper.js"></script> <script> $(‘#demoImg‘).cropper({ aspectRatio: 16 / 9,//裁剪框比例 viewMode: 0,//視圖模式 dragMode: ‘move‘,//裁剪框的模式 minCanvasWidth: 300,//canvas的最小寬度，如果不設置的話，值是0 minCanvasHeight: 300, minCropBoxWidth: 400,//裁剪層的最小寬度，值為0 minCropBoxHeight: 400, preview: ‘.preview-box‘ }) </script> </body> </html>
附上效果圖
右側是預覽區域，左側是裁剪區域
cropper.js裁剪圖片的使用