图像处理：你没见过的原生JS实现

前端

2023-04-06 16:17:28

利用原生 JavaScript 拓展图片编辑新天地

前言

在如今这个图片无所不在的数字时代，图片处理能力已成为一项必备技能。然而，市面上现有的图片编辑工具往往功能受限或操作繁琐，让人难以尽兴发挥。

原生 JavaScript，图片编辑的利器

原生 JavaScript 作为一种强大的编程语言，为图片编辑领域带来了福音。它拥有强大的功能和良好的兼容性，让你能够轻松实现图片预览、旋转、放大、缩小、拖拽等多样化功能。

原生 JavaScript 实现图片预览

第一步，我们需要将图片文件加载到网页中。使用<input type="file">元素，用户便可轻松选择图片文件。

<input type="file" id="file-input">

接下来，利用 FileReader API 读取图片文件。

const fileInput = document.getElementById('file-input');

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

  const reader = new FileReader();

  reader.onload = () => {
    const img = document.createElement('img');
    img.src = reader.result;

    document.body.appendChild(img);
  };

  reader.readAsDataURL(file);
});

通过上述步骤，图片预览功能便轻松实现了。

原生 JavaScript 实现图片旋转

图片旋转操作可以通过使用 canvas 元素实现。首先，创建一个 canvas 元素。

<canvas id="canvas"></canvas>

获取 canvas 元素的绘制上下文。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

利用 canvas 的 rotate() 方法旋转图片。

ctx.rotate(angle);

最后，使用 drawImage() 方法将图片绘制到 canvas 上。

ctx.drawImage(img, 0, 0);

就这样，图片旋转功能也搞定了。

原生 JavaScript 实现图片放大缩小

要实现图片的放大缩小，可以使用 canvas 元素的 scale() 方法。

ctx.scale(scaleX, scaleY);

最后，依然使用 drawImage() 方法将图片绘制到 canvas 上。

ctx.drawImage(img, 0, 0);

这下，图片的放大缩小功能也轻松搞定。

原生 JavaScript 实现图片拖拽

为了实现图片拖拽，可以使用 canvas 元素的 addEventListener() 方法监听鼠标事件。

canvas.addEventListener('mousedown', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  let isDragging = false;

  const moveHandler = (e) => {
    if (!isDragging) {
      return;
    }

    const newX = e.clientX - rect.left;
    const newY = e.clientY - rect.top;

    const dx = newX - x;
    const dy = newY - y;

    ctx.translate(dx, dy);

    ctx.drawImage(img, 0, 0);
  };

  const upHandler = () => {
    isDragging = false;

    canvas.removeEventListener('mousemove', moveHandler);
    canvas.removeEventListener('mouseup', upHandler);
  };

  canvas.addEventListener('mousemove', moveHandler);
  canvas.addEventListener('mouseup', upHandler);
});