Cropper.js進階之裁剪后保存至服務器實現詳解

更新時間：2023年05月06日 15:53:10 作者：MerkleJqueryRu

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

Cropper.js將截圖保存到服務器并使用Fetch進行請求

要使用Cropper.js將截圖保存到服務器并使用Fetch進行請求，你需要執(zhí)行以下步驟：

在你的HTML頁面中，確保已經引入了Cropper.js和Fetch API。

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

創(chuàng)建一個用于顯示和裁剪圖片的容器。

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

在你的JavaScript代碼中，初始化Cropper.js，并添加保存按鈕的事件處理程序。

  // 獲取裁剪后的圖片數據
  var croppedCanvas = cropper.getCroppedCanvas();
  // 將圖片數據轉換為Blob對象
  croppedCanvas.toBlob(function(blob) {
    // 創(chuàng)建FormData對象，用于發(fā)送數據
    var formData = new FormData();
    formData.append('image', blob, 'cropped-image.jpg');
    // 發(fā)送請求保存圖片
    fetch('path/to/save-endpoint', {
      method: 'POST',
      body: formData
    })
    .then(function(response) {
      // 處理響應
      if (response.ok) {
        console.log('Image saved successfully.');
      } else {
        console.error('Error saving image.');
      }
    })
    .catch(function(error) {
      console.error('Error saving image:', error);
    });
  });

在上面的代碼中，你需要根據你的實際情況進行調整：

替換path/to/cropper.js為Cropper.js文件的實際路徑。
將path/to/image.jpg替換為要進行裁剪的圖片的實際路徑。
替換path/to/save-endpoint為用于保存圖片的服務器端點的實際URL。

此代碼將捕獲裁剪后的圖像數據，將其轉換為Blob對象，然后使用Fetch API將其發(fā)送到服務器端點進行保存。請確保你的服務器端點能夠接收并處理該請求，并將圖像保存到適當的位置。

注意：在使用Fetch API發(fā)送FormData對象時，請求的Content-Type將自動設置為multipart/form-data，這適用于傳輸文件數據。

全部前端代碼

<!DOCTYPE html>
<html>
<head>
  <title>圖片裁剪工具</title>
  <link rel="stylesheet"  rel="external nofollow" >
  <style>
    img {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div>
    <img src="./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; // 設置裁剪結果的固定寬度
    var fixedHeight = 200; // 設置裁剪結果的固定高度
    var aspectRatio = fixedWidth / fixedHeight; // 計算寬高比
    // 創(chuàng)建 Cropper 實例，設置寬高比，禁止移動和縮放裁剪框，禁止重新框選選取
    var cropper = new Cropper(image, {
      viewMode: 2 // 設置裁剪框在圖像上的顯示模式
    });
    function save() {
      // 獲取裁剪后的圖片數據
      var croppedCanvas = cropper.getCroppedCanvas();
      // 將圖片數據轉換為Blob對象
      croppedCanvas.toBlob(function (blob) {
        // 創(chuàng)建FormData對象，用于發(fā)送數據
        var formData = new FormData();
        formData.append('image', blob, 'cropped-image.jpg');
        // 發(fā)送請求保存圖片
        fetch('http://127.0.0.1:5000/save_image', {
          method: 'POST',
          body: formData
        })
          .then(function (response) {
            // 處理響應
            if (response.ok) {
              console.log('Image saved successfully.');
            } else {
              console.error('Error saving image.');
            }
          })
          .catch(function (error) {
            console.error('Error saving image:', error);
          });
      })
    }
  </script>
</body>
</html>

為了Demo完整，我用Flask補充了一段后端代碼，大家僅做參考

import base64
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/save_image', methods=['POST'])
def save_image():
    if 'image' in request.files:
        image_file = request.files['image']
        # 處理上傳的文件，保存到服務器或進行其他操作
        image_file.save('./image.jpg')
        return {"code": "200"}
    else:
        return {"code": "500"}
if __name__ == '__main__':
    app.run()

以上就是Cropper.js進階之裁剪后保存至服務器實現詳解的詳細內容，更多關于Cropper.js裁剪后保存服務器的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: