Cómo recortar una imagen en JavaScript usando lienzo HTML

El elemento HTML Canvas es famoso por realizar manipulaciones con imágenes. Puede realizar varias características relacionadas con imágenes, como recortar, cambiar el tamaño, acercarse, acercarse, etc. Recortar una imagen es esencial para eliminar las partes innecesarias de una imagen. Por ejemplo, JavaScript proporciona funcionalidad incorporada por parte del DrawImage () Método para recortar una imagen y mostrarla en un elemento de lona. Este artículo demuestra la implementación práctica de recortar una imagen en JavaScript usando lienzo HTML.

Cómo recortar una imagen en JavaScript usando lienzo HTML?

El lienzo es un área en blanco en la que el usuario puede realizar cualquier tarea con respecto a la imagen. JavaScript proporciona el DrawImage () Método para recortar una imagen. El método se utiliza para escalar una imagen en elementos de lienzo. Este método funciona lo mismo que rectangular especificando el tamaño y la ubicación de la imagen.

La sintaxis del método drawImage () se proporciona a continuación:

Sintaxis

Drawimage (img, src_x, sy, swid, shei, dx, dy, dwid, dhei);

Los parámetros se explican a continuación:

Descripción de los parámetros

img	Especifica la imagen (a través de la etiqueta) a recortar y mostrar en el navegador.
src_x	Especifica el inicio del cultivo de la imagen fuente del eje X.
src_y	Denota el inicio del cultivo de la imagen fuente del eje Y.
abatido	Identifica el ancho de la imagen.
ella yo	Representa la altura de la imagen.
dx	Especifica el punto de inicio del eje X para dibujar.
dy	Especifica el punto de inicio del eje y para dibujar.
abundante	Representa el ancho de la imagen a mostrar.
dhei	Representa la altura de la imagen a mostrar.

Practicemos el método drawImage () para recortar una imagen usando el lienzo HTML en JavaScript.

Ejemplo

Se considera un ejemplo para recortar una imagen en JavaScript empleando el lienzo HTML. El ejemplo consta de secciones de código HTML y JavaScript. Estas secciones se discuten de la siguiente manera.

código HTML

"https: // cdn.pixabay.com/Photo/2022/08/15/12/47/Moth-7387787__340.JPG ">

La descripción del código es la siguiente:

• Un La etiqueta se utiliza especificando dimensiones que contienen ancho y altura.
• A Url de una imagen web se asigna a SRC.
• Después de eso, se utiliza el elemento de lona HTML para mostrar la imagen recortada en el navegador.
• Al final, el archivo JavaScript prueba.js está vinculado dentroetiquetas.

Código JavaScript

ventana.onload = function ()
var img = documento.getElementByid ("flor");
Var Canvas = documento.getElementById ("can_id");
contexto var = lienzo.getContext ("2d");
contexto.Drawimage (img, 10, 10);
;

En este código:

• En primer lugar, el "ventana.encendidoSe emplea el evento para verificar si la página web está lista para mostrar.
• Además, el GetElementByid La propiedad se utiliza para extraer la imagen y la identificación de lienzo por "flor" y "Can_id".
• Después de eso, el getContext () El método se utiliza para mostrar el dibujo en el lienzo como un "2D" superficie.
• Finalmente, el DrawImage () El método se emplea para dibujar una nueva imagen. Además, X y Y coordenadas se pasan como "10" y "10"Para la colocación de la imagen en el lienzo.

Producción

La salida muestra que la imagen completa se redimensiona aplicando el DrawImage () Método en la ventana del navegador.

Conclusión

En JavaScript, el DrawImage () El método se utiliza con tres argumentos para recortar una imagen utilizando el elemento de lona HTML. El método acepta una variedad de argumentos, pero solo el referencia de imagen, altura, y ancho se utilizan para recortar una imagen. El GetElementByid también juega un papel clave en la recuperación del elemento de la imagen. Este artículo demuestra varios métodos para recortar una imagen en JavaScript utilizando el lienzo HTML.