编辑后保存捕获的屏幕截图

Question

我想在我的应用程序中实现一个功能,其中用户可以拍摄当前屏幕的快照并可以对其进行注释(修改/涂鸦/等),之后,可以通过电子邮件发送它.我的应用程序使用phonegap for ios以及android支持.但主要是由javascript/jquery组成.

到目前为止,我能够实现:

1. 将当前html保存到画布(借助html2canvas库)
2. 允许用户使用sketch.js提供的徒手工具与该画布进行交互
3. 在画布的任何位置向用户定义的位置添加文本注释
4. 使用phonegap的电子邮件Composer Plugin打开一个新的电子邮件弹出窗口

为了向用户提供交互感,我实现了画布层:

1:第一层将显示通过html2canvas捕获的实际快照.要在此画布上显示我的快照(capturedCanvas),我将画布的背景图像设置为通过库获取的图像.代码如下:

 $('.myClass').html2canvas({

                onrendered: function( canvas ) {

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

                }
        });

2和3:它上面的图层将根据用户是选择徒手工具还是文本工具进行切换.

一切正常,但当用户完成与单独画布的交互时,我需要将3幅画布放入一张图片中,以便将其附加到电子邮件中.我能够连接第2层和第3层,context.drawImage但不知怎的,我从html2canvas获得的实际快照并没有伴随我的最终图像.

我的最终快照如下所示:

请提供有关此问题的见解.

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

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