Javascript html2canvas覆盖css（字体）

我正在使用html2canvas javascript库拍摄我的应用程序的屏幕截图，以获得反馈功能。但是，我的应用程序包含敏感的个人数据，我不想在屏幕截图上看到这些数据。所以我创建了一种字体，每个字形看起来都像一个圆圈（类似于IE中的密码输入）。我的问题是:

有没有可能告诉html2canvas使用这种字体渲染所有内容？我有一个css规则，将此应用于页面上的每个元素。现在我向

body

元素添加一个css类，然后运行html2canvas，然后删除该类以获得原始字体。但在渲染画布时，用户可以看到这些奇怪的图示符，我不希望他们看到这些

---

有什么建议吗？

不幸的是，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();
    }
});

//用覆盖层隐藏内容
$（'.snapshotoverlay'）.css（'display'，'block'）；
// .. 然后做你丑陋的修改
$（'.previewWrap'）.css（'background'，'red'）；
//确保你的叠加div没有包含在你正在截屏的div中。
html2canvas（$（'.content'），{
onrendered：函数（画布）{
//对生成的画布对象执行任何需要的操作
var canvasImg=canvas.toDataURL（“image/jpg”）；
$（'#canvasImg'）.html（''）；
//撤销你丑陋的改变
$（'.previewWrap'）.css（'background'，'black'）；
//隐藏覆盖层
$（'.snapshotoverlay'）.fadeOut（）；
}
});

这是一个JSFIDLE，在截屏过程中，框的颜色是红色的，但由于覆盖，您永远看不到红色：

---

我认为它实际上为截图体验增加了一些东西。添加摄像头点击声音，您将模拟iOS 7:）

在渲染之前，您可以尝试向包含敏感信息的元素添加

data-html2canvas-ignore

属性。

我需要渲染大量HTML（约3000个元素），渲染大约需要一秒钟。因此，用覆盖图将所有内容隐藏一秒钟看起来不太好。用户是单击按钮拍摄屏幕截图，还是在他们不知情的情况下拍摄？如果是后者，那就没有办法了。如果是前者，那么显示一个覆盖图，上面有一个精心设计的图形，上面写着“截图…”是完全可以接受的。