手写裁剪图片的JS工具：掘金文章封面一键裁剪！

2023-12-16 20:30:34

前言

裁剪图片是我们在日常开发中经常会遇到的一个需求，例如：

需要将图片裁剪成特定的大小，以便在网站或应用程序中使用。
需要将图片裁剪成特定的形状，以便用于设计或制作图形。
需要将图片裁剪出特定的元素，以便用于合成或制作拼图。

然而，目前市面上有很多图片裁剪工具，但它们大多需要下载安装，而且使用起来并不方便。今天，我们将使用基础JS API手写一个图片裁剪工具，它不需要下载安装，而且使用起来非常方便。

实现原理

我们的图片裁剪工具将使用 HTML5 的 <canvas> 元素来实现。<canvas> 元素是一个用于在网页中绘制图形的元素，它可以用来绘制各种形状、线条和文字。

我们首先需要将图片加载到 <canvas> 元素中，然后使用 <canvas> 元素的 drawImage() 方法将图片绘制到画布上。接下来，我们可以使用 <canvas> 元素的 getContext() 方法获取画布的绘图上下文，然后使用绘图上下文中的各种方法来裁剪图片。

最后，我们可以使用 <canvas> 元素的 toDataURL() 方法将裁剪后的图片导出为DataURL，然后将其保存到本地或者上传到服务器。

代码实现

以下是如何使用基础JS API手写图片裁剪工具的代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <input type="file" id="image-input">
  <canvas id="canvas" width="600" height="400"></canvas>
  <button id="crop-button">裁剪</button>
  <script>
    const imageInput = document.getElementById('image-input');
    const canvas = document.getElementById('canvas');
    const cropButton = document.getElementById('crop-button');

    imageInput.addEventListener('change', function() {
      const file = this.files[0];
      const reader = new FileReader();

      reader.onload = function() {
        const image = new Image();
        image.onload = function() {
          const ctx = canvas.getContext('2d');
          ctx.drawImage(image, 0, 0, image.width, image.height);
        };
        image.src = reader.result;
      };

      reader.readAsDataURL(file);
    });

    cropButton.addEventListener('click', function() {
      const ctx = canvas.getContext('2d');
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const croppedImageData = ctx.createImageData(300, 300);

      for (let i = 0; i < 300; i++) {
        for (let j = 0; j < 300; j++) {
          const index = (i * 300 + j) * 4;
          croppedImageData.data[index] = imageData.data[index];
          croppedImageData.data[index + 1] = imageData.data[index + 1];
          croppedImageData.data[index + 2] = imageData.data[index + 2];
          croppedImageData.data[index + 3] = imageData.data[index + 3];
        }
      }

      ctx.putImageData(croppedImageData, 0, 0);

      const dataURL = canvas.toDataURL('image/png');

      const a = document.createElement('a');
      a.href = dataURL;
      a.download = 'cropped-image.png';
      a.click();
    });
  </script>
</body>
</html>