快捷導(dǎo)航

Cropper.js進(jìn)階之固定寬高圖片裁切實(shí)現(xiàn)示例

更新時(shí)間：2023年05月06日 15:00:29 作者：MerkleJqueryRu

這篇文章主要為大家介紹了Cropper.js進(jìn)階之固定寬高圖片裁切實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

在圖像處理中，圖片裁切是常見的需求。有時(shí)候，我們希望裁切后的圖片具有固定的寬高，而不是任意寬高比。Cropper.js 是一個(gè)強(qiáng)大的前端圖片裁剪庫(kù)，可以幫助我們輕松實(shí)現(xiàn)這個(gè)功能。在本教程中，我們將學(xué)習(xí)如何使用 Cropper.js 實(shí)現(xiàn)固定寬高的圖片裁切。

準(zhǔn)備工作

首先，我們需要在 HTML 文件中引入 Cropper.js 的 CSS 和 JS 文件。可以從 CDN 引入，如下所示：

<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>

頁(yè)面結(jié)構(gòu)

接下來(lái)，我們創(chuàng)建一個(gè)簡(jiǎn)單的 HTML 結(jié)構(gòu)，包括一個(gè)用于顯示原始圖片的<img>元素，一個(gè)裁切按鈕，以及一個(gè)用于顯示裁切結(jié)果的<img>元素。

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

為了實(shí)現(xiàn)固定寬高的圖片裁切，我們需要計(jì)算寬高比。以下是創(chuàng)建 Cropper.js 實(shí)例的 JavaScript 代碼：

編寫JavaScript

var image = document.getElementById('image');
var fixedWidth = 300; // 設(shè)置裁剪結(jié)果的固定寬度
var fixedHeight = 200; // 設(shè)置裁剪結(jié)果的固定高度
var aspectRatio = fixedWidth / fixedHeight; // 計(jì)算寬高比
// 創(chuàng)建 Cropper 實(shí)例，設(shè)置寬高比，禁止移動(dòng)和縮放裁剪框，禁止重新框選選取
var cropper = new Cropper(image, {
  aspectRatio: aspectRatio,
  cropBoxResizable: false, // 禁止用戶調(diào)整裁剪框的寬高
  zoomable: false, // 禁止縮放圖片
  dragMode: 'none' // 禁止重新框選選取
});

當(dāng)用戶點(diǎn)擊“裁剪”按鈕時(shí)，我們需要獲取裁剪結(jié)果，并將其顯示在另一個(gè)<img>元素中。

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

現(xiàn)在，當(dāng)用戶點(diǎn)擊“裁剪”按鈕時(shí)，裁剪后的圖片將以固定的寬度和高度顯示在頁(yè)面上。

總結(jié)：

在本教程中，我們學(xué)習(xí)了如何使用 Cropper.js 庫(kù)實(shí)現(xiàn)固定寬高的圖片裁切。我們創(chuàng)建了一個(gè) Cropper.js 實(shí)例，設(shè)置了寬高比，同時(shí)禁止了用戶調(diào)整裁剪框的寬高、縮放圖片和重新框選選取。這使得我們能夠?qū)崿F(xiàn)一個(gè)簡(jiǎn)單而強(qiáng)大的圖片裁切工具，以滿足特定寬高的需求。Cropper.js 提供了許多其他選項(xiàng)和方法，你可以根據(jù)實(shí)際需求對(duì)其進(jìn)行定制。希望本教程對(duì)你有所幫助！

全部代碼如下：

<!DOCTYPE html>
<html>
<head>
  <title>圖片裁剪工具</title>
  <link rel="stylesheet"  rel="external nofollow"  rel="external nofollow" >
  <style>
    img {
      width: 800px; 
      height: 500px;
    }
  </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 fixedWidth = 300; // 設(shè)置裁剪結(jié)果的固定寬度
    var fixedHeight = 200; // 設(shè)置裁剪結(jié)果的固定高度
    var aspectRatio = fixedWidth / fixedHeight; // 計(jì)算寬高比
    // 創(chuàng)建 Cropper 實(shí)例，設(shè)置寬高比，禁止移動(dòng)和縮放裁剪框，禁止重新框選選取
    var cropper = new Cropper(image, {
      aspectRatio: aspectRatio,
      cropBoxResizable: false, // 禁止用戶調(diào)整裁剪框的寬高
      zoomable: false, // 禁止縮放圖片
      dragMode: 'none' // 禁止重新框選選取
    });
    function split() {
      // 獲取裁剪結(jié)果（返回裁剪后的圖像數(shù)據(jù)）
      var croppedData = cropper.getCroppedCanvas({
        width: fixedWidth,
        height: fixedHeight
      }).toDataURL('image/jpeg');
      // 將裁剪結(jié)果顯示在另一個(gè)元素中
      var resultElement = document.getElementById('cropped-result');
      resultElement.src = croppedData;
    }
  </script>
</body>
</html>

以上就是Cropper.js進(jìn)階之固定寬高圖片裁切實(shí)現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于Cropper.js固定寬高圖片裁切的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: