한 캔버스의 내용을 다른 캔버스에 로컬로 복사하는 방법

한 캔버스의 내용을 다른 캔버스에 로컬로 복사하는 방법

---

한 캔버스의 모든 내용을 복사하여 클라이언트 쪽의 다른 모든 캔버스로 옮기고 싶습니다. 나는 이것을 구현 하기 위해 canvas.toDataURL()and context.drawImage()메소드를 사용할 것이라고 생각 하지만 몇 가지 문제가 있습니다.

내 솔루션은 Canvas.toDataURL()이것을 Javascript의 Image 객체에 가져 와서 저장 한 다음 context.drawImage()메소드를 사용하여 다시 배치하는 것입니다.

그러나이 toDataURL메서드는 "data:image/png;base64,"앞에 64 비트로 인코딩 된 태그를 반환 한다고 생각 합니다. 이것은 유효한 태그가 아닌 것 같습니다 (항상 일부 RegEx를 사용하여 이것을 제거 할 수 있음). "data:image/png;base64,"하위 문자열 뒤에 유효한 64 비트 인코딩 된 문자열 이 유효한 이미지입니까? 말할 수 image.src=iVBORw...ASASDAS있고 이것을 캔버스에 다시 그릴 수 있습니까 ?

관련 문제를 살펴 봤습니다. base64를 사용하여 한 캔버스에서 다른 캔버스로 캔버스 이미지 표시

그러나 해결책이 정확하지 않은 것 같습니다.

---

실제로 이미지를 만들 필요는 없습니다. 뿐만 아니라 객체를 drawImage()받아들 입니다.CanvasImage

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

ImageData객체 나 Image요소를 사용하는 것보다 훨씬 빠릅니다 .

참고 sourceCanvas수 있습니다 HTMLImageElement , HTMLVideoElement , 또는 HTMLCanvasElement . 이 답변 아래의 주석에서 Dave 가 언급했듯이 캔버스 그리기 컨텍스트를 소스로 사용할 수 없습니다 . 작성된 캔버스 요소 대신 캔버스 그리기 컨텍스트가있는 경우 아래의 컨텍스트에 원래 캔버스 요소에 대한 참조가 context.canvas있습니다.

이것이 왜 캔버스를 복제하는 유일한 방법인지 설명하기위한 jsPerf입니다 : http://jsperf.com/copying-a-canvas-element

---

@ robert-hurst는 더 깔끔한 접근 방식을 가지고 있습니다.

그러나이 솔루션은 실제로 복사 후 데이터 URL의 사본을 원할 경우에도 사용될 수 있습니다. 예를 들어 많은 이미지 / 캔버스 작업을 사용하는 웹 사이트를 구축하는 경우입니다.

    // select canvas elements
    var sourceCanvas = document.getElementById("some-unique-id");
    var destCanvas = document.getElementsByClassName("some-class-selector")[0];

    //copy canvas by DataUrl
    var sourceImageData = sourceCanvas.toDataURL("image/png");
    var destCanvasContext = destCanvas.getContext('2d');

    var destinationImage = new Image;
    destinationImage.onload = function(){
      destCanvasContext.drawImage(destinationImage,0,0);
    };
    destinationImage.src = sourceImageData;

참고 URL : https://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-to-another-canvas-locally