一小时搞定：使用 Cropper.js 进行头像和图片的上传、裁剪并发送到后端

前端

2023-12-20 15:19:18

1 小时搞定 Cropper.js 制作头像/图片上传、裁剪、并发送至后端

大家好，今天我要来分享如何使用 Cropper.js 在一小时内完成头像和图片的上传、裁剪并发送到后端。

简介

Cropper.js 是一个轻量级的 JavaScript 库，可以帮助您轻松裁剪图像。它具有许多强大的功能，例如：

拖动和缩放图像以进行裁剪
调整裁剪框的大小和位置
旋转图像
镜像图像
预览裁剪后的图像

安装

要使用 Cropper.js，您需要先将其安装到您的项目中。您可以通过以下方式安装：

npm install cropperjs

安装完成后，您就可以在您的项目中使用 Cropper.js 了。

使用

1. HTML 代码

首先，您需要在您的 HTML 代码中添加一个用于裁剪图像的容器。您可以使用 <div> 元素或其他容器元素。

<div id="cropper"></div>

2. JavaScript 代码

接下来，您需要在您的 JavaScript 代码中初始化 Cropper.js。您可以使用以下代码初始化 Cropper.js：

const cropper = new Cropper(document.getElementById('cropper'), {
  aspectRatio: 1 / 1,
  crop: function(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
  }
});

3. 上传图片

您可以使用以下代码上传图片：

const input = document.getElementById('image-input');

input.addEventListener('change', function() {
  const file = input.files[0];

  const reader = new FileReader();

  reader.onload = function() {
    cropper.replace(reader.result);
  };

  reader.readAsDataURL(file);
});

4. 裁剪图片

您可以使用以下代码裁剪图片：

cropper.crop();

5. 发送裁剪后的图片到后端

您可以使用以下代码将裁剪后的图片发送到后端：

const canvas = cropper.getCroppedCanvas();

canvas.toBlob(function(blob) {
  const formData = new FormData();

  formData.append('image', blob);

  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(function(response) {
    console.log(response);
  }).catch(function(error) {
    console.log(error);
  });
});