javascript - Save captured screenshot after editing it

Question

I want to implement a functionality in my app wherein the user can take snapshot of the current screen and can annotate it (modify/scribble/etc) and after that, can send it in an email. My app uses phonegap for ios as well as android support. But mainly it consist of javascript/jquery.

So far I am able to achieve:

1. Saving current html to canvas (with the help of html2canvas library)
2. Enable user to interact with that canvas using freehand tool provided by sketch.js
3. Add text notes to user defined location anywhere on canvas
4. Open a new email popup using phonegap's email Composer Plugin

In order to provide interactivity feel to user, I implemented layers of canvas :

1: First layer will be showing actual snapshot captured through html2canvas. To show my snapshot on this canvas (capturedCanvas), I am setting the background-image of the canvas to image obtained through the library. 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 toggle depending on whether the user selected freehand tool or text tool.

Everything works fine but when the user is finished interacting with the seperate canvases, I need to bring the 3 canvases into one image so that it can be attached to email. I am able to 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 final snapshot looks like this :

Please provide insight on this issue.

Answer 1

没有出现 html2canvas 快照的原因是：

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

当您像这样设置背景时，您只会将画布作为普通元素影响，而不是画布本身的内容。这不会被注册为像素的一部分。

您需要做的是将drawImage()html2canvas 的结果以及最终画布（例如）：

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

或者：

$('.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.
    }
});

（我不知道您的其他代码，因为您没有显示它，所以请根据需要进行调整）。