Wie zu zwingen, ein Bild heruntergeladen werden?

I hava eine dynamisch generierte Bild auf meiner Seite etwa so:

<img id="my_image" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEA/gD+AAD/etc............" />

Statt zu sagen, meine Nutzer zum klicken Sie rechts auf das Bild und speichern drücken ich möchte aufzeigen, einen download-link, wenn darauf geklickt wird aufgefordert, das Bild heruntergeladen werden. Wie dies zu erreichen?

Zunächst mein Versuch mit so in js:

var path = $('#my_image').attr('src');
window.open('./download.php?file=' + path);

und in download.php:

<?php
    header('Content-Description: File Transfer');
    header("Content-type: application/octet-stream");
    header("Content-disposition: attachment; filename= " . $_GET['file'] . "");
?>

<img src="<?= $_GET['file'] ?>" />

Aber das problem ist, Base64-url-stirngs sind so groß, es überschreitet die GET-Anfrage byte-Grenze.

Ich bin offen für eine Lösung in JavaScript oder PHP.

  • Auch wenn die Base64-string hast, passen in den query-string, der PHP-code würde das nicht tun, was Sie erwarten, es zu tun.
  • stellen Sie die src-Punkt an ein php-script mit Header etc zum herunterladen. schließen Sie das Bild, oder verwenden Sie file_get_contents() verwenden, um das Bild.
  • möglich, Duplikat der Wie mache ich ein jpg Bild download, wie eine pdf-Datei nicht zu finden? hoffe, es hilft auch bruv :)
  • Wie haben Sie generieren die inline-Bild in den ersten Platz?
  • HTML5 FileReader verwendet, um schnappen Sie sich das Bild in den browser des Benutzers und der Bearbeitung er/Sie tut, wird durch Canvas JavaScript. Das JS-plugin ist, was erzeugt die Base64-Bild-code.
InformationsquelleAutor TK123 | 2012-08-21
  1. 7

    Versuchen, diese in download.php:

    <?php
    header('Content-Description: File Transfer');
    header("Content-type: application/octet-stream");
    header("Content-disposition: attachment; filename= Image.jpg");
    exit(base64_decode($_POST['data'])); //url length is limited, use post instead
?>

    Und verwenden Sie diese für ein Formular:

    <form method="post" action="./download.php">
  <input type="hidden" name="data" value="/9j/4AAQSkZJRgABAgEA/gD+AAD/etc............" />
  <a href="#" onclick="this.parentNode.submit();return false;">Download</a>
</form>

    wie Dagon sagte, dass dies nicht der beste Weg zu gehen, weil dem Absenden des Formulars werden würde, wie das hochladen über das gesamte Bild.

    • die Buchung des gesamten Bildes vom server an den client zurück an den server dann zurück an den client scheint ein kleines sinnlos
    • damit dies prompt ein Bild herunterladen. Aber wenn das heruntergeladene Bild geöffnet wird, ist es leer (0 Byte). RE performance-Problem: das Bild ist nie auf dem server. Ich bin mit HTML5-FileReader-API zum laden des image auf den client-browser JavaScript und Canvas, um Ihnen zu erlauben, um es zu Bearbeiten. Das JavaScript erzeugt die Base64-Bild. Vielleicht gibt es also kein performance-Problem, über die Buchung der langen Schnur. Der download sollte noch serviert von der client-browser (richtig?)
    • Bei mir hat es geklappt, und ich heruntergeladen habe, ein sichtbares Bild. stellen Sie sicher, Ihre Füllung, die das Daten-Feld, bevor der Benutzer auf den link klickt und somit das Formular absendet !
    InformationsquelleAutor UnLoCo
  2. 2

    Stellt sich heraus eine der anderen Fragen haben Sie die Antwort:

    Browser/HTML-Force-download von Bild aus src="data:image/jpeg;base64,..."

    Tue ich es ausschließlich auf dem client-sde etwa so:

    $('a#download_image').on('click', function() {
    var url = $('#my_image').attr('src').replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    location.href = url;
});
    InformationsquelleAutor TK123
Schreibe einen Kommentar