<link rel="stylesheet"  rel="external nofollow"  rel="external nofollow" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>

頁面結構

接下來，我們需要創(chuàng)建HTML結構。我們需要一個<img>元素來顯示待裁剪的圖片，并且需要一個按鈕來觸發(fā)裁剪操作。最后，我們需要另一個<img>元素來展示裁剪后的結果：

<body>
  <div>
    <img src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg" id="image">
  </div>
  <button onclick="split()"> 裁剪 </button>
  <div>
    <img id="cropped-result">
  </div>
</body>

添加樣式

我們需要設置一些樣式來調(diào)整圖片的顯示方式以及裁剪框的形狀。在本例中，我們希望裁剪框呈圓形?？梢酝ㄟ^CSS來實現(xiàn)：

<style>
  img {
    width: 800px; 
    height: 500px;
  }
  .cropper-view-box, .cropper-face {
    border-radius: 50%;
  }
  #cropped-result {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
  }
</style>

編寫JavaScript

接下來，我們需要編寫JavaScript代碼來初始化Cropper.js庫并處理裁剪操作。首先，我們需要獲取待裁剪的圖片元素，并為其設置一個Cropper實例。設置時，我們可以設置aspectRatio參數(shù)為1，以確保裁剪框是一個正方形：

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 1,
});

然后，我們需要編寫一個函數(shù)來處理裁剪操作。這個函數(shù)會在用戶點擊"裁剪"按鈕時被調(diào)用。在這個函數(shù)中，我們需要獲取裁剪后的圖像數(shù)據(jù)，并將其顯示在另一個<img>元素中。我們可以使用getCroppedCanvas()方法來獲取裁剪后的圖像數(shù)據(jù)，然后使用toDataURL()方法將其轉換為DataURL格式：

function split() {
  // 獲取裁剪結果（返回裁剪后的圖像數(shù)據(jù)）
  var croppedData = cropper.getCroppedCanvas().toDataURL('image/jpeg');
  // 將裁剪結果顯示在另一個元素中
  var resultElement = document.getElementById('cropped-result');
  resultElement.src = croppedData;
}

現(xiàn)在，您已經(jīng)實現(xiàn)了一個簡單的圓形頭像裁剪功能。用戶可以在頁面上選擇并裁剪圖片，然后查看裁剪后的結果。

總結

在本文中，我們介紹了如何使用Cropper.js庫實現(xiàn)一個簡易的圓形頭像裁剪功能。我們首先創(chuàng)建了頁面結構，并為其添加了一些樣式。然后，我們編寫了JavaScript代碼來初始化Cropper.js庫并處理裁剪操作。最后，我們展示了如何將裁剪后的圖像數(shù)據(jù)顯示在另一個<img>元素中。

全部代碼如下

<!DOCTYPE html>
<html>
<head>
  <title>圖片裁剪工具</title>
  <link rel="stylesheet"  rel="external nofollow"  rel="external nofollow" >
  <style>
    img {
      width: 800px; 
      height: 500px;
    }
    .cropper-view-box, .cropper-face {
      border-radius: 50%;
    }
    #cropped-result {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div>
    <img src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg" id="image">
  </div>
  <button onclick="split()"> 裁剪 </button>
  <div>
    <img id="cropped-result">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>
  <script>
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      aspectRatio: 1,
    });
    function split() {
      console.log(1);
      // 獲取裁剪結果（返回裁剪后的圖像數(shù)據(jù)）
      var croppedData = cropper.getCroppedCanvas().toDataURL('image/jpeg');
      // 將裁剪結果顯示在另一個元素中
      var resultElement = document.getElementById('cropped-result');
      resultElement.src = croppedData;
    }
  </script>
</body>
</html>

以上就是Cropper.js進階之實現(xiàn)圓形頭像裁剪功能示例的詳細內(nèi)容，更多關于Cropper.js圓形頭像裁剪的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: