3

iPad で使用する Web アプリケーションを作成しています。ユーザーは画像に色を付けるよう招待されます。私はこれに html5 Canvas を使用しており、ここで見つけたチュートリアルに基づいてカラーリングを行っています。最終的には、この画像をユーザーの名前とともにデータベースにアップロードしたいと考えています。

やり方は

ユーザーが色を塗り終わったら、「保存」を押して、toDataURL() を使用してキャンバスを変換します。次に、非表示のフォーム要素にデータを挿入し、フォームを送信して新しいページに移動します。そのようです：

    document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
    document.forms["form1"].submit();

ここでは、ユーザーの名前とメールアドレスを尋ねます。また、キャンバス データを新しい非表示のフォーム要素に挿入します。そのようです：

    value="<?php echo $_POST['my_hidden'];?>"

次に、このフォームを次の php ページのデータベースに送信します。キャンバス データは Blob に格納されます。

これはすべてうまくいきます。

何が問題なの

その最終ページに画像を表示しようとすると、画像に「リソースの読み込みに失敗しました」というエラーが表示されます (「kCFErrorDomainCFNetwork エラー」)。私はこのように表示しようとしています：

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var image = new Image();

    image.src = "<?php echo str_replace("\n", "", $_POST['canvas']); ?>";
    ctx.drawImage(image, 0, 0);

サーバーから取得したキャンバスデータが悪いのではないかと疑っています。だから私はこのようにそれをチェックしました：

    if ( base64_encode(base64_decode($canvas)) === $canvas){
       echo '$data is valid';
    } else {
       echo '$data is NOT valid';
    }

そして、それは実際、有効ではありません。次に、最初のフォームの後に同じ方法を使用してチェックしましたが、その時点ではすでに無効です。したがって、その非表示フィールドを介した最初の送信がそれを台無しにしているか、toDataURL() が台無しになっていると思います。

私は決して熟練したプログラマーではありませんが、ここまでやり遂げて、これを終わらせないのは嫌です。ですから、どんな助けも本当に大歓迎です！ありがとう。

4

1 に答える 1

4

データ URI の先頭を切り取って、データだけを残しておくのを忘れているようです。

var uri = canvas.toDataURL('image/png'),   // data:image/png;base64,blahblahblah
    b64 = uri.slice(uri.indexOf(',') + 1); // blahblahblah
document.getElementById('my_hidden').value = b64;
于 2013-08-21T11:15:14.230 に答える