DrawImage utilisant toDataURL d'un canevas html5

Ce que je fais maintenant, c'est ce qui suit:

Je stocke l'état d'une toile en utilisant la méthode toDataURL et j'essaie aussi de la dessiner sur une toile en utilisant la méthode drawImage.

Voici un extrait:

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;

Je reçois l'erreur suivante dans la console:

414 (Request-URI trop grand)

Existe-t-il un moyen de dessiner une image sur la toile en utilisant uniquement la méthode toDataURL?

Le mécanisme que vous avez utilisé devrait fonctionner; Quel OS / navigateur / version est-ce que vous voyez cette erreur avec?

Quoi qu'il en soit, malgré le fait que cela devrait fonctionner, ce n'est pas le plus efficace si vous construisez des URL de données puis les restaurez dans la même session. Au lieu de cela, je suggérerais de créer une nouvelle toile non-DOM pour stocker votre état et l'utiliser pour dessiner sur la toile principale:

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