Jak przyciąć obraz w JavaScript za pomocą płótna HTML

Element na płótnie HTML słynie z wykonywania manipulacji z obrazami. Może wykonywać różne funkcje związane z obrazami, takimi jak przycinanie, rozmiar, powiększanie, powiększenie i tak dalej. Przycinanie obrazu jest niezbędne do usunięcia niepotrzebnych części obrazu. Na przykład JavaScript zapewnia wbudowaną funkcjonalność przez drawimage () Metoda przycinania obrazu i wyświetlania go w elemencie płótna. W tym artykule pokazuje praktyczną implementację przycinania obrazu w JavaScript za pomocą płótna HTML.

Jak przyciąć obraz w JavaScript za pomocą płótna HTML?

Płótno to puste miejsce, w którym użytkownik może wykonywać dowolne zadanie dotyczące obrazu. JavaScript zapewnia drawimage () Metoda przycinania obrazu. Metoda jest wykorzystywana do skalowania obrazu na elementy płótna. Ta metoda działa tak samo jak prostokątny, określając rozmiar i lokalizację obrazu.

Składnia metody DrawImage () podano poniżej:

Składnia

DrawImage (IMG, Src_X, Sy, Swid, Shei, DX, Dy, Dwid, Dhei);

Parametry są wyjaśnione jak poniżej:

Opis parametrów

img	Określa obraz (za pomocą znacznika) do przycięcia i wyświetlania w przeglądarce.
src_x	Określa początek przycinania obrazu źródłowego ze osi x.
src_y	Oznacza początek przycinania obrazu źródłowego ze osi y.
Swid	Identyfikuje szerokość obrazu.
Shei	Reprezentuje wysokość obrazu.
dx	Określa punkt rozpoczęty ze osi x do rysowania.
Dy	Określa punkt początkowy ze osi y do rysowania.
Dwid	Reprezentuje szerokość wyświetlania obrazu.
Dhei	Reprezentuje wysokość wyświetlania obrazu.

Przećwiczmy metodę DrawImage () do przycinania obrazu za pomocą płótna HTML w JavaScript.

Przykład

Przykład jest uważany za przycinanie obrazu w JavaScript, stosując płótno HTML. Przykład składa się z sekcji kodów HTML i JavaScript. Te sekcje są omawiane w następujący sposób.

Kod HTML

„https: // cdn.Pixabay.COM/Photo/2022/08/15/12/47/Moth-7387787__340.jpg ">

Opis kodu jest następujący:

• Jakiś Tag jest wykorzystywany przez określanie wymiarów zawierających szerokość I wysokość.
• A URL obrazu internetowego jest przypisany do src.
• Następnie element płótna HTML jest wykorzystywany do wyświetlania przyciętego obrazu w przeglądarce.
• W końcu plik JavaScript test.JS jest powiązanytagi.

Kod JavaScript

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

W tym kodzie:

• Po pierwsze, „okno.Onload„Wydaje się zdarzenie, aby sprawdzić, czy strona internetowa jest gotowa do wyświetlenia.
• Ponadto GetElementById właściwość jest wykorzystywana do wyodrębnienia obrazu obrazu i płótna przez „kwiat" I „Can_id”.
• Potem getContext () Metoda służy do pokazania rysunku na płótnie jako „2d" powierzchnia.
• Wreszcie drawimage () Do rysowania nowego obrazu stosuje się metodę. Ponadto, X I y współrzędne są przekazywane jako „10" I "10”W celu umieszczenia obrazu na płótnie.

Wyjście

Wyjście pokazuje, że pełny obraz jest zmieniany przez zastosowanie drawimage () Metoda w oknie przeglądarki.

Wniosek

W JavaScript, drawimage () Metoda jest wykorzystywana z trzema argumentami do przycinania obrazu za pomocą elementu HTML Canvas. Metoda akceptuje różne argumenty, ale tylko Odranie obrazu, wysokość, I szerokość są wykorzystywane do przycinania obrazu. GetElementById Odgrywa także kluczową rolę w odzyskaniu elementu obrazu. Ten artykuł pokazuje różne metody przycinania obrazu w JavaScript za pomocą płótna HTML.