Download a photo directly using javascript

Question

Download a photo directly using javascript

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

Hello my question is it possible to download for example a photo directly when I open my web page using only php? What I want is that when I open my page with the photo it is downloaded so I can view it on my computer. Try with:

<?php header("Location: http://paginaweb/seccion1/foto.jpg"); ?>

Well when I open this page I will visualize my photo and it will be downloaded. But if I use the previous code, my page is not displayed. Is there a way to download a photo directly using php and my page to be displayed?

My page will be something simple like this:

<!DOCTYPE html>
<html>
<body>
<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>COMING SOON</h1>
    <hr>
    <p>35 days left</p>
  </div>
  <div class="bottomleft">
    <p>Some text</p>
  </div>
</div>

</body>
</html>

javascript html

asked by Jesus Garcia 30.12.2017 в 16:12

source

3 answers

Refresh first firebase field Selenium. Mouse over element does not display content

score 0 · Answer 1

You can not at the same time display the HTML and send a file for download. But answering your question, if I wanted to open a file (say, foto.php) to download an image, it would be

<?php

header('Content-type: image/png');

header('Content-Disposition: attachment; filename="mi_imagen.png"');

readfile('mi_imagen.png');

score 0 · Answer 2

Here it is, and I explain it in the code itself.

    if (window.location.hash.substring(1) !== 'forceDownloadImage') window.addEventListener("load", forceDownload.bind(null, "m.png"));

    // Al hacer forceDownload.bind podemos pasar argumentos a la funcion en el listener.

    function forceDownload(image) {
        var d = document,
            w = window,
            a = d.createElement("A"); // creamos el elemento
        a.download = image.toString(); // Imagen a string
        a.href = "./m.png"; // href atributo
        var newTab = w.open("./#forceDownloadImage", "_blank"),
            self = newTab;
        self.addEventListener("load", _putImage);
        // Self es como el window pero de la nueva pestaña creada para poder manejar su DOM

        function _putImage() { // Funcion una vez, haya cargado totalmente la nueva pestaña
            var body = self.document.getElementsByTagName("BODY")[0]; // Obtenemos el Tag body de apertura
            body.appendChild(a); // Añadimos el link
            var imagen = self.document.createElement("img"); // Creamos el img
            imagen.setAttribute("src", image); // Añadimos el atributo src al tag img
            imagen.setAttribute("style", "width: 50vw; height: 50vw;"); // Atributo de tamaño de la imagen
            body.appendChild(imagen); // Añadimos la imagen
            body.appendChild(a); // Añadimos a la nueva pestaña el link para descargar
            var safe = [].slice.call(body.getElementsByTagName("A"), 0);
            // Collection HTML en array , que es lo mismo que, Array.from(collection)


            safe.forEach(elem => { // Buscamos el elemento con el link de download especificado
                    if (elem.download === image.toString()) elem.click(); // Click automatico
                }
            }
        }

score 0 · Answer 3

var descargar = href => {
    let
    tempID = 'tempID' + new Date().getTime(),
    aDownload = document.createElement('a');
    aDownload.id = tempID;
    aDownload.href = href;
    aDownload.target = '_blanc';
    aDownload.download = href;
    document.body.appendChild(aDownload);
    document.getElementById(tempID).click();
    document.body.removeChild(document.getElementById(tempID));
    delete(aDownload, tempID);
};

descargar('https://www.google.com.do/images/branding/product/ico/googleg_lodp.ico');
// HTML: <button onclick="descargar('ruta-de-la-image')">Descargar Image</button>