Recortar una imagen en JavaScript usando HTML Canvas
Para recortar una imagen en JavaScript, podemos hacer uso del elemento HTML canvas. El elemento canvas está disponible en HTML5. Para mostrar y recortar la imagen en el lienzo, podemos usar la función drawImage(). La función drawImage() toma un mínimo de tres parámetros y un máximo de nueve parámetros.
Hay algo llamado contexto con la ayuda del cual podemos dibujar cualquier cosa en el lienzo. Puede considerarlo como un bolígrafo con el que puede dibujar sobre el lienzo. El contexto nos proporciona un método llamado drawImage() que dibuja el contenido en la pantalla. Veamos ahora el proceso paso a paso para recortar una imagen en JavaScript.
Recortar una imagen en JavaScript usando el elemento canvas HTML5
Un canvas en HTML 5 no es más que un área en blanco dentro de la cual podemos dibujar lo que queramos. Para agregar un lienzo dentro del código HTML, podemos usar una etiqueta canvas con una identificación de canvas, y para este elemento de lienzo, también podemos especificar sus dimensiones (en este caso, ancho: 1000 px y alto: 500 px) como sigue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="1000px" height="500px"></canvas>
<script src="./script.js"></script>
</body>
</html>
Al final de la etiqueta body, hemos vinculado nuestro archivo de script dentro del cual escribiremos nuestro código JavaScript.
Dentro de nuestro JavaScript hemos creado una función llamada cropImg(). Dentro de esta función, estamos obteniendo el elemento HTML canvas usando document.getElementById() y almacenándolo dentro de la variable canvas. Como queremos dibujar una imagen en este lienzo, que es una imagen bidimensional, primero obtendremos el contexto de nuestro elemento canvas usando la función getContext(), y como argumento de esta función, pasaremos 2d. Y para almacenar este contexto, hemos creado otra variable llamada ctx.
Para obtener más información sobre la función getContext() y sus propiedades, puede visitar y leer los documentos MDN. En esta etapa, así es como se ve nuestro código.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
}
}
Ahora que tenemos el lienzo configurado y tenemos el contexto ctx listo, podemos empezar a recortar y dibujar la imagen.
Vamos a crear ahora una etiqueta de imagen usando el constructor Image() y almacenarla dentro de una variable image. Luego podemos vincular una imagen a la image usando la propiedad src. Para este tutorial, tomaremos la URL de una imagen de Internet (Unsplash.com) y luego la agregaremos a la propiedad fuente como una cadena que se muestra a continuación.
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
Para recortar y dibujar la imagen en el lienzo tenemos que asegurarnos de que nuestra imagen ya esté cargada por completo. Para ello, podemos utilizar la función onload en la imagen. El código escrito dentro de esta función solo se ejecutará después de que la imagen esté completamente cargada.
Como hemos visto anteriormente en este artículo, el contexto nos proporciona una función llamada drawImage() para dibujar imágenes en el lienzo. Tenemos que pasar algunas entradas a esta función dependiendo de cómo queramos que se vea la imagen final. Como queremos recortar una imagen, queremos mostrar solo una parte específica de esa imagen en el navegador y excluir el resto, tenemos que pasar 9 parámetros a la función drawImage(). Y los parámetros son los siguientes.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Parámetros:
image: la imagen en sí que queremos recortar y mostrar en el navegador.sx(eje x de la imagen de origen): este parámetro indica desde dónde desea recortar o empezar a recortar la imagen desde el eje x.sy(eje y de la imagen de origen): este parámetro indica desde dónde desea recortar o empezar a recortar la imagen desde el eje y.sWidth: el ancho de la imagen a partir de sx.sHeight: la altura de la imagen a partir de sy.dx: el punto desde el que empezar a dibujar la imagen en la pantalla desde el eje x.dy: el punto desde el que empezar a dibujar la imagen en la pantalla desde el eje y.dWidth: la longitud de las imágenes que deben mostrarse en la pantalla.dHeight: la altura de las imágenes que deben mostrarse en la pantalla.
La siguiente imagen ilustra los parámetros sx, sy y sWidth utilizados para recortar o recortar la imagen.
Después de haber recortado la imagen, para mostrarla en la ventana del navegador, usamos los parámetros dx, dy, dWidth y dHeight.
Ahora puedes pasar parámetros a esta función dependiendo de cómo y dónde quieras mostrar la imagen. En este ejemplo, hemos pasado image, 150, 200, 500, 300, 60,60, 500, 300 estos nueve valores a nuestra función drawImage(). Puede modificar estos valores dependiendo de la salida deseada que desee. Al final, su código se verá así. No olvide llamar a la función cropImg() dentro de su código.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
image.onload = function() {
ctx.drawImage(image, 150, 200, 500, 300, 60, 60, 500, 300);
}
}
cropImg();
Este es el procedimiento completo para recortar una imagen en JavaScript utilizando el elemento de lienzo HTML 5. Este es el enfoque más popular y ampliamente utilizado cuando se trata de recortar una imagen en JavaScript.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn