Save captured screenshot after editing

Question

I want to implement functionality in my application in which the user can take a screenshot of the current screen and annotate it (change / scribble / etc) and then send it by email. My app uses phonegap for ios as well as android support. But basically it consists of javascript / jquery.

So far, I can achieve:

• Saving current html on canvas (using html2canvas )
• Allow user to interact with this canvas using the hand tool provided by sketch.js
• Add text notes to a custom location anywhere on the canvas
• Open a new popup using phonegap email Composer Plugin

To provide the user with interactivity, I implemented canvas layers:

1: The first layer will show the actual snapshot captured via html2canvas. To show my picture on this canvas (captureCanvas), I set the background image of the canvas to the image received through the library. The code is as follows:

$('.myClass').html2canvas({ onrendered: function( canvas ) { var capturedCanvas = document.getElementById('capturedImageView'); capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')'; } }); 

2 and 3: the layers above it will switch depending on whether the user has selected a handmade tool or a text tool.

Everything works fine, but when the user is finished interacting with individual canvases, I need to bring 3 canvases into one image so that it can be attached to the email. I can connect layers 2 and 3 using context.drawImage , but somehow my actual snapshot that I got from html2canvas does not accompany my final image.

My last snapshot is as follows:

Please provide information on this issue.

Answer 1

The reason that the html2canvas snapshot does not appear is explained by the following:

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

When you set such a background, you will only affect the canvas as a regular element, and not the contents of the canvas itself. It will not be registered as part of the pixels on it.

What you need to do is drawImage() result from html2canvas also on the final canvas (for example):

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

or

 $('.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 do not know your other code, since you do not show it, so please adjust if necessary).