Come ritagliare un'immagine in JavaScript usando la tela HTML
Come ritagliare un'immagine in JavaScript usando la tela HTML?
La tela è un'area vuota in cui l'utente può eseguire qualsiasi attività per quanto riguarda l'immagine. JavaScript fornisce il drawimage () Metodo per ritagliare un'immagine. Il metodo viene utilizzato per ridimensionare un'immagine in elementi di tela. Questo metodo funziona come rettangolare specificando le dimensioni e la posizione dell'immagine.
La sintassi del metodo DrawImage () è fornita di seguito:
Sintassi
DrawImage (IMG, SRC_X, SY, Swid, Shei, Dx, Dy, Dwid, Dhei);I parametri sono spiegati come di seguito:
Parametri Descrizione
| img | Specifica l'immagine (tramite il tag) da ritagliare e visualizzare nel browser. |
| src_x | Specifica l'inizio del ritaglio dell'immagine di origine dall'asse x. |
| src_y | Indica l'inizio del ritaglio dell'immagine di origine dall'asse y. |
| Swid | Identifica la larghezza dell'immagine. |
| lei io | Rappresenta l'altezza dell'immagine. |
| dx | Specifica il punto avviato dall'asse X per il disegno. |
| dy | Specifica il punto avviato dall'asse y per il disegno. |
| Dwid | Rappresenta la larghezza dell'immagine da visualizzare. |
| dhei | Rappresenta l'altezza dell'immagine da visualizzare. |
Pratichiamo il metodo DrawImage () per ritagliare un'immagine usando la tela HTML in JavaScript.
Esempio
Un esempio è considerato per ritagliare un'immagine in JavaScript utilizzando la tela HTML. L'esempio è costituito da sezioni di codice HTML e JavaScript. Queste sezioni sono discusse come seguenti.
Codice HTML
"https: // cdn.Pixabay.com/foto/2022/08/15/12/47/falena-7387787__340.jpg ">
La descrizione del codice è la seguente:
- UN Il tag viene utilizzato specificando le dimensioni contenenti larghezza E altezza.
- UN URL di un'immagine web è assegnata a src.
- Successivamente, l'elemento tela HTML viene utilizzato per visualizzare l'immagine ritagliata nel browser.
- Alla fine, il file JavaScript test.js è collegato all'internotag.
Codice JavaScript
finestra.onload = function ()var img = documento.getElementById ("Fiore");
var canvas = document.getElementById ("CAN_ID");
var context = tela.getContext ("2D");
contesto.DrawImage (IMG, 10, 10);
;
In questo codice:
- In primo luogo, il "finestra.Onload"L'evento viene impiegato per verificare se la pagina Web è pronta per la visualizzazione.
- Inoltre, il getelementbyid La proprietà viene utilizzata per estrarre l'immagine e l'ID di tela da "fiore" E "CAN_ID".
- Dopodiché, il getContext () Il metodo viene utilizzato per mostrare il disegno su tela come "2d" superficie.
- Finalmente il drawimage () Il metodo è impiegato per disegnare una nuova immagine. Inoltre, X E y coordinate sono passati come "10" E "10"Per il posizionamento dell'immagine sulla tela.
Produzione
L'output mostra che l'immagine completa viene ridimensionata applicando il drawimage () Metodo nella finestra del browser.
Conclusione
In JavaScript, il drawimage () Il metodo viene utilizzato con tre argomenti per ritagliare un'immagine utilizzando l'elemento tela HTML. Il metodo accetta una varietà di argomenti, ma solo il reference dell'immagine, altezza, E larghezza vengono utilizzati per ritagliare un'immagine. IL getelementbyid Ha anche un ruolo chiave nel recupero dell'elemento immagine. Questo articolo dimostra vari metodi per ritagliare un'immagine in JavaScript usando la tela HTML.