有没有办法在浏览器中显示图像而无需在开发人员工具中预览图像？
Is there a way to display an image in the browser without having a preview of the image in the developer tools?
我正在开发一个 "quiz" 网络应用程序，我想在其中向用户显示一张图片很短的时间，然后询问用户他看到了什么。
我正在寻找一种方法，让用户很难通过使用开发者工具长时间查看图像来作弊。
我的第一次尝试是加载从服务器编码的图像 bas64，然后使用数据 uri 通过 JavaScript 设置图像 src。
但是 Chrome 开发者工具仍然会在网络选项卡中显示图像的预览，即使它是通过数据 uri 加载的。
我的下一次尝试是在 canvas 元素上以编程方式呈现图像，但即便如此，图片仍显示在 Chrome 的网络选项卡中。
有人知道如何防止在浏览器开发人员工具中显示渲染图片的预览吗？
(注意：防止容易找到的图片预览对我来说已经足够了，我知道有足够知识的用户也可以在找到相应字符串时进入开发者工具并自行解码base64编码的图片。 ..)
您可以从 DOM 中删除图片，这样就无法检查它了。如果你给它一个id，在你展示你的图片之后，你就可以删除它：
var image = document.getElementById('image-id');
image.parentNode.removeChild( image );
我想您可以通过某种方式对您的图像进行编码，而不是在 canvas 上实用地绘制它。例如，使用服务器大小的脚本将图像分成几块并使用 base64 对其进行编码（您也可以对这些 base64 字符串进行编码，但我认为这没有帮助）。比使用 Java 脚本解码每个图像并将其绘制在 canvas 上。至少，在网络选项卡中查看原始图像不会那么容易，因为用户会看到一堆小图像而不是大图像。
不过，我认为您应该使用 Flash 或 Java 来完成这项任务。
P.S。
我有一个更好的主意。而不是小图像，你的图像具有不同的透明度和颜色。所以只有当你把它们都画在同一个位置时，你才会得到一张原始图像。
您可以加密 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/
我正在开发一个 "quiz" 网络应用程序，我想在其中向用户显示一张图片很短的时间，然后询问用户他看到了什么。
我正在寻找一种方法，让用户很难通过使用开发者工具长时间查看图像来作弊。
我的第一次尝试是加载从服务器编码的图像 bas64，然后使用数据 uri 通过 JavaScript 设置图像 src。
但是 Chrome 开发者工具仍然会在网络选项卡中显示图像的预览，即使它是通过数据 uri 加载的。
我的下一次尝试是在 canvas 元素上以编程方式呈现图像，但即便如此，图片仍显示在 Chrome 的网络选项卡中。
有人知道如何防止在浏览器开发人员工具中显示渲染图片的预览吗？
(注意：防止容易找到的图片预览对我来说已经足够了，我知道有足够知识的用户也可以在找到相应字符串时进入开发者工具并自行解码base64编码的图片。 ..)
您可以从 DOM 中删除图片，这样就无法检查它了。如果你给它一个id，在你展示你的图片之后，你就可以删除它：
var image = document.getElementById('image-id');
image.parentNode.removeChild( image );
我想您可以通过某种方式对您的图像进行编码，而不是在 canvas 上实用地绘制它。例如，使用服务器大小的脚本将图像分成几块并使用 base64 对其进行编码（您也可以对这些 base64 字符串进行编码，但我认为这没有帮助）。比使用 Java 脚本解码每个图像并将其绘制在 canvas 上。至少，在网络选项卡中查看原始图像不会那么容易，因为用户会看到一堆小图像而不是大图像。
不过，我认为您应该使用 Flash 或 Java 来完成这项任务。
P.S。 我有一个更好的主意。而不是小图像，你的图像具有不同的透明度和颜色。所以只有当你把它们都画在同一个位置时，你才会得到一张原始图像。
您可以加密 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/