Jak przesłać prosty obraz za pomocą JavaScript i HTML

JavaScript to najpotężniejsze narzędzie, które zapewnia szeroki zakres funkcji. Pomaga w poprawie obrazów w zakresie oceny, analizy i interpretacji przez ludzi. Mówiąc dokładniej, w tworzeniu stron internetowych obrazy odgrywają kluczową rolę. Informacje w postaci obrazów można wyodrębnić i przetwarzać z obrazów w celu skomputeryzowanej oceny. Piksele na podanym obrazie mogą być obsługiwane i kontrolowane do dowolnego pożądanego kontrastu i gęstości.

Ten zapis pokaże metodę przesłania obrazu za pomocą JavaScript i HTML.

Jak przesłać prosty obraz za pomocą JavaScript/HTML?

Aby przesłać prosty obraz za pomocą JavaScript, najpierw dodamy znacznik obrazu na stronie HTML, a następnie użyjemy kodu JavaScript do załadowania i wybierz obraz na stronie internetowej.

Aby uzyskać praktyczne implikacje, wypróbuj podane instrukcje.

Przykład

Przede wszystkim postępuj zgodnie z podanymi instrukcjami:

• Wstaw „„”Element i określ typ wejścia jako„plik".
• Ten typ „pliku” określa pole w selekcie plików i „Przeglądać”Przycisk do przesłania plików.
• "
  ”Tag wstawia przerwę na linię.
• Następnie wstaw „„„Tag HTML i dodaj„ID”Atrybut do określania unikalnego identyfikatora o określonej nazwie.
• "src”Atrybut używany do dodania adresu URL pliku multimedialnego:

Można zauważyć, że utworzono opcję pliku i może wyświetlić nazwę obrazu tylko po zaakceptowaniu wejścia:

Teraz wewnątrz „„Tag, użyj następującego kodu:

W powyższym fragmencie kodu:

• "addEventListener ()”Metoda JavaScript pozwala na wstawienie lub dołączanie zdefiniowanego obsługi zdarzeń do elementu.
• "QuerySelelect ()”To metoda używana do zwrócenia pierwszego elementu w konkretnym dokumencie, który łączy się z konkretnym selektorem.
• "getElementById ()”Metoda jest wykorzystywana do uzyskania elementu za pomocą zdefiniowanego identyfikatora. W tym celu wartość jest przekazywana jako parametr.
• "revokeObjecturl ()”Uwalnia istniejący adres URL obiektu utworzony za pomocą adresu URL. Aby to zrobić, adres URL obrazu jest przekazywany jako parametr tej metody.
• "createObjectUrl ()”Jest metodą statyczną JavaScript, która sprawia, że ​​określony ciąg ma adres URL, który reprezentuje obiekt przekazany w parametrze.

Wyjście

Można zauważyć, że pomyślnie przesłaliśmy prosty obraz.

Wniosek

Aby przesłać prosty obraz za pomocą JavaScript, użyj „addEventListener ()„Metoda, która pozwala na wstawianie lub dołączanie zdefiniowanego obsługi zdarzeń do elementu. Następnie uzyskaj dostęp do zdefiniowanego elementu według identyfikatora i użyj „revokeObjecturl ()" I "createObjectUrl ()”Metody. W tym poście stwierdzono prostą metodę przesyłania obrazu przy użyciu JavaScript/HTML.