캡쳐 한 스크린 샷을 편집 한 후 저장하십시오.

Question

사용자가 현재 화면의 스냅 샷을 찍을 수있는 기능을 구현하고 수정/낙서/기타 등의 주석을 달 수 있으며 이후에 이메일로 보낼 수있는 기능을 구현하고 싶습니다. 내 응용 프로그램은 ios뿐만 아니라 안드로이드 지원을 위해 phonegap을 사용합니다. 하지만 주로 javascript/jquery로 구성됩니다.

1. 는
2. 하는 sketch.js
3. 에서 제공하는 프리 핸드 도구를 사용하여 해당 캔버스와 상호 작용하는 사용자를 활성화합니다 (html2canvas 라이브러리의 도움으로) 캔버스에 현재 HTML을 저장 :

   지금까지 내가 달성 할 수 있어요 캔버스의 사용자 정의 위치에 텍스트 노트 추가

4. phonegap의 email Composer Plugin

을 사용하여 새 전자 메일 팝업을 엽니 다.

1 : 제 1 층 html2canvas 통해 실제 촬영 된 스냅 샷을 도시한다 상호 작용을 사용자에게 느끼게 제공하기 위해

는 I 캔버스 레이어를 구현 하였다. 이 캔버스 (capturedCanvas)에 내 스냅 샷을 표시하려면 캔버스의 배경 이미지를 라이브러리를 통해 가져온 이미지로 설정합니다. 코드는 다음과 같습니다.

$('.myClass').html2canvas({ 

       onrendered: function(canvas) { 

        var capturedCanvas = document.getElementById('capturedImageView'); 
        capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')'; 

       } 
     }); 

2 및 3 : 사용자가 자유형 도구 또는 텍스트 도구를 선택했는지 여부에 따라 위의 레이어가 토글됩니다.

모든 것이 잘 작동하지만 사용자가 별도의 캔버스와 상호 작용을 마쳤을 때 이메일에 첨부 할 수 있도록 3 개의 캔버스를 하나의 이미지로 가져와야합니다. context.drawImage을 사용하여 레이어 2와 레이어 3을 연결할 수 있지만 어떻게 든 html2canvas에서 가져온 내 실제 스냅 샷은 최종 이미지에 포함되지 않습니다.

내 마지막 스냅 샷은 다음과 같습니다

는

이 문제에 대한 통찰력을 제공하십시오.

Answer 1

표시되지 않습니다 스냅 샷을 html2canvas 이유는이 때문에 수 있습니다 :

capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')'; 

이 같은 배경을 설정하면 당신은 단지 일반적인 요소가 아닌 캔버스 자체의 내용으로 캔버스에 영향을 미칠 것입니다. 이것은 그 위에있는 픽셀의 일부로 등록되지 않습니다.

finalCanvasContext.drawImage(htmlCanvas, 0, 0); 
finalCanvasContext.drawImage(layer1canvas, 0, 0); 
finalCanvasContext.drawImage(layer2canvas, 0, 0); 

나 : 당신이해야 할 일은

는 drawImage()에 html2canvas의 결과뿐만 아니라 상 (예를 들어) 최종 캔버스

$('.myClass').html2canvas({ 

    onrendered: function(canvas) { 

     var capturedCanvas = document.getElementById('capturedImageView'); 
     var ctx = capturedCanvas.getContext('2d'); 
     ctx.drawImage(canvas, 0, 0); 

     //.. continue to allow draw etc. 
    } 
}); 

(I 모르는 당신의 다른 코드는 표시하지 않으므로 필요에 따라 조정하십시오).