Ausblenden/Anzeigen von Bildern in Canvas

Question

Ich mache eine Seite, wo ich möchte, dass die Leute Bilder überlagern und dann auf meinen Server hochladen können.

Ich habe die Seite zum Hochladen erstellt, und ich habe zwei Testbilder in eine Leinwand eingefügt. Das einzige Problem ist es, diese beiden Bilder über eine Schaltfläche oder ein Kontrollkästchen ausblenden oder anzeigen zu können.

ich eine Testseite hier hochgeladen haben: http://kaosmos.no/bokbodentest2/upload.html

Dies ist mein Code für die Leinwand:

<input type="checkbox"/>Check to hide img1 
<input type="checkbox"/>Check to hide img2 


<img class="bilder" id="img1" src="test1.png"> 
<img class="bilder" id="img2" src="test2.png"> 
<canvas id="canvas"></canvas> 

<script type="text/javascript"> 
var img1 = document.getElementById('img1'); 
var img2 = document.getElementById('img2'); 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

canvas.width = img1.width; 
canvas.height = img1.height; 

context.globalAlpha = 1.0; 
context.drawImage(img1, 0, 0); 
context.globalAlpha = 0.5; //Remove if pngs have alpha 
context.drawImage(img2, 0, 0); 


</script> 

und CSS:

canvas { 
border: solid; 
overflow: hidden; 
} 

canvas img { 
width: 600px; 
position: absolute; 
mix-blend-mode: multiply; 
} 

.bilder { 
display: none; 
} 

Das display: none; In der "Bilder" -Klasse ist so, dass die Bilder außerhalb der Leinwand nicht sichtbar sind. Wie mache ich eine Funktion zum Ausblenden/Anzeigen dieser Bilder?

Jede Hilfe wird sehr geschätzt!

Answer 1

Da, wenn ein Bild auf die Zeichenfläche gezeichnet wird, ist es nicht mehr mit dem ursprünglichen Element im DOM verknüpft. Sie möchten es auf der Zeichenfläche ausblenden. Daher müssen Sie die Zeichenfläche jedesmal neu zeichnen, wenn eine Eingabe erfolgt geändert, nicht die relevante context.drawImage Funktion aufrufen. Etwas in diesen Zeilen:

<input type="checkbox" onchange="draw()"/>Check to hide img1 
<input type="checkbox" onchange="draw()"/>Check to hide img2 


<img class="bilder" id="img1" src="test1.png"> 
<img class="bilder" id="img2" src="test2.png"> 
<canvas id="canvas"></canvas> 

<script type="text/javascript"> 
var img1 = document.getElementById('img1'); 
var img2 = document.getElementById('img2'); 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var inputs = document.querySelectorAll('input[type="checkbox"]'); 

canvas.width = img1.width; 
canvas.height = img1.height; 
function draw(){ 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.globalAlpha = 1.0; 
    if(inputs[0].checked){ 
     context.drawImage(img1, 0, 0); 
    } 
    context.globalAlpha = 0.5; //Remove if pngs have alpha 
    if(inputs[1].checked){ 
     context.drawImage(img2, 0, 0); 
    } 
} 

</script>