나는 이것이 이전 질문이며 OP가 해결책을 찾았지만 이미지와 캔버스가 이미 HTML 페이지의 일부인 경우 작동합니다.
<img id="img1" src="imgfile1.png">
<img id="img2" src="imgfile2.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>
또는, 당신은 즉석에서 이미지를로드 할 경우 :이 항목과 각각의 거대한 양을 때
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
Image img1 = new Image();
Image img2 = new Image();
img1.onload = function() {
canvas.width = img1.width;
canvas.height = img1.height;
img2.src = 'imgfile2.png';
};
img2.onload = function() {
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0);
context.globalAlpha = 0.5; //Remove if pngs have alpha
context.drawImage(img2, 0, 0);
};
img1.src = 'imgfile1.png';
</script>
나도 같은 솔루션을 찾고있었습니다, 그냥 이해가 말씀을 전합니다 그 중 T 셔츠 (색상) 또는 디지털 포스터 (배경색)와 같은 사용자 지정 옵션이 두 개 이상 있습니다. 이렇게하면 항목을 나열하는 데 많은 시간을 절약 할 수 있습니다. – bard