在画布内隐藏/显示图像

Question

我正在制作一个页面，希望人们能够在其中重叠图像，然后将它们上传到我的服务器。

我已经构建了上传页面，并在画布中放置了两张测试图像。唯一的问题是能够通过按钮或复选框隐藏/显示这两个图像。

我在这里上传了一个测试页面：http://kaosmos.no/bokbodentest2/upload.html

这是我的画布代码：

<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>

还有 CSS：

canvas {
border: solid;
overflow: hidden;
}

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

.bilder {
display: none;
}

显示：无；在“bilder”类中，图像不会在画布外可见。如何制作隐藏/显示这些图像的功能？

非常感谢任何帮助！

Answer 1

由于在画布上绘制图像时，它不再链接到 DOM 中的原始元素，因此您希望将其隐藏在画布上，因此每次更改输入时都需要重新绘制画布，不调用相关的 context.drawImage 函数。大致如下：

<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>