Dekodierung einer Leinwand todataURL

Ich habe Schwierigkeiten bei der Verwendung von Daten erstellt, die mit Leinwand todataurl () - Methode. Derzeit mein code sendet die resultierenden Daten an mein php-server nutzt die file_put_contents () - Methode eine Datei zu erstellen, um die Daten zu speichern. Wenn ich jetzt geschnitten und fügen Sie die resultierende Kauderwelsch aus der Datei in ein image-tag src funktioniert es einwandfrei und zeigt so richtig, ich nehme also alles ist peachy.

Aber ich halten Sie in Probleme laufen, wenn ich versuche, den code in JS. Ich habe versucht die php base64_decode-Methode, aber immer currupt-Dateien. Ich fand diesen code:

<?php
  $encodedData = str_replace(' ','+',$encodedData);
  $decocedData = base64_decode($encodedData);

noch currupted Dateien. Idealerweise würde ich gern ein .png-Datei mit, aber ich würde dich für nur die Verarbeitung der Daten-Datei wieder in JS. Jede Hilfe sehr geschätzt.

Sie müssen einfach nur Lesen Sie den MIME-Typ (wahrscheinlich behoben/bekannt) und die Kodierung (wahrscheinlich keiner), die Daten zu interpretieren, die standard-Base64. Es werden keine Leerzeichen ersetzt werden, wenn Sie URL-kodiert die Eingabe früher. PHP-FileUpload hat einen DataUriUpload Komponente der tut all dies automatisch. Es ist dokumentiert hier.

InformationsquelleAutor joel | 2011-09-03

  1. 13

    Es scheint, haben Sie, um loszuwerden, der header, vorangestellt, um die Bilddaten durch die toDataURL() Funktion.
    Auf der client-Seite kann man ausziehen, den header so:

    ..
var data=canvas.toDataURL();
var output=data.replace(/^data:image\/(png|jpg);base64,/, "");
//now send "output" to the server
..

    Auf der server-Seite verwenden:

    <?php
    $decocedData = base64_decode($encodedData);
?>
    Das war hilfreich, hier ist, was ich am Ende tun, wenn jemand braucht, das gleiche zu tun in der Zukunft: $backGround = substr($hintergrund, 22); $hintergrund = str_replace(' ','+',$hintergrund); $hintergrund = base64_decode($hintergrund); file_put_contents("currentBG1.png", $hintergrund);
    hinzufügen müssen, um jpeg zu dem regulären Ausdruck: var output=Daten.replace(/^data:image\/png|jpg|jpeg);base64,/, "");

    InformationsquelleAutor stewe

  2. 3

    In java-script senden, das Ergebnis aus canvas.toDataURL() auf diesen Browsern, als Unterstützung, diese Methode mit der default-Typ "image/png".

    var imageInfo = canvas.toDataURL();
//now send "imageInfo" to the server

    Direkten Weg zum erstellen der png-Datei:

    <?php
$imageInfo = imageInfoFromBrowser(); //Your method to get the data
$image = fopen($imageInfo, 'r');
file_put_contents("fileName.png", $image);
fclose($image);
?>

    Habe ich diese Arbeit in PHP 5.3 /Windows, für die anderen version, überprüfen Sie bitte.

    Bilddaten Probe für die Prüfung auf PHP.

    $imageInfo = "data:image/png;base64,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"
    Wenn dies nicht für Sie, bitte posten Sie Ihre PHP-Umgebung. Danke.
    canvas.toDataUrl()... was ist das ?
    canvas.toDataUrl() verwendet wird, zum Beispiel auf fabric.js. Sie können Ihre Leinwand per JavaScript var imageInfo = document.getElementById("yourid").toDataURL(); oder via JQuery var imageInfo = $("#yourid").toDataURL(); Diese Lösung geschrieben von @DanielDeLeón funktioniert wie ein Charme. Danke,
    Ich denke, das sollte höher sein. Scheint der richtige Weg, es zu tun.

    InformationsquelleAutor Daniel De León

  3. 2

    Ein weiterer wichtiger Hinweis ist, müssen Sie zum konvertieren von Leerzeichen in Pluszeichen. Wenn Sie das nicht tun, werden die entschlüsselten Daten beschädigt ist:

    $encodedData = str_replace(' ','+',$encodedData);
$decocedData = base64_decode($encodedData);

    Lesen Sie mehr auf http://www.php.net/manual/en/function.base64-decode.php

    InformationsquelleAutor hiddentstones

  4. 0

    Anderen Lösungen haben bei mir nicht funktioniert.

    Dies funktioniert:

    //image sample
$baseFromJavascript = "data:image/png;base64,BBBFBfj42Pj4";

//remove the part that we don't need from the provided image and decode it
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $baseFromJavascript));

    InformationsquelleAutor lost in binary

Schreibe einen Kommentar