html2canvas覆盖css (字体)

Question

我正在使用html2canvas javascript库为我的应用程序截屏，以获得反馈功能。然而，我的应用程序包含敏感的媒体数据，我不希望这些数据在屏幕截图上可读。所以我创建了一个字体，每个字形看起来都像一个圆圈(类似于IE中的密码输入)。我的问题是：

有没有可能以某种方式告诉html2canvas用这种字体呈现所有内容？我有一个css规则，它将此应用于页面上的每个元素。现在我要向body元素添加一个css类，然后运行html2canvas，然后删除该类以获得原始字体。但是在渲染画布的时候，用户可以看到这些奇怪的字形，我不想让他们看到。

有什么建议吗？

Answer 1

在呈现之前，您可以尝试向包含敏感信息的元素添加data-html2canvas-ignore属性。

Answer 2

不幸的是，html2canvas库的实现非常简单。我尝试了几种不同的想法，您所能做的就是使用覆盖来隐藏丑陋的文本呈现，只要覆盖位于调用html2canvas的元素之外。

// Hide your content with an overlay
$( '.snapshotoverlay' ).css( 'display', 'block' );

// .. then do your ugly modifications
$( '.previewWrap' ).css( 'background', 'red' );

// make sure your overlay div isn't contained in the div you're screenshotting.
html2canvas($('.content'), {  

    onrendered: function (canvas) {

        // do whatever you need to with the resulting canvas object
        var canvasImg = canvas.toDataURL("image/jpg");
        $('#canvasImg').html('<img src="'+canvasImg+'" alt="">');

        // undo your ugly changes
        $( '.previewWrap' ).css( 'background', 'black' );

        // hide your overlay
        $( '.snapshotoverlay' ).fadeOut();
    }
});

这是一个JSFiddle，在截图过程中，框被涂成红色，但由于覆盖，你永远看不到红色：

http://jsfiddle.net/tommcquarrie/tJmQ7/

我认为它实际上增加了一些截图体验。添加摄像头滴答声，你就可以模拟iOS 7了:)