我正在使用 html2canvas javascript 库来截取我的应用程序的屏幕截图，以实现反馈功能的目的。但是，我的应用程序包含敏感的个人数据，我不想在屏幕截图上看到这些数据。所以我创建了一个字体，每个字形看起来都像一个圆圈（类似于 IE 中的密码输入）。我的问题是：
是否有可能以某种方式告诉 html2canvas 使用这种字体呈现所有内容？我有一个 css 规则，将其应用于页面上的每个元素。现在我向body 元素添加一个css 类，然后我运行html2canvas，然后我删除该类以获取原始字体。但是在渲染画布的时候，用户可以看到这些奇怪的字形，我不希望他们看到。
有什么建议吗？
【问题讨论】：
标签： javascript html css fonts html2canvas
你可以尝试在渲染前给包含敏感信息的元素添加data-html2canvas-ignore属性。
【讨论】：
不幸的是，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 :)
【讨论】：