HTML5 캔버스에서 여러 이미지 자르기

Question

HTML5 캔버스에서 이미지 조작으로 작업하고 있습니다. 내 캔버스에는 이미지 수가 많습니다. 이미지를 개별적으로 자르고 싶을 때. 그러나 모양을 만들고 clip() 함수를 사용하여 하나의 이미지를 자르면 잘 동작합니다. 그러나 같은 방법으로 다른 이미지를 자르려고 할 때 문제가 발생합니다. 캔버스가 이전 모양을 저장 했으므로 캔버스가 새 모양과 연결되어 그에 따라 두 번째 이미지를 잘라냅니다. 이전 모양을 파괴하고 싶습니다. 이전에 클리핑 된 이미지가 있기 때문에 clearRect()을 사용하여 캔버스를 지울 수 없습니다. 링크 드래그에서 캔버스 미리 정의 된 레이어에 이미지를

Demo Problem

및 주변의 이미지를 드래그 :

링크를 심판하시기 바랍니다. 국경 밖으로 나가려고하면 이미지가 제대로 잘리는 것을 분명히 알 수 있습니다.

이제 다른 이미지를 다른 상자의 캔버스로 드래그하십시오. 이제 클리핑이 제대로 작동하지 않음을 알 수 있습니다. 내가 스크립트에서 한 일을 여기

: 여기

JS Script

는 JSFiddle 링크

JSFiddle Link

당신이 날이 문제를 해결하는 데 도움이 할 수있는? 이전 모양을 지우는 또 다른 방법을 찾는다면 도움이 될 것입니다.

미리 감사드립니다.

Answer 1

본인은 직접 문제를 해결했습니다. 캔버스는 다중 이미지 클립 옵션을 제공하지 않습니다. 따라서 캔버스에 여러 이미지를 클립하려면 고유 한 클립 기능을 사용해야합니다. 선택 영역 밖의 캔버스의 영역을 clearRect()으로 지우십시오. 각 이미지에 대해이 과정을 반복하면 작업이 완료됩니다!

솔루션 링크 :

Solution Demo

JS 스크립트 링크 :

JS Script

감사합니다.

Answer 2

찾을 수있는 가장 좋은 해결책은 숨겨진 캔버스를 사용하여 그 위에 그려서 기본 캔버스에 putImageData 메서드를 사용하는 것입니다.

var c = document.getElementById("myCanvas"); 
 
var ctemp = document.getElementById("myCanvasTemp"); 
 

 
var ctx = c.getContext("2d"); 
 
var ctxTemp = ctemp.getContext("2d"); 
 

 
ctxTemp.fillStyle = "red"; 
 
ctxTemp.fillRect(10, 10, 50, 50); 
 

 
ctxTemp.fillStyle = "blue"; 
 
ctxTemp.fillRect(20, 20, 50, 50); 
 

 
function copy() { 
 
    var imgData = ctxTemp.getImageData(10, 20, 50, 10); 
 
    ctx.putImageData(imgData, 10, 10); 
 
}

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 

 
<canvas id="myCanvasTemp" width="300" height="150" style="display:none;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 

 
<br /><br /> 
 
<br /> 
 
<button onclick="copy()">Copy</button>