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

Question

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

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

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

为了给用户提供交互感，我实现了 Canvas 层:

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

 $('.myClass').html2canvas({

                onrendered: function( canvas ) {

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

                }
        });

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

一切正常，但当用户完成与单独 Canvas 的交互时，我需要将 3 个 Canvas 合并为一个图像，以便它可以附加到电子邮件中。我可以使用 context.drawImage 连接第 2 层和第 3 层，但不知何故，我从 html2canvas 获得的实际快照并没有伴随我的最终图像。

我的最终快照是这样的:

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

Answer 1

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

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

当你像这样设置背景时，你只会影响作为普通元素的 Canvas ，而不是 Canvas 本身的内容。这不会被注册为它上面的像素的一部分。

你需要做的是 drawImage() 将 html2canvas 的结果也放到最终的 Canvas 上(例如):

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

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