使用 html5 画布的 toDataURL 绘制图像

发布于 2024-11-02 12:52:09 字数 436 浏览 1 评论 0原文

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

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

原文

What I am doing now is the following:

I am storing the state of a canvas using the toDataURL method and I am also trying to draw it on a canvas using the drawImage method.

Here is a snippet:

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;

I am getting the following error in the console:

414 (Request-URI Too Large)

Is there a way to draw an image on the canvas using only the toDataURL method?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鸠魁 2024-11-09 12:52:09

您使用的机制应该有效；您在什么操作系统/浏览器/版本上看到此错误？

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

The mechanism you have used should work; what OS/browser/version are you seeing this error with?

Anyhow, despite the fact that this should work, it is not the most efficient if you are constructing data URLs and then restoring them in the same session. Instead, I would suggest creating a new not-in-DOM canvas to store your state, and use that to draw to the main canvas:

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);
}

回复收藏 0 原文

~没有更多了~