5

HTML5 Canvas 要素があります。キャンバス イメージをサーバーに送信する必要があります。私が試したすべての PC ブラウザーで問題なく動作しますが、iOS Safari はクラッシュし、ログ ファイルにメモリ不足エラーが記録されます。キャンバス画像は950x323のPNGなので500KB近くあります。これが私の送信コードの簡略版です。

$('#imageJSON').val(JSON.stringify(myCanvas)); //I wrote other JSON stringify code. It works
var d = myCanvas.toDataURL();
$('#imageData').val(d);
$('#myForm').submit();

Safari は送信を開始しますが、送信の数秒後にクラッシュします。サーバーはリクエストで他のデータを取得しますが、imageData は完全ではありません。フォーム enctype を「multipart/form-data」に変更しようとしましたが、それは役に立ちませんでした。

4

2 に答える 2

3

WebKit for Mac にメモリのバグがあることが判明しました。バグを webkit.org https://bugs.webkit.org/show_bug.cgi?id=84168に送信しました。別の解決策は、標準のフォーム送信の代わりに AJAX 経由でデータを送信することです。

$('#imageJSON').val(JSON.stringify(myCanvas)); 
var d = myCanvas.toDataURL();
$('#imageData').val(d);
var data = $(form).serialize();
$.post(ajaxurl, data, function(r) {
    // done. handle response. remove loading overlay.
});

うまくいきましたが、それはちょっとした痛みでした。フォームの送信後にブラウザを適切なページに誘導するためにjavascript（コードは示していません）を使用しています。標準のフォームの送信をシミュレートしていますが、ユーザーにとってはスムーズではありません。

于 2012-05-02T17:34:06.497 に答える
1

キャンバス画像をチャンクに分割するアルゴリズムを作成しようとしましたか? たとえば、キャンバス全体で toDataURL() を呼び出すのではなく、キャンバスを 10 ～ 20 個の異なる部分に分割できます。各ピースを独自の個別の画像として保存します。キャンバスをロードしたら、各ピースをキャンバスに組み立てるだけです。これは、データ パケットやビデオ バッファリングと同様の概念です。

于 2012-04-24T19:37:47.667 に答える