drawImage使用html5画布的toDataURL [英] drawImage using toDataURL of an html5 canvas

问题描述

我现在做的是以下：

我使用toDataURL方法存储画布的状态，我也试图绘制在画布上使用drawImage方法。

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.

这是一个代码片段：

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太大）

414 (Request-URI Too Large)

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

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

推荐答案

你使用的机制应该工作;什么操作系统/浏览器/版本，你看到这个错误？

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

无论如何，尽管事实，这应该工作，它不是最有效的，如果你构造数据URL然后在同一会话中恢复它们。相反，我建议创建一个新的非DOM画布来存储您的状态，并使用它来绘制到主画布：

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

这篇关于drawImage使用html5画布的toDataURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！