使用 html5 画布的 toDataURL 绘制图像答案

【问题标题】：drawImage using toDataURL of an html5 canvas使用 html5 画布的 toDataURL 绘制图像
【发布时间】：2011-08-07 13:04:15
【问题描述】：

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

我正在使用 toDataURL 方法存储画布的状态，并且我还尝试使用 drawImage 方法在画布上绘制它。

这是一个sn-p：

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 方法在画布上绘制图像？

【问题讨论】：

错误是在drawImage 行还是其他行？
（或者你能不能给我们states[10]的内容让我们自己看看？）
我的猜测：也许这是 IE8，它有一个已知的 32kB 限制。相关：stackoverflow.com/questions/695151/…

标签： javascript html canvas drawimage

【解决方案1】：

您使用的机制应该可以工作；您看到此错误的操作系统/浏览器/版本是什么？

无论如何，尽管这应该可行，但如果您正在构建数据 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);
}

【讨论】：