Cropper.js進階之裁剪后保存至本地實現(xiàn)示例

更新時間：2023年05月06日 16:00:22 作者：MerkleJqueryRu

這篇文章主要為大家介紹了Cropper.js進階之裁剪后保存至本地實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

在開發(fā)Web應用程序時，經(jīng)常需要對圖片進行裁剪和編輯。Cropper.js是一個強大的JavaScript庫，可以幫助我們實現(xiàn)圖片的裁剪功能，并且提供了將裁剪后的圖片保存至本地的方法。本文將介紹如何使用Cropper.js來實現(xiàn)這一功能。

正文

1. 引入Cropper.js

首先，我們需要在頁面中引入Cropper.js庫。

<script src="path/to/cropper.js"></script>

2. 創(chuàng)建圖像裁剪器

在HTML文件中，我們需要創(chuàng)建一個圖像裁剪器的容器，并在其中添加一個圖像元素。這個容器將用于顯示和裁剪圖像。

<div id="cropper-container">
  <img id="image" src="path/to/image.jpg" alt="Image">
</div>

3. 初始化Cropper.js

接下來，我們需要在JavaScript代碼中初始化Cropper.js，并將其應用于圖像元素。

// 獲取圖像元素
var image = document.getElementById('image');
// 初始化Cropper.js
var cropper = new Cropper(image, {
  aspectRatio: 1, // 設置裁剪框的寬高比例
  viewMode: 2 // 設置裁剪框在圖像上的顯示模式
});

4. 裁剪圖像并保存至本地

當用戶完成圖像裁剪時，我們可以通過調(diào)用Cropper.js的方法來獲取裁剪后的圖像數(shù)據(jù)，并保存至本地。

// 獲取裁剪后的圖像數(shù)據(jù)
var croppedCanvas = cropper.getCroppedCanvas();
// 將圖像數(shù)據(jù)轉(zhuǎn)換為Base64編碼
var imageData = croppedCanvas.toDataURL('image/jpeg');
// 創(chuàng)建一個鏈接元素
var downloadLink = document.createElement('a');
// 設置鏈接的屬性
downloadLink.href = imageData;
downloadLink.download = 'cropped_image.jpg'; // 設置要保存的文件名
// 將鏈接添加到文檔中
document.body.appendChild(downloadLink);
// 模擬點擊下載鏈接
downloadLink.click();
// 清理并移除鏈接
document.body.removeChild(downloadLink);

完整代碼

<!DOCTYPE html>
<html>
<head>
  <title>圖片裁剪工具</title>
  <link rel="stylesheet"  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="save()"> 保存 </button>
  <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; // 設置裁剪結(jié)果的固定寬度
    var fixedHeight = 200; // 設置裁剪結(jié)果的固定高度
    var aspectRatio = fixedWidth / fixedHeight; // 計算寬高比
    // 創(chuàng)建 Cropper 實例，設置寬高比，禁止移動和縮放裁剪框，禁止重新框選選取
    var cropper = new Cropper(image, {
      viewMode: 2 // 設置裁剪框在圖像上的顯示模式
    });
      function save(){
      // 獲取裁剪結(jié)果（返回裁剪后的圖像數(shù)據(jù)）
      var imageData = cropper.getCroppedCanvas().toDataURL('image/png'); // 獲取Base64編碼的圖像數(shù)據(jù)
      // 創(chuàng)建一個鏈接元素
      var downloadLink = document.createElement('a');
      // 設置鏈接的屬性
      downloadLink.href = imageData;
      downloadLink.download = 'cropped_image.png'; // 設置要保存的文件名
      // 將鏈接添加到文檔中
      document.body.appendChild(downloadLink);
      // 模擬點擊下載鏈接
      downloadLink.click();
      // 清理并移除鏈接
      document.body.removeChild(downloadLink);
    }
  </script>
</body>
</html>

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

您可能感興趣的文章: