3

ファイルプレビューシステムを作成しようとしています。

ユーザーがアップロードボタンをクリックしてファイルを選択すると、HTML5 FILE APIを使用してすべてのファイル情報を取得し、ファイルのサムネイルを作成します。

ユーザーは、これらのファイルの一部のアップロードをキャンセルして、さらにファイルを追加することもできます。

私が今持っているのはこれです：

<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>

そして私の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;
    }
};

次のようなサムネイルが生成されます。

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

この値blob:b9a8e310-05b3-48ba-ba24-9ca7cf287f71は、ユーザーがフォームを送信したときにPHPファイルに送信されます。

だから私の質問は、このblob URLをファイルに変換して、アプリに保存できるようにするにはどうすればよいですか？

これを行うためのより良い方法はありますか？

お手伝いありがとうございます！

4

1 に答える 1

2

さて、私は解決策を探し続け、これを見つけました：Canvas.

Canvas 要素には、含まれる画像のデータ URL を返す toDataUrl() メソッドがあります。

だから私は同じことを続けますが、フォームを送信するときは次の関数を使用します:

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;
        }
    }
};

canvas のページにもう 1 つの要素を作成します。

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

データ URL を保存するためのフォーム上のもう 1 つの要素:

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

さて、これですべてを PHP で取得して、次のようにすることができます。

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);
    }
}

これで私の画像が保存されました。

機能しますが、かなり非効率に見えます。

アップロードする前に画像のプレビューを作成するより良い方法を誰かが知っている場合は、教えてください!

于 2012-11-08T17:47:18.093 に答える