exportation de superposition de toile

Question

J'ai 2 toiles, canvas1 et canvas2. Les deux fonctionnent bien, mais je veux les mélanger pour exporter en tant qu'image. Superposition css ne fonctionne pas car il imprime 2 images. Tout point de départ? Je vous remercie.

<canvas id="canvas1" style="position:relative; float:left;border:1px solid #000 "  width="547" height="154"> 
</canvas> 

<canvas id="canvas2" style="z-index: 1; position:absolute; float:left;" width="547" height="500"> 
</canvas> 

Answer 1

Eh bien, il y a plusieurs façons d'y parvenir, et que voulez-vous dire par mélange?

Si vous voulez simplement superposer canvas2 sur canvas1, mais que vous ne voulez pas modifier les deux canevas d'origine, vous pouvez envoyer leurs données à un autre canevas, puis obtenir ces données.

méthode

à suivre:

draw canvas1 to canvas3 
draw canvas2 to canvas3 
get canvas3 image 

travail javascript:

// Make all the canvas and context variables */ 
var c1 = document.getElementById('c1'); 
var c2 = document.getElementById('c2'); 
var c3 = document.getElementById('c3'); 
var c4 = document.getElementById('c4'); 

var ctx1 = c1.getContext('2d'); 
var ctx2 = c2.getContext('2d'); 
var ctx3 = c3.getContext('2d'); 
var ctx4 = c4.getContext('2d'); 
/* */ 

// Draw square on canvas 1 
ctx1.fillRect(0,0,50,50); 

// Draw offset square on canvas 2 
ctx2.fillRect(25,25,50,50); 

// Make third image and onload function 
var img3 = new Image(); 
img3.onload = function(){ 
    // Draw this image to canvas 4 so that we know it worked 
    ctx4.drawImage(this,0,0); 
} 

// So we know when both have loaded 
var imagesLoaded = 0; 
function draw(){ 
    // increment number loaded 
    imagesLoaded++; 

    // draw this image to canvas 3 
    ctx3.drawImage(this,0,0); 

    // if the have both loaded, then... 
    if (imagesLoaded == 2){ 

    // set third image's src to the canvas 3 image 
    img3.src = c3.toDataURL(); 
    } 

} 

// First image 
var img1 = new Image(); 
// So it will draw on canvas 3 
img1.onload = draw; 
// Set the src to canvas 1's image 
img1.src = c1.toDataURL(); 


// Second image 
var img2 = new Image(); 
// So it will draw on canvas 3 
img2.onload = draw; 
// Set the src to canvas 2's image 
img2.src = c2.toDataURL(); 

Exemple de here. Cependant, si ce n'était pas ce que vous cherchiez, je suis désolé.