한 캔버스에서 다른 캔버스로 사용자 선택 복사

Question

canvasA에서 간단한 선택 영역을 구현하고 영역을 canvasB로 복사하려고합니다. 선택 영역이 작동하지만 복사 된 영역의 그리기가 필요하지 않습니다. 일하다. 아이디어는 사용자가 영역을 선택한 다음 해당 선택이 선택을 마쳤을 때 다른 캔버스에 표시된다는 것입니다. 예를 들어 마우스 클릭, 사각형 영역 드래그, 마우스 업 (복사가 나타납니다)

고백합니다. 프런트 엔드 개발자는이 개념이 어떻게 작동하는지에 대해 명백한 것을 놓치고 있다는 것을 두려워합니다. 개념을 증명하고 현재 기본을 이해하기 위해 무언가를 함께 노크하려고 할뿐입니다.

JSFiddle가 여기에있다 - http://jsfiddle.net/bw4gw83a/2

HTML

<canvas id="original" width=300 height=300></canvas> 
<canvas id="copybit" width=300 height=300></canvas> 

자바 스크립트

var original = document.getElementById("original"); 
var CTXoriginal = original.getContext("2d"); 
var copybit = document.getElementById("copybit"); 
var CTXcopybit = copybit.getContext("2d"); 


var background = new Image(); 
background.src = "https://i.imgur.com/F1pJYM1.jpg"; 

background.onload = function(){ 
    CTXoriginal.drawImage(background, 0, 0) 
} 

var imageData = CTXoriginal.getImageData(10, 10, 100, 100); 
CTXcopybit.putImageData(imageData,0,0); 

모든 포인터에 감사드립니다.

si

Answer 1

다음 가이드가 도움이 될 수 있습니다.

http://www.i-programmer.info/programming/graphics-and-imaging/2078-canvas-bitmap-operations-bitblt-in-javascript.html

그것은 당신의 소스 인 경우

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 

를 사용하여 이미지의 일부를 그릴 수 언급, d는 곳입니다.

여기에서 클릭 및 드래그 위치를 결정하여 좌표 및 너비/높이를 계산하면됩니다.

설명하기 위해 피들을 업데이트했습니다. 매우 원유 적이므로 이미지 왼쪽 상단의 한 번 클릭하고 오른쪽 하단의 다른 곳을 다시 클릭하십시오.

http://jsfiddle.net/treerock/1zpc8fz0/