Cómo cargar una imagen simple usando JavaScript y HTML

JavaScript es la herramienta más poderosa que proporciona una amplia gama de funciones. Ayuda a mejorar las imágenes para la evaluación, el análisis e interpretación humanos. Más específicamente, en el desarrollo web, las imágenes juegan un papel crucial. La información en forma de imágenes se puede extraer y procesar a partir de imágenes para una evaluación computarizada. Los píxeles en la imagen establecida pueden manejarse y controlarse con cualquier contraste y densidad deseados.

Esta redacción demostrará el método para cargar la imagen usando JavaScript y HTML.

Cómo cargar una imagen simple usando JavaScript/HTML?

Para cargar una imagen simple usando JavaScript, primero agregaremos una etiqueta de imagen en la página HTML y luego utilizaremos el código JavaScript para cargar y seleccionar la imagen en la página web.

Para implicaciones prácticas, pruebe las instrucciones establecidas.

Ejemplo

En primer lugar, siga las instrucciones dadas:

• Insertar el "Elemento "y especifique el tipo de entrada como"archivo".
• Este tipo de "archivo" determina el campo en el archivo de archivo y un "NavegarBotón "para cargar los archivos.
• "
  "La etiqueta inserta un descanso de línea.
• Luego, inserte un ""HTML Etiqueta y agregue el"identificaciónAtributo para especificar la identificación única con un nombre en particular.
• "SRC"Atributo utilizado para agregar la URL del archivo multimedia:

Se puede notar que se ha creado una opción de archivo, y solo puede mostrar el nombre de la imagen después de aceptar una entrada:

Ahora, dentro del ""Etiqueta, utilice el siguiente código:

En el fragmento de código anterior:

• "addEventListener ()El método JavaScript permite insertar o conectar un controlador de eventos definido a un elemento.
• "QuerySelector ()"Es un método que se utiliza para devolver el primer elemento en el documento particular que se vincula con el selector particular.
• "getElementById ()El método se utiliza para obtener el elemento utilizando la identificación definida. Para ese propósito, el valor de la se pasa como parámetro.
• "RevokeObjectUrl ()"Libera una URL de objeto existente creada mediante el uso de la URL. Para hacerlo, la URL de la imagen se pasa como el parámetro de este método.
• "createObjectUrl ()"Es un método estático de JavaScript que hace que una cadena particular tenga una URL que represente el objeto aprobado en el parámetro.

Producción

Se puede notar que hemos subido con éxito una imagen simple.

Conclusión

Para cargar la imagen simple usando JavaScript, use el "addEventListener ()Método que permite insertar o conectar un controlador de eventos definido a un elemento. Luego, acceda al elemento definido por ID y utilice el "RevokeObjectUrl ()" y "createObjectUrl ()" métodos. Esta publicación indicó el método de carga de imagen simple usando JavaScript/HTML.