画布显示意外的颜色,并且不会显示反转的图像
Canvas shows unexpected colors and won't show an inverted image
我目前正在尝试复制道格拉斯·克罗克福德(Douglas Crockford)演讲《安全原理》中显示的效果。为了演示两次使用"一次性键盘"加密密钥的风险,他展示了两张图像,使用相同的密钥对它们进行加密,并从另一个中减去一个,导致两个图像同时显示。
我的方法使用四个画布元素,一个用于显示键,两个用于加载图像,第四个作为减法的目标。我能够生成一个(有点)随机密钥,加载图像并加密它们。尝试解密映像时出现问题。为此,我将图像加载到第一个容器,对其进行加密,然后加密第二个容器(这会产生密钥的副本),然后减去两个容器的像素。原始图像仍可识别,但画布上会出现随机像素。
将图像加载到第二个容器时,从空的第一个容器中减去图像时,应该能够获得反转版本。出乎意料的是,画布保持空白。
我目前的状态可以在JSFiddle上查看,请看一下。
更新的演示
首先,您将 alpha 设置为 255,但随后继续并仍然减去数据,因此您减去 alpha 通道,而不管您已经将其设置为 255。我所要做的就是让它有条件。
然后,您将值变为 256,但范围为 0-255。最后但并非最不重要的一点是,您需要在生成部分使用另一个 alpha 条件。
//generate a random image
(function() {
var ct = getCTX("c0");
var imgData = ct.createImageData(400, 400);
var data = imgData.data;
for (var i = 0, j = data.length; i < j; i++) {
// Added conditional
if (i % 4 === 3){
data[i] = 255;
}else{
// random * 255 since color ranges are from 0-255
data[i] = Math.floor(Math.random() * 255);
}
}
ct.putImageData(imgData, 0, 0);
})();
function encodeWrap(id) {
return (function() {
var img = getCTX(id);
var imgData = img.getImageData(0, 0, 400, 400);
var data = imgData.data;
for (var i = 0, j = data.length; i < j; i++) {
if (i % 4 === 3){
// added condition for alpha
data[i] = 255;
}else{
// changed to 255
data[i] = (data[i] + randomValues[i]) % 255;
}
}
img.putImageData(imgData, 0, 0);
});
}
document.getElementById("bt3").addEventListener("click", function() {
var img1 = getImageData("c1"),
img2 = getImageData("c2"),
ct = getCTX("c3"),
imgData = ct.createImageData(400, 400),
data = imgData.data,
tmp;
for (var i = 0, j = data.length; i < j; i++) {
if (i % 4 === 3){
data[i] = 255;
}else{
tmp = img1[i] - img2[i];
// changed to 255 since ranges go from 0 - 255
if (tmp < 0){ tmp +=255;};
data[i] = tmp;
}
}
ct.putImageData(imgData, 0, 0);
});
相关文章:
- 使用JSP从服务器检索和显示图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使用FormData上传AJAX图像;t在服务器端显示图像
- 选择文件后显示图像
- Chrome(webkit?)无法在幻灯片中正确显示图像
- 如何使用javascript显示图像
- 使用JS按顺序显示图像,而不是随机显示
- 使用服务器上的HTML/js在网页上显示图像
- 我想在选择输入文件上显示图像
- Javascript:单击单选按钮时显示图像
- 如何将JSON结果设置为'src'共'img'以在ASP.NET MVC4中显示图像
- 无法在cakepp布局中显示图像
- 页面加载后通过javascript显示图像
- 将图像文件存储在猫鼬模式中的二进制数据中,并以html形式显示图像
- 使用AngularJs数据绑定的三元运算符显示图像
- 加载时画布上未显示图像
- 运行POST时显示图像
- NodeJS上没有显示图像
- 从Javascript在表中显示图像
- 如何在MVC5中运行时在HTML5 Canvas中显示图像