Question

我正在使用html2canvas javascript库截取我的应用程序的屏幕截图，以获取反馈功能的purpouses。然而，我的应用程序包含敏感的预分析数据，我不希望在屏幕截图上可读。所以我创建了一个字体，每个字形看起来像一个圆圈（类似于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：）

html2canvas覆盖css（字体）

2 个答案: