Jak dać do pobrania plik z obrazek z "img" za pomocą javascript lub jquery?

Question

Funkcje, które znalazłem w Internecie i lekko zmieniłem:

function downloadCanvasImage(name, extension, id) {
  var a = document.createElement("a");
  a.download = name + "." + extension;
  a.href = document.getElementById(id).toDataURL();
  a.click();
}

function downloadText(name, extension, text) {
    var blob = new Blob([text], {type: "text/csv"});
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, name + "." + extension);
    }
    else {
        var a = window.document.createElement('a');
        a.href = window.URL.createObjectURL(blob);
        a.download = name + "." + extension;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        a.href = window.URL.revokeObjectURL(a);
    }
}

Jednak używając tej pierwszej funkcji na "img" wyskakuje błąd, dlatego chciałbym, aby ktoś napisał mi, jak dać do pobrania obraz z "img" za pomocą javascripta lub jquery. I prosiłbym o napisanie ewentualnych poprawek, jakie mógłbym dodać do tych funkcji. Z góry dziękuję. :D

Answer 1

A proste przypisanie img.src do a.href nie działa?

To, co masz, działa tylko na canvas​, więc musiałbyś najpierw na płótnie narysować obrazek.

Comments

Na to z canvas wpadłem, ale znalazłem już prostszą drogę. :D

---

Gdy bierze się do a.href img.src to przenosi Cię do tego obrazu, a nie zaczyna pobierać.

---

Jeśli jest opcja zrobienia tego po stronie serwera, np. w PHP, to takie naiwne coś może działać.

Strona:

<img id="obrazek" src="image.php?id=comandeer.jpg" alt="Comandeer" data-name="comandeer.jpg">
<script>
document.querySelector( 'img' ).addEventListener( 'click', ( { target } ) => {
    const name = target.dataset.name;
    const url = `${ target.src }&download`;
    const link = document.createElement( 'a' );

    link.href = url;
    link.download = name;

    link.click();
} );
</script>

Skrypt image.php:

<?php
    if ( !array_key_exists( 'id', $_GET ) ) {
        die();
    }

    $img = explode( '/', $_GET[ 'id' ] );
    $img = array_pop( $img );
    $download = array_key_exists( 'download', $_GET );
    $imgPath = __DIR__ . '/img/' . $img;
    $type = $download ? 'hublabubla/force+download' : mime_content_type( $imgPath );
    $contents = file_get_contents( $imgPath );

    header( 'Content-Type: ' . $type );
    echo $contents;

Skrypt image.php pobiera obrazki z katalogu img. Jeśli skrypt będzie wywołany z samą nazwą obrazka (image.php?id=nazwa-obrazka.rozszerzenie), to go wyświetli. Jeśli będzie wywołany dodatkowo z parametrem download (image.php?id=nazwa-obrazka.rozszerzenie&download), to wymusi pobranie obrazka (przez wysłanie nagłówka Content-Type z dziwacznym MIME type, którego przeglądarka nie zna. Tym sposobem obrazek się pobierze.

Oczywiście ta wersja skryptu jest średnio zabezpieczona i warto, żebyś poczytał o sanityzacji ścieżek.

---

Obawiam się, że nie rozumiem działania tego kodu, bo moje umiejętności w PHP kończą się na:
$var1 = "Hello";
$var2 = "World";
echo "$var1 $var2";
A po za tym chciałbym to zrobić za pomocą JS. I próbuje to zrobić i to tego rezultat:

function downloadImgImage(name, extension, id) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var img = document.getElementById(id);
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  var a = document.createElement("a");
  a.download = name + "." + extension;
  a.href = canvas.toDataURL();
  a.click();
}

ale pisze mi "Failed to execute 'toDataURL' on 'HTMLCanvasElement'" i nie wiem, czy na canvas w zmiennej to nie działa, czy mam gdzieś jakiś błąd. :(

---

A możesz podać całą treść błędu, jaki otrzymujesz?

Answer 2

Napisz jaki to błąd.

Comments

"toDataURL is not a function", czyli jeśli dobrze rozumiem to znacznik "img" nie obsługuje tej funkcji, ale nie wiem, jak ją zastąpić.

---

Tak jak już napisał @Comandeer zamiast

a.href = document.getElementById(id).toDataURL()

użyj

a.href = document.getElementById(id).src

Przy okazji, zamiast var staraj się stosować let lub const

---

Takie rozwiązanie przenosi mnie do obrazka, a nie zaczyna pobierania.

Answer 3

A może tak?

const downloadImage = (img) => {
    const a = document.createElement('a');
    a.setAttribute('href', img.src);
    a.setAttribute('download', img.src.substring(img.src.lastIndexOf('/') + 1));
    a.click();
}

const img = document.getElementById('.....');
downloadImage(img);

 

Comments

No niestety nie działa. Przenosi mnie do obrazka.

---

U mnie działa, jakiej przeglądarki używasz?

Answer 4

Jak mógłbym prosić to niech osoby, które odpowiadają najpierw testują kod, a potem go wstawiają, bo dwie osoby napisały mi, żebym do a.href przypisał img.src (document.getElementById(id).src). :D

Comments

A przetestowałeś to swoje rozwiązanie…? Bo ono też nie działa (wrzuciłem nawet przykład → https://forum.pasja-informatyki.pl/496562/jak-dac-do-pobrania-plik-z-obrazek-z-img-za-pomoca-javascript-lub-jquery?show=496718#c496718 ).

---

Rzeczywiście nie sprawdziłem, czy pobrany plik jest prawidłowy.

To tak to nadal nie wiem, jak to zrobić. :(

---

Próbowałeś podglądać kod na stronach (online) z edytorami grafiki jak oni to rozwiązali że po kliknięciu <a> pobiera się obrazek?