Hvordan endre størrelse på bilde ved hjelp av HTML -lerret i JavaScript

I JavaScript spiller størrelse på bildestørrelse en viktig rolle i å gjøre websiden mer interaktiv. Ved å endre størrelse på, kan bildene plasseres på et hvilket som helst ønsket sted på en webside. For dette formålet, HTML Element gir et trekk i Endre størrelse på bilder med integrering av JavaScript -kode. Dette elementet er aktuelt for å tegne grafikk, inkludert animasjon, plotte grafer og mange flere. Dessuten kan brukere spesifisere dimensjonene til det endrede bildet. Artikkelen demonstrerer hvordan du kan endre størrelse på et bilde ved hjelp av HTML -lerretet via JavaScript.

Hvordan endre størrelse på et bilde ved hjelp av HTML -lerret i JavaScript?

HTML elementet brukes til å tegne grafikk i forskjellige aspekter. Det er nyttig for animasjon, plotting av grafer og å kombinere bilder. Dessuten kan brukere endre størrelsen på bildet ved å gi spesifikke dimensjoner. Det endrer ikke originalbildet, men skaper et nytt beskåret eller endret størrelse på bildet. For dette formålet, DrawImage () Metoden brukes til å skalere bildet i lerretelementer.

Den praktiske implementeringen av å endre størrelse på bildet er delt inn i to separate filer, i.e., HTML og JavaScript.

HTML -kode

"https: // cdn.Pixabay.com/foto/2020/02/66/08/59/Fyrverkeri-4881190__340.JPG "
>

Beskrivelsen av koden er gitt her:

• Først leveres en bilde -url ved å spesifisere bredde og høyde med Tagger.
• Etter det, html justeres ved å endre størrelse på bredde og høyde av bildet.
• Til slutt, et JavaScript “test.JS”Er koblet ved å gi kilden.

JavaScript -kode

vindu.onload = funksjon ()
var img = dokument.getElementById ("ild");
var lerret = dokument.getElementById ("Can");
var kontekst = lerret.getContext ("2d");
kontekst.tegning (IMG, 10, 10);
;

I denne JavaScript -koden:

• For det første “vindu.på Last”Arrangementet brukes til å sjekke om nettsiden er klar til å vises.
• Etter det, getElementById Eiendom er ansatt for å trekke ut bilde- og lerret -ID -ene av “Brann”Og“kan”.
• Etter det, getContext () Metoden brukes til å vise tegningen på lerret ved å passere en "2d”Overflate.
• Til slutt, den DrawImage () Metoden brukes til å tegne et nytt bilde. Dessuten, x og y Koordinater er spesifisert som "10”Og“10”For å plassere bildet på lerretet.

Produksjon

Utgangen viser at hele bildet er endret ved å bruke DrawImage () Metode i HTML . Den rette delen av skjermen ovenfor representerer den endrede delen av bildet.

Konklusjon

JavaScript gir en DrawImage () metode for å endre størrelsen på bildet ved å bruke HTML . Metoden tar innspill som høyder og bredder på det eksisterende bildet. Etter det brukes en størrelsesfaktor for å tegne et nytt bilde basert på de medfølgende høydene og breddene. Dessuten kan brukere spesifisere nettbildene for å endre størrelse via JavaScript. I dette innlegget har brukerne lært å endre størrelsen på bildet basert på HTML . Den har forskjellige applikasjoner i online shoppingbutikker, spillsider osv.