Question

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

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

将当前的html保存到画布（借助html2canvas库）
允许用户使用sketch.js
在画布的任何位置向用户定义的位置添加文字说明
使用phonegap的email Composer Plugin

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

1：第一层将显示通过html2canvas捕获的实际快照。要在此画布上显示我的快照（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();+')';

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

你需要做的是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.
    }
});

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

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

1 个答案: