getImageData convertir en toDataURL HTML5

Question

Y at-il un moyen de convertir les données d'image de getImageData à toDataURL en HTML5?

var pixelData = ctx.getImageData(x - (lineWidth/2), y - (lineWidth/2), lineWidth, lineWidth); 

x et y est la position du pointeur de la souris sur la toile, je crée l'application de dessin pour obtenir des données d'image à partir de toile existante et de le mettre (copie) dans la nouvelle toile. à partir de ces données d'image, je veux créer un motif avec createPattern. une idée? aidez-moi s'il vous plaît

Answer 1

Vous n'avez pas besoin de getImageData pour copier une partie de canvas1 sur canvas2.

(getImageData est lent)

il suffit de créer une toile temporaire et une partie de drawImage canvas1 sur la toile temporaire.

Ensuite, utilisez le canevas temporaire pour créer un canevas à utiliser sur canvas2.

var pattern=ctx2.createPattern(patternCanvas,'repeat'); 

C'est encore plus simple si tout canvas1 sera utilisé comme motif. Ensuite, faites ceci:

var pattern=ctx2.createPattern(canvas1,'repeat'); 

Exemple de code et une démonstration: http://jsfiddle.net/m1erickson/rKxn3/

var canvas1=document.getElementById("canvas1"); 
var ctx1=canvas1.getContext("2d"); 
var canvas2=document.getElementById("canvas2"); 
var ctx2=canvas2.getContext("2d"); 
var patternCanvas=document.createElement("canvas"); 
var patternCtx=patternCanvas.getContext("2d"); 

var img=new Image(); 
img.onload=start; 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png"; 
function start(){ 

    ctx1.drawImage(img,0,0); 

    patternCanvas.width=80; 
    patternCanvas.height=47; 
    patternCtx.drawImage(canvas1,0,0,80,47,0,0,80,47); 

    var pattern=ctx2.createPattern(patternCanvas,'repeat'); 
    ctx2.fillStyle=pattern; 
    ctx2.fillRect(0,0,canvas2.width,canvas2.height); 

}