我正在开发一个“测验”网络应用程序，我想在其中向用户展示一张图片很短的时间，然后询问用户他看到了什么。
我正在寻找一种方法，通过使用开发人员工具长时间查看图像，使用户难以作弊。
我的第一次尝试是从服务器加载 bas64 编码的图像，然后使用 data-uri 通过 JavaScript 设置图像 src。
然而，Chrome 开发者工具仍然在网络标签中显示图像的预览，即使它是通过 data-uri 加载的。
我的下一个尝试是以编程方式在画布元素上呈现图像，但即便如此，图片仍显示在 Chrome 的网络选项卡中。
有人知道如何防止渲染图片的预览出现在浏览器开发者工具中吗？
（注意：防止容易找到的图像预览对我来说已经足够了，我知道有足够知识的用户也可以在找到相应的字符串时进入开发人员工具并自行解码 base64 编码的图像...... )
【问题讨论】：
标签： javascript html image browser
我想您可以以某种方式对您的图像进行编码，而不是务实地将其绘制在画布上。例如，使用服务器大小的脚本将图像分成几块并使用 base64 对其进行编码（您也可以对这些 base64 字符串进行编码，但我认为这不会有帮助）。比使用 JavaScript 解码每个图像并将其绘制在画布上。至少，在网络选项卡中仅查看原始图像不会那么容易，因为用户会看到一堆小图像而不是大图像。
但是，我认为您应该使用 Flash 或 Java 来完成这项任务。
附： 我有一个更好的主意。不是小图像，而是具有不同透明度和颜色的图像。因此，只有将它们全部绘制在同一位置时，您才会得到原始图像。
【讨论】：
您可以从 DOM 中删除图像，使其无法被检查。如果你给它一个 id，在你展示了你的图片之后，你可以删除它：
var image = document.getElementById('image-id');
image.parentNode.removeChild( image );
【讨论】：
您可以在图像中使用之前加密您的 base64 字符串并对其进行解密：
function encrypt(str, secret) {
return str.split('').map(function(char){return String.fromCharCode(char.charCodeAt(0) ^ secret)}).join('');
}
var encrypted = encrypt("test", 239847923); // ͽͬͺͽ
var decrypted = encrypt(encrypted, 239847923); // test
请确保您使用相同的秘密值进行加密和解密。 这是一个简单的异或加密，所以你可以很容易地在服务器端实现它。
你可以在这里看到它的实际效果：http://jsfiddle.net/ys490rx6/3/
【讨论】：