Come ridimensionare l'immagine usando la tela HTML in JavaScript

In JavaScript, il ridimensionamento dell'immagine gioca un ruolo importante nel rendere la pagina web più interattiva. Ridimensionando, le immagini possono essere posizionate in qualsiasi luogo desiderato su una pagina web. A tale scopo, l'HTML L'elemento fornisce una caratteristica di Ridimensionare le immagini Con l'integrazione del codice JavaScript. Questo elemento è applicabile per il disegno della grafica, tra cui l'animazione, la trama dei grafici e molti altri. Inoltre, gli utenti possono specificare le dimensioni dell'immagine ridimensionata. L'articolo dimostra come ridimensionare un'immagine usando la tela HTML tramite JavaScript.

Come ridimensionare un'immagine usando la tela HTML in JavaScript?

L'HTML L'elemento viene utilizzato per disegnare grafica in diversi aspetti. È utile per l'animazione, trama grafici e combinazione di foto. Inoltre, gli utenti possono ridimensionare l'immagine fornendo dimensioni specifiche. Non cambia l'immagine originale ma crea una nuova immagine ritagliata o ridimensionata. A tale scopo, il drawimage () Il metodo viene utilizzato per ridimensionare l'immagine negli elementi di tela.

L'implementazione pratica del ridimensionamento dell'immagine è divisa in due file separati, i.e., HTML e JavaScript.

Codice HTML

"https: // cdn.Pixabay.com/foto/2020/02/26/08/59/Fireworks-4881190__340.jpg "
>

La descrizione del codice è fornita qui:

• Innanzitutto, un URL di immagine viene fornito specificando la larghezza e l'altezza con tag.
• Dopodiché, HTML è regolato ridimensionando il larghezza E altezza dell'immagine.
• Alla fine, un Javascript "test.js"È collegato fornendo la fonte.

Codice JavaScript

finestra.onload = function ()
var img = documento.getElementById ("Fire");
var canvas = document.getElementById ("can");
var context = tela.getContext ("2D");
contesto.DrawImage (IMG, 10, 10);
;

In questo codice JavaScript:

• In primo luogo, il "finestra.Onload"L'evento viene utilizzato per il controllo se la pagina Web è pronta per la visualizzazione.
• Dopo di che, getelementbyid La proprietà viene impiegata per estrarre ID immagine e tela da "fuoco" E "Potere".
• Dopodiché, il getContext () il metodo viene utilizzato per mostrare il disegno su tela passando un "2d" superficie.
• Alla fine, il drawimage () Il metodo viene utilizzato per disegnare una nuova immagine. Inoltre, X E y Le coordinate sono specificate come "10" E "10"Per posizionare l'immagine sulla tela.

Produzione

L'output mostra che l'immagine completa viene ridimensionata applicando il drawimage () Metodo nell'HTML . La parte giusta del display sopra rappresenta la parte ridimensionata dell'immagine.

Conclusione

JavaScript fornisce a drawimage () Metodo per ridimensionare l'immagine utilizzando l'HTML . Il metodo prende input come altezze e larghezze dell'immagine esistente. Successivamente, viene applicato un fattore di ridimensionamento per disegnare una nuova immagine in base alle altezze e alle larghezze fornite. Inoltre, gli utenti possono specificare le immagini Web per il ridimensionamento tramite JavaScript. In questo post, gli utenti hanno imparato a ridimensionare l'immagine in base a HTML . Ha varie applicazioni nei negozi di shopping online, nei siti di gioco, ecc.