BLOB-URL zu der Datei mit PHP

Ich versuche, eine Datei zu erstellen-Vorschau-system.

Wenn der Benutzer auf eine Schaltfläche hochladen und wählen Sie die Dateien, ich benutze die HTML5-DATEI-API, um alle Datei-Informationen, und erstellen Sie eine Miniaturansicht der Datei.

Kann der Benutzer Abbrechen der upload einige thoose-Dateien und weitere Dateien hinzuzufügen zu.

Was ich jetzt habe ist dieses:

<p><input id="blob" name="blob" type="file" size="75" multiple /></p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input id="blobtype" name="blobtype" type="text" size="20" />
<input id="bloburl" name="bloburl" type="text" size="50" />
<input id="salvar" name="salvar" type="submit" value="salvar" />
</form>
<p id="result"></p>

Und meine javascript:

function cbu(file)
{
if (window.URL){ return window.URL.createObjectURL(file);}
else if (window.webkitURL){ return window.webkitURL.createObjectURL(file);}
else if (window.createObjectURL){ return window.createObjectURL(file);}
else if (window.createBlobURL){ return window.createBlobURL(file); }
}

document.getElementById("blob").onchange = function(event)
{
var result = document.getElementById("result");
var i = 0, j = event.target.files.length;
for (i = 0; i < j; i++)
{
    var url = cbu(event.target.files[i]);
    var img = document.createElement("img");
    img.onload = function(){ }
    result.appendChild(img);
    img.src = url;
    document.getElementById("blobtype").value = event.target.files[i].type;
    document.getElementById("bloburl").value = url;
    }
};

Es genarate ein thumbnail wie dieses:

<img src="blob:b9a8e310-05b3-48ba-ba24-9ca7cf287f71">

Dieser Wert blob:b9a8e310-05b3-48ba-ba24-9ca7cf287f71 senden eine PHP-Datei, wenn der Benutzer das Formular abschicken.

Also meine Frage ist, wie kann ich mich verwandeln diese blob-url in eine Datei, so kann ich speichern Sie es in meine app ein?

Gibt es einen besseren Weg, dies zu tun?

Danke für Eure Hilfe!

InformationsquelleAutor vinigarcia87 | 2012-11-08
  1. 2

    gut, ich halte die Suche nach Lösungen und fand ich dieses: Canvas.

    Canvas-element haben die toDataUrl () - Methode gibt eine Data-URL für das Bild, das es enthält.

    So, ich halten Sie tun die gleiche Sache, aber wenn ich das Formular abschicken benutze ich folgende Funktion:

    function putImage(){
    var url = document.getElementById("img1").src; //'img1' is the thumbnail - I had to put an id on it
    var canvas = document.getElementById("MyCanvas");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        var img = new Image();
        img.src = url;
        img.onload = function () {
            //Desenha a imagem no canvas...
            ctx.drawImage(img,0,0);

            //Grava o Data URL na imagem...
            var myImage = canvas.toDataURL("image/png");
            document.getElementById("dataurl").value = myImage;
        }
    }
};

    Ich erstellen Sie noch ein element auf der Seite für Leinwand:

    <canvas id="MyCanvas">This browser or document mode doesn't support canvas</canvas>

    und noch ein element auf das Formular um die Daten zu speichern URL:

    <input id="dataurl" name="dataurl" type="text" size="50" />

    gut, jetzt kann ich alles in PHP und etwas wie das hier tun:

    if($_POST)
{
    //echo '<pre>'; print_r($_POST); echo '</pre>';

    $blob = $_POST['bloburl'];
    $type = $_POST['blobtype'];
    $data = $_POST['dataurl'];

    $contents_split = explode(',', $data);
    $encoded = $contents_split[count($contents_split)-1];
    $decoded = "";
    for ($i=0; $i < ceil(strlen($encoded)/256); $i++) {
        $decoded = $decoded . base64_decode(substr($encoded,$i*256,256)); 
    }

    $fp = fopen('imagembaixada.jpg', 'w');
        fwrite($fp, $decoded);
        fclose($fp);
    }
}

    Nun mein Bild gespeichert wird.

    Es funktioniert, sieht aber ziemlich ineffizient.

    Wenn jemand weiß, einen besseren Weg, um erstellen Sie eine Vorschau für Bilder, bevor Sie Sie hochladen, bitte sagen Sie es mir!

    InformationsquelleAutor vinigarcia87
Schreibe einen Kommentar