Descargar imagen con HTML5

23/Mar/2020 HTML5 5 Comentarios

Descargar imagen con HTML5 es una de las capacidades que incluyo la nueva especificación de este lenguaje de marcado. Esta capacidad nos permite que al pinchar en un enlace que apunte a una imagen esta no se abra directamente, si no que podamos descargarla en nuestro ordenador local.

Lo primero que tenemos que hacer será crear un enlace sobre una imagen mediante el elemento anchor A. Además el contenido del enlace será la propia imagen que insertaremos mediante un elemento IMG. De esta manera le estamos indicando al usuario lo que va a poder mostrar o descargarse.

<a href="imagen.png"><img src="imagen.png" alt="imagen de ejemplo"/></a>

Hasta aquí nada que no hayamos a hecho para crear enlaces a imágenes con HTML.

El siguiente paso será añadir la nueva propiedad download de HTML5 sobre el elemento anchor A. Esta propiedad será la que haga que cuando se pulse sobre el enlace el navegador entienda que la imagen se tiene que descargar en vez de mostrarla.

El código en HTML5 quedará de la siguiente forma:

<a href="imagen.png" download><img src="imagen.png" alt="imagen de ejemplo"/></a>

Es importante saber que para que funcione este código la página HTML5 que se muestre debe de estar ejecutándose en un servidor web. Ya que si abrimos directamente la página sobre un navegador no funcionará.

De esta forma tan sencilla hemos conseguido nuestro objetivo de descargar imagen con HTML5.

Vídeos sobre HTML5


5 comentarios en “Descargar imagen con HTML5”

Víctor Cuervo

Paddle Surf

Gran trabajo, Felicidades

Víctor Cuervo

Ester Lopez

Gran contenido, felicidades, has hecho despuntar épicamente mi proyecto sobre Alquiler de Maquinaria en Málaga.

Víctor Cuervo

Mario Santos

Gran trabajo, su esfuerzo me ayudo con un proyecto en electrogenios.com

Víctor Cuervo

Aurora

Muchas gracias!!, me ha sido muy útil para nu trabajo con sitios webs, y la imagene s muy importante, me han ayudado basante con esta web descargar play store apk.

Muchas gracias enserio, son los mejores!!

Saludos.

Víctor Cuervo

Romina

Felicidades, también he logrado cosas buenas con mi nicho sobre productos para el cabellos, como rizadores, secadores, y depiladores

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.