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

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

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

그러나 toDataURL메서드가 "data:image/png;base64,"앞에 붙은 64 비트 인코딩 태그를 반환 한다고 생각 합니다. 이것은 유효한 태그가 아닌 것 같습니다 (항상 RegEx를 사용하여 이것을 제거 할 수 있음). 그러나 64 비트 인코딩 문자열이 "data:image/png;base64,"하위 문자열 뒤에 유효한 이미지입니까? 이라고 말하고 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는 더 깔끔한 접근 방식을 가지고 있습니다.

그러나이 솔루션은 복사 후 실제로 Data 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;