Question

我现在正在做的事情如下：

我使用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（Request-URI Too Large）

有没有办法只使用toDataURL方法在画布上绘制图像？

Answer 1

你使用的机制应该有效;你看到这个错误的OS /浏览器/版本是什么？

无论如何，尽管这应该有效，但如果您构建数据URL然后在同一会话中恢复它们，则效率最高。相反，我建议创建一个新的not-in-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);
}

使用html5画布的toDataURL绘制drawImage

1 个答案: