2

私が今していることは次のとおりです。

toDataURLメソッドを使用してキャンバスの状態を保存しています。また、drawImageメソッドを使用してキャンバスに描画しようとしています。

スニペットは次のとおりです。

var lastState = states[10]; //states is an array that saves all the toDataURL of the canvas
var permCtx = canvas.getContext('2d');
var img = new Image();
img.onload=function(){
  permCtx.drawImage(img,0,0);
}
img.src=lastState;

コンソールで次のエラーが発生します。

414（リクエスト-URIが大きすぎます）

toDataURLメソッドのみを使用してキャンバスに画像を描画する方法はありますか？

4

1 に答える 1

2

使用したメカニズムが機能するはずです。このエラーが表示される OS/ブラウザ/バージョンは何ですか?

とにかく、これが機能するという事実にもかかわらず、データ URL を構築してから同じセッションでそれらを復元する場合は、最も効率的ではありません。代わりに、新しい非 DOM キャンバスを作成して状態を保存し、それを使用してメイン キャンバスに描画することをお勧めします。

var states = [];
function saveState(ctx){
  var c = document.createElement('canvas');
  c.width  = ctx.canvas.width;
  c.height = ctx.canvas.height;
  c.getContext('2d').drawImage(ctx.canvas,0,0);
  states.push(c);
  return c;
}

function restoreState(ctx,idx){
  var off = idx==null ? states.pop() : states[idx];
  ctx.drawImage(off,0,0);
}
于 2011-04-18T02:30:12.467 に答える