2014-04-10 6 views
0

코드를 통해 배경을 동적으로 설정하는 캔버스 요소가 있습니다. 그런 다음 Sketch 라이브러리 (http://intridea.github.io/sketch.js/)를 사용하여 캔버스에 그립니다. -이 모든 것이 효과가 있습니다.배경 이미지가있는 캔버스를 다운로드하는 방법은 무엇입니까?

그러나 canvas.toDataURL ("image/png")을 사용하여 캔버스를 변환하려고하면 캔버스 드로잉을 저장할 수 있지만 배경을 저장하지는 않습니다. - 나는 이것이 설계된대로 작동하고 있음을 이해합니다.

둘을 병합 할 방법이 있습니까? 드로잉을 마친 후에 이미지 src를 배경 src로 설정할 수 있다는 아이디어를 가지고 놀고있었습니다. 그러나 내보낼려고했는데, 확실하지 않습니다. 이 경험이있는 사람이 있습니까?

+0

배경을 어떻게 설정합니까? 어쩌면 당신은 캔버스에 나머지를 그리기 전에 그림을 그려야합니다. – vtortola

+0

jQuery의 배경 URL 속성을 통해 설정하고 있습니다. –

답변

0

배경을 캔버스에 어떻게 추가하고 있습니까? CSS로 배경 이미지로 설정 하시겠습니까? 아니면 이미지를 캔버스에 직접 추가 하시겠습니까? 나는 here 예제와 같이 후자를 할 필요가 있다고 생각합니다.

+0

jQuery background url 속성을 통해 설정하고 있습니다. EDIT : 이미지를 그리기 시작을 클릭하면 이미지를 지우고 드로잉을 시작하므로 배경 URL 경로로 이동하게됩니다. –

0

발견 한 것처럼 캔버스와 배경은 별도로 관리되며 toDataURL도 배경을 캡처하지 않습니다.

캔버스 합성을 사용하여 배경을 스케치와 결합 할 수 있습니다.

'도착 오버'합성 모드를 사용하면 스케치

context.globalCompositeOperation="destination-over"; 

context.drawImage(backgroundImage,0,0); 
이제 배경 픽셀이 뒤에 스케치 그려왔다

모두가 toDataURL으로 캡처됩니다 뒤에 배경 을의 drawImage하게됩니다.

관련 문제