我正在开发一个“测验”网络应用程序，我想在很短的时间内向用户显示图片，然后询问用户他看到了什么。
我正在寻找一种方法，通过使用开发人员工具在较长时间内查看图像，使用户难以作弊。
我的第一次尝试是从服务器加载编码的bas64图像，然后使用data-uri通过JavaScript设置图像src。
但是，Chrome开发者工具仍会在网络标签中显示图像的预览，即使是通过data-uri加载它也是如此。
我的下一次尝试是在canvas元素上以编程方式呈现图像，但即使这样，图片也会显示在Chrome的网络标签中。
是否有人知道如何阻止预览浏览器开发者工具中显示的渲染图片？
（注意：防止轻松找到图像预览对我来说已经足够了，我知道有足够知识的用户也可以进入开发人员工具并在找到相应字符串时自行解码base64编码图像... ）
答案 0 :(得分：3)
我想你可以以某种方式编码你的图像，而不是在画布上实际绘制它。例如，使用服务器大小的脚本将图像分成几块并使用base64对其进行编码（您也可以对这些base64字符串进行编码，但我认为它不会有帮助）。比使用JavaScript解码每个图像并在画布上绘制它。至少，在网络选项卡中查看原始图像并不容易，因为用户会看到一堆小图像而不是大图像。
但是，我认为你应该使用Flash或Java来完成这项任务。
P.S。 我有一个更好的主意。您可以使用不同的透明和颜色来代替小图像。因此，只有当您将所有图像绘制在相同位置时才能获得原始图像。
答案 1 :(得分：1)
您可以从DOM中删除图像，以便无法检查。如果您在显示图像后给它一个ID，则可以将其删除：
var image = document.getElementById('image-id');
image.parentNode.removeChild( image );
答案 2 :(得分：0)
您可以在使用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
请确保使用相同的秘密值进行加密和解密。 这是简单的XOR加密，因此您可以在服务器端轻松实现它。
您可以在此处看到它：http://jsfiddle.net/ys490rx6/3/