Recortar imágenes usando Canvas

descripción general

En el desarrollo web, a menudo necesitamos recortar imágenes para cumplir con diferentes requisitos de tamaño o realizar una visualización parcial de las imágenes. Este blog le brindará una comprensión profunda de cómo utilizar la tecnología Canvas para realizar el recorte de imágenes. Usaremos un ejemplo para demostrar cómo usar Canvas para hacer dibujos y realizar operaciones de recorte a través de la capa de máscara y la interacción del mouse. ¡Comencemos este viaje de Canvas!

estructura del proyecto

Primero, veamos la estructura del proyecto. Usaremos HTML, CSS y JavaScript para realizar la función de recorte de imagen de Canvas, el código es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
  
</head>
<body>
  

  <div>
    <input type="file" id="imageFile" accept="image/*" />
  </div>

  <div class="canvas-container">
    <canvas id="can"></canvas>
  </div>

  <div class="canvas2-container">
    <canvas id="can2"></canvas>
  </div>

  <script>
    // JavaScript代码
  </script>

</body>
</html>
Usaremos tres divcontenedores, que se utilizan para mostrar la imagen original, la imagen recortada y el área recortada. Entre ellos, <input type="file" id="imageFile" accept="image/*" />se utiliza para subir fotografías.

Inicializar lienzo

En la parte de JavaScript, primero obtenemos el elemento Canvas y su contexto, de la siguiente manera:
const oContainer = document.querySelector('.canvas-container');
const oContainer2 = document.querySelector('.canvas2-container');
const oImageFile = document.querySelector('#imageFile');
const oCan = document.getElementById('can');
const oCan2 = document.getElementById('can2');
const ctx = oCan.getContext('2d');
const ctx2 = oCan2.getContext('2d');
Usamos querySelectorel método para obtener el elemento .canvas-containerand .canvas2-containercomo contenedor de imagen #imageFiley el botón de carga de imagen. A continuación, obtenemos los dos elementos de Canvas y su contexto.

Carga y dibujo de imágenes.

A continuación, debemos escuchar el evento del botón de carga de imagen y dibujarlo en el Lienzo después de seleccionar la imagen:
const init = () => {
  bindEvent();
}

function bindEvent () {
  oImageFile.addEventListener('change', handleFileChange, false);
  // ... 其他事件监听 ...
}

function handleFileChange (e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.readAsDataURL(file);
  reader.onload = function (e) {
    const data = e.target.result;
    oImage.src = data;

    oImage.onload = function () {
      const { width, height } = this;
      generateCanvas(oContainer, oCan, width, height);
      ctx.drawImage(oImage, 0, 0, width, height);
      drawImageMask(0, 0, width, height, MASK_OPACITY);
    }
  }
}

function generateCanvas (container, canvas, width, height) {
  container.style.width = width + 'px';
  container.style.height = height + 'px';
  canvas.width = width;
  canvas.height = height;
  container.style.display = 'block';
}
En bindEventla función, agregamos changeun detector de eventos al botón de carga de imágenes y, después de seleccionar la imagen, FileReaderleemos el archivo de imagen y lo dibujamos en el lienzo. Usamos drawImageel método para dibujar la imagen en el Lienzo y llamamos generateCanvasa la función para que el tamaño del Lienzo sea consistente con la imagen. Al mismo tiempo, llamamos drawImageMaska la función para dibujar la máscara que se mostrará al recortar.

operación de cultivo

A continuación, debemos implementar la operación de recorte. Cuando el mouse del usuario hace clic y arrastra, podemos obtener la posición del mouse y luego dibujar el rectángulo de recorte:
function handleCanvasMouseDown (e) {
  initPos = [ e.offsetX, e.offsetY ];

  oCan.addEventListener('mousemove', handleCanvasMouseMove, false);
  oCan.addEventListener('mouseup', handleCanvasMouseUp, false);
}

function handleCanvasMouseMove (e) {
  const endX = e.offsetX;
  const endY = e.offsetY;
  const [ startX, startY ] = initPos;
  const rectWidth = endX - startX;
  const rectHeight = endY - startY;
  const { width, height } = oCan;

  screenShotData = [ startX, startY, rectWidth, rectHeight ];

  ctx.clearRect(0, 0, width, height);
  drawImageMask(0, 0, width, height, MASK_OPACITY);
  drawScreenShot(width, height, rectWidth, rectHeight);
}

function handleCanvasMouseUp () {
  oCan.removeEventListener('mousemove', handleCanvasMouseMove, false);
  oCan.removeEventListener('mouseup', handleCanvasMouseUp, false);
  drawScreenShotImage(screenShotData);
}
En handleCanvasMouseDownla función, registramos la posición del clic del mouse. En handleCanvasMouseMovela función, dibuje el rectángulo del área de recorte de acuerdo con la posición del movimiento del mouse y dibuje una máscara negra translúcida encima de la máscara. En handleCanvasMouseUpla función, cuando soltamos el mouse, dibujamos la imagen recortada.

recorte de imagen

Finalmente, necesitamos implementar la función de recorte de la imagen. Obtenga los datos del área de recorte mediante ctx.getImageDatael método y dibújelos en otro Canvas:
function drawScreenShot (canWidth, canHeight, rectWidth, rectHeight) {
  ctx.globalCompositeOperation = 'destination-out';
  ctx.fillStyle = '#000';
  ctx.fillRect(...initPos, rectWidth, rectHeight);

  ctx.globalCompositeOperation = 'destination-over';
  ctx.drawImage(oImage, 0, 0, canWidth, canHeight, 0, 0, canWidth, canHeight);
}

function drawScreenShotImage (screenShotData) {
  const data = ctx.getImageData(...screenShotData);
  generateCanvas(oContainer2, oCan2, screenShotData[2], screenShotData[3]);
  ctx2.clearRect(...screenShotData);
  ctx2.putImageData(data, 0, 0);
}

init();
En drawScreenShotla función, usamos globalCompositeOperationatributos para controlar la forma de dibujar, primero dibujamos el área de recorte y la borramos en la máscara, y luego dibujamos la imagen original. En drawScreenShotImagela función, usamos ctx.getImageDatael método para obtener los datos del área de recorte y luego los dibujamos en el segundo lienzo.

Resumir

A través de los pasos anteriores, hemos implementado con éxito la función de usar Canvas para recortar imágenes. Al escuchar el evento del mouse, podemos dibujar el área de recorte en la imagen y finalmente lograr el efecto de recorte de la imagen. La tecnología Canvas es una parte indispensable del desarrollo web front-end. Espero que este blog pueda ayudarlo a comprender mejor los escenarios de aplicación y las habilidades prácticas de Canvas. ¡Gracias por leer!

Aprendiendo desde la estación B hacia arriba - front-end Ono Sensen