캔버스 요소에 마스크와 배경을 추가하는 방법

Question

배경 이미지가있는 png로 마스크 된 이미지를 만들려고합니다. 난 단지 마스크 이미지를 넣을 때 잘 작동하지만 난 배경 이미지를 추가하는 경우 전면 이미지가 나는 이것이 매우 일반적인 문제입니다 추측하지만 웹에 관련된 아무것도 찾을 수 없습니다 더 이상

<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    var bg = new Image(); 
    var front = new Image(); 
    var mask = new Image(); 

    bg.src = 'img/background.jpg'; 

    bg.onload = function() { 
    front.src = "img/tobemasked.jpg"; 
    }; 

    front.onload = function() { 
    mask.src = "img/mask.png"; 
    } 

    mask.onload = function() { 
    display(); 
    } 

    function display() { 
    context.drawImage(bg, 0, 0); // it works if i remove this line 
    context.drawImage(tmpMask, 0, 0); 
    context.globalCompositeOperation = "source-in"; 
    context.drawImage(front, 0, 0); 
    } 
</script> 

을 마스크되지 않는다 .

도움 주셔서 감사합니다.

Answer 1

는 전면 이미지를 마스크 사용하고있는 "소스에서"작업은 다음과 같이 여기 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#gcop-source-in 정의됩니다

디스플레이 소스 이미지와 대상 이미지가 모두 불투명 곳 소스 이미지. 투명성을 다른 곳에 표시하십시오.

배경 이미지를 그리지 않으면 대상 이미지는 마스크로만 구성되며 투명한 픽셀을 사용합니다. 앞면 이미지는 마스크가 불투명 한 경우에만 표시됩니다. 나는 이것이 당신이 원하는 것임을 이해합니다.

그러나 배경 이미지를 그린 후에도 대상 이미지에 투명한 픽셀이 없으며 완전히 불투명합니다. 그리고 전면 이미지를 그릴 때 모든 부분이 표시됩니다.

이 내가 당신이하려는 생각을 달성 할 것 :

context.drawImage(mask, 0, 0); 
context.globalCompositeOperation = "source-in"; 
context.drawImage(front, 0, 0); 
context.globalCompositeOperation = "destination-atop"; 
context.drawImage(bg, 0, 0); 

전면 이미지가 먼저 마스크 처리됩니다. 그 후에도 투명한 픽셀이 있습니다. 배경 이미지는 "destination-atop"옵션을 사용하여 투명 영역에 그려집니다 (이전 링크 참조).

나는 이것이 가장 간단한 방법이라고 생각합니다. 다른 옵션은 서로 다른 레이어 위에 여러 캔버스 요소를 사용하여 레이어를 만들거나 캔버스에서 레이어를 사용할 수있는 자바 스크립트 라이브러리를 사용하는 것입니다.