콘텐츠로 HTML5 캔버스 요소를 복제하는 방법은 없나요?

콘텐츠로 HTML5 캔버스 요소를 복제하는 방법은 없나요?

---

그려진 모든 콘텐츠로 캔버스 요소 의 깊은 복사본 을 만드는 방법이 있습니까?

---

실제로 캔버스 데이터를 복사하는 올바른 방법은 이전 캔버스를 새 빈 캔버스로 전달하는 것입니다. 이 기능을 사용해보십시오.

function cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //return the new canvas
    return newCanvas;
}

getImageData 사용은 캔버스 복사가 아닌 픽셀 데이터 액세스를위한 것입니다. 그것으로 복사하는 것은 브라우저에서 매우 느리고 어렵습니다. 피해야합니다.

---

전화해도됩니다

context.getImageData(0, 0, context.canvas.width, context.canvas.height);

ImageData 객체를 반환합니다. 여기에는 모든 픽셀의 rgb 및 투명도 값을 포함하는 CanvasPixelArray 유형의 data 라는 속성이 있습니다 . 이러한 값은 캔버스에 대한 참조가 아니므로 캔버스에 영향을주지 않고 변경할 수 있습니다.

요소의 사본도 원하는 경우 새 캔버스 요소를 만든 다음 모든 속성을 새 캔버스 요소에 복사 할 수 있습니다. 그 후에는

context.putImageData(imageData, 0, 0);

ImageData 개체를 새 캔버스 요소에 그리는 메서드입니다.

HTML Canvas에서 getPixel에 대한 자세한 내용은이 답변을 참조하십시오 . 픽셀 조작에.

이 mozilla 기사도 유용 할 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

참조 URL : https://stackoverflow.com/questions/3318565/any-way-to-clone-html5-canvas-element-with-its-content