drawImage используя toDataURL холста html5 - PullRequest
Новая
       8

drawImage используя toDataURL холста html5

2 голосов
/ 18 апреля 2011

Что я сейчас делаю, так это:

Я сохраняю состояние холста с помощью метода 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?

1 Ответ

2 голосов
/ 18 апреля 2011

Механизм, который вы использовали, должен работать;В какой ОС / браузере / версии вы видите эту ошибку?

В любом случае, несмотря на то, что это должно работать, это не самый эффективный способ, если вы создаете 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);
}
...