Jak zmienić rozmiar obrazu za pomocą płótna HTML w JavaScript

W JavaScript rozmiar obrazu odgrywa ważną rolę w uczynieniu strony internetowej bardziej interaktywnej. Z rozmiaru obrazy można umieścić na dowolnym pożądanym miejscu na stronie internetowej. W tym celu HTML element zapewnia funkcję Zmiany obrazów z integracją kodu JavaScript. Ten element ma zastosowanie do rysowania grafiki, w tym animacji, grafiki i wielu innych. Ponadto użytkownicy mogą określić wymiary rozmiaru obrazu. Artykuł pokazuje, jak zmienić rozmiar obrazu za pomocą płótna HTML za pośrednictwem JavaScript.

Jak zmienić rozmiar obrazu za pomocą płótna HTML w JavaScript?

HTML Element jest wykorzystywany do rysowania grafiki w różnych aspektach. Jest przydatny do animacji, wykreślania wykresów i łączenia zdjęć. Ponadto użytkownicy mogą zmienić rozmiar obrazu, zapewniając określone wymiary. Nie zmienia oryginalnego obrazu, ale tworzy nowy przycięty lub zmieniony obraz. W tym celu drawimage () Metoda jest wykorzystywana do skalowania obrazu w elementach płótna.

Praktyczna implementacja rozmiaru obrazu jest podzielona na dwa osobne pliki, i.mi., HTML i JavaScript.

Kod HTML

„https: // cdn.Pixabay.COM/Photo/2020/02/26/08/59/Fireworks-4881190__340.jpg "
>

Opis kodu jest tutaj podany:

• Po pierwsze, adres URL obrazu jest dostarczany przez określenie szerokości i wysokości za pomocą tagi.
• Potem html jest dostosowywane przez rozmiar szerokość I wysokość obrazu.
• Ostatecznie JavaScript „test.JS”Jest powiązane przez dostarczanie źródła.

Kod JavaScript

okno.onload = function ()
var img = dokument.getElementById („ogień”);
var canvas = dokument.getElementById („can”);
var kontekst = płótno.getContext („2d”);
kontekst.Drawimage (IMG, 10, 10);
;

W tym kodzie JavaScript:

• Po pierwsze, „okno.Onload„Wydarzenie jest wykorzystywane do sprawdzania, czy strona jest gotowa do wyświetlenia.
• Po tym, GetElementById Własność jest stosowana do wyodrębnienia ID obrazu obrazu i płótna przez „ogień" I "Móc".
• Potem getContext () Metoda służy do pokazania rysunku na płótnie, przekazując „2d" powierzchnia.
• W końcu drawimage () Metoda jest wykorzystywana do narysowania nowego obrazu. Ponadto, X I y współrzędne są określone jako „10" I "10„Za umieszczenie obrazu na płótnie.

Wyjście

Wyjście pokazuje, że pełny obraz jest zmieniany przez zastosowanie drawimage () Metoda w HTML . Właściwa część powyższego wyświetlacza reprezentuje rozmiar obrazu obrazu.

Wniosek

JavaScript zapewnia drawimage () metoda rozmiaru obrazu poprzez zastosowanie HTML . Metoda przyjmuje dane wejściowe jako wysokości i szerokości istniejącego obrazu. Następnie stosuje się współczynnik zmiany rozmiaru, aby narysować nowy obraz na podstawie dostarczonych wysokości i szerokości. Ponadto użytkownicy mogą określić obrazy internetowe do zmiany zmiany rozmiaru za pośrednictwem JavaScript. W tym poście użytkownicy nauczyli się zmienić rozmiar obrazu na podstawie HTML . Ma różne aplikacje w sklepach internetowych, witrynach do gier itp.