Hvordan beskjære et bilde i JavaScript ved hjelp av HTML -lerret

HTML -lerretelementet er kjent for å utføre manipulasjoner med bilder. Den kan utføre forskjellige funksjoner relatert til bilder, som å beskjære, endre størrelse, zoome inn, zoome ut og så videre. Å beskjære et bilde er viktig for å fjerne unødvendige deler av et bilde. For eksempel gir JavaScript innebygd funksjonalitet av DrawImage () metode for å beskjære et bilde og vise det i et lerretelement. Denne artikkelen demonstrerer den praktiske implementeringen av å beskjære et bilde i JavaScript ved hjelp av HTML -lerret.

Hvordan beskjære et bilde i JavaScript ved hjelp av HTML -lerret?

Lerretet er et tomt område der brukeren kan utføre enhver oppgave angående bildet. JavaScript gir DrawImage () Metode for å beskjære et bilde. Metoden brukes til å skalere et bilde til lerretelementer. Denne metoden fungerer på samme måte som rektangulær ved å spesifisere størrelsen og plasseringen av bildet.

Syntaksen til DrawImage () -metoden er gitt nedenfor:

Syntaks

DrawImage (IMG, SRC_X, SY, SWID, SHEI, DX, DY, DWID, DHEI);

Parametrene blir forklart som nedenfor:

Parametere beskrivelse

img	Angir bildet (via taggen) som skal beskjæres og vises i nettleseren.
src_x	Angir starten på beskjæring av kildebildet fra x-aksen.
SRC_Y	Betegner starten på beskjæringen av kildebildet fra y-aksen.
Swid	Identifiserer bredden på bildet.
hun jeg	Representerer høyden på bildet.
dx	Angir startpunktet fra x-aksen for tegning.
dy	Angir startpunktet fra y-aksen for tegning.
dwid	Representerer bredden på bildet som skal vises.
dhei	Representerer høyden på bildet som skal vises.

La oss øve på DrawImage () -metoden for å beskjære et bilde ved hjelp av HTML -lerret i JavaScript.

Eksempel

Et eksempel anses å beskjære et bilde i JavaScript ved å bruke HTML -lerret. Eksemplet består av HTML- og JavaScript -kodeseksjoner. Disse seksjonene blir diskutert som følger.

HTML -kode

"https: // cdn.Pixabay.com/foto/2022/08/15/12/47/møll-7387787__340.jpg ">

Beskrivelsen av koden er som følger:

• An TAG brukes ved å spesifisere dimensjoner som inneholder bredde og høyde.
• EN URL av et webbilde er tilordnet src.
• Etter det brukes HTML -lerretelementet for å vise det beskjærte bildet i nettleseren.
• Til slutt JavaScript -filen test.JS er koblet innenforTagger.

JavaScript -kode

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

I denne koden:

• For det første “vindu.på Last”Arrangement er ansatt for å sjekke om nettsiden er klar til å vise.
• Videre getElementById Eiendom brukes til å trekke ut bildet og lerret ID av "blomst”Og “Can_id”.
• Etter det, getContext () Metoden brukes til å vise tegningen på lerret som en "2d”Overflate.
• Til slutt DrawImage () Metoden brukes for å tegne et nytt bilde. Dessuten, x og y koordinater blir passert som “10”Og“10”For plassering av bildet på lerretet.

Produksjon

Utgangen viser at hele bildet er endret ved å bruke DrawImage () Metode i nettleservinduet.

Konklusjon

I JavaScript, DrawImage () Metoden brukes med tre argumenter for å beskjære et bilde ved å bruke HTML -lerretelementet. Metoden godtar en rekke argumenter, men bare Bildereferanse, høyde, og bredde brukes til å beskjære et bilde. De getElementById spiller også en nøkkelrolle i å hente bildeelementet. Denne artikkelen demonstrerer forskjellige metoder for å beskjære et bilde i JavaScript ved hjelp av HTML -lerret.