1

HTML5キャンバスのコンテンツをPNGとして保存する機能を実装しようとしていますが、Chrome 19で失敗します。次のようなソリューションを使用しています： http ：//www.nihilogic.dk/labs/canvas2image/

Chrome 19でテストすると、次のエラーが発生します。リソースはドキュメントとして解釈されますが、MIMEタイプimage / octet-streamで転送されます： "data：image / octet-

4

3 に答える 3

1

Chrome 19 では、DATA URI を介して提供される画像の「​​名前を付けて保存」が許可されていないようです。カナリアでテストされ、正常に動作します。

于 2012-05-31T19:43:34.890 に答える
0

他に誰も答えない場合は、オクテットストリームをサーバー側のPHP処理に送信し、<iframe>これらのヘッダーで非表示を追加します

 header("Content-Disposition: attachment; filename=image".time().".png");
 header("Content-Type: image/png");
 header("Content-Transfer-Encoding: binary");
于 2012-05-30T23:14:05.273 に答える
0

Chrome 19 ではクライアント側で機能しません。すべてを試しました。PHP で簡単なサーバー側のソリューションをまとめました。

このファイルは、フォームからのデータが POST されること、および 2 つの変数があることを想定しています。

imageFileName - 「hello.png」などの拡張子を含むファイルの名前。ファイル名は小文字に変換され、すべてのスペースはアンダースコアに変換されます。必要に応じて、スクリプトでこの動作を簡単に変更できます。

formImageData - canvas.toDataURL("image/png"); を呼び出した結果。

したがって、HTML フォームは次のようになります。

<form action="saver/savePng.php" method="post">
    <input type="hidden" id="formImageFileName" name="imageFileName">
    <input type="hidden" id="formImageData" name="imageData" value="" />
    <input type="submit" class="btn btn-primary" id="saveImageButton" value="Save Image..." />
</form>

フォームを送信する前に、要素「formImageData」の値を toDataUrl() 呼び出しからのデータに更新する必要があります。

于 2012-06-22T20:38:30.640 に答える