我的服务器使用这python功能进行加密和解密的图像在一个组中的格式。 我想要做的同样的加密在前端，并发送到这个功能的在后台。 如何将这种方法入JavaScript
def encrypted_decrypted_image(image):
key = 48
count = 0
for index, value in enumerate(image):
count += 1
image[index] = value ^ key
if count == 10:
break
return image
这里是怎么做 Array.reduce(),
// def encrypted_decrypted_image(image):
// key = 48
// count = 0
// for index, value in enumerate(image):
// count += 1
// image[index] = value ^ key
// if count == 10:
// break
// return image
function xorImage(imageBuffer, key=48){
return imageBuffer.reduce((acc, value, index) => {
if(index == 10) return acc;
acc.push(value ^ key);
return acc;
}, [])
}
console.log(xorImage([1, 20, 3, 4, 5, 6, 7, 8, 9]))得到个象素组分，从图像，你先画，图像的画布：
const image = document.getElementById('image');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = image.width;
const height = image.height;
canvas.width = width;
canvas.height = height;
// Draw original image:
context.drawImage(image, 0, 0, width, height);
然后，得到的价值观对于像素的你要更新：
const data = context.getImageData(0, 0, width, height).data;
注意到形状和型的返回的数据 CanvasRenderingContext2D.getImageData() 功能：
ImageData ctx.getImageData(sx, sy, sw, sh);
sx:X坐标的左上角的图像数据矩形区域将被提取。sy：Y坐标的左上角的图像数据矩形区域将被提取。sw：宽度的图像数据矩形区域将被提取。sh：高度的图像数据矩形区域将被提取。你可以看到它返回一个 ImageData 目的， 不管它是什么. 重要的是，象有一个 .data 酒店其中包含所有我们的素值。
然而，请注意 .data 酒店是1-维 Uint8ClampedArray这意味着所有像素的成分已被夷为平地，所以您得到的东西，看起来是这样的：
让我们说你有一个2x2图像这样的：
RED PIXEL | GREEN PIXEL
BLUE PIXEL | TRANSPARENT PIXEL
然后，你会得到它们，像这样：
[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 0, 0, 0, 0 ]
| RED PIXEL | GREEN PIXEL | BLUE PIXEL | TRANSPAERENT PIXEL |
| 1ST PIXEL | 2ND PIXEL | 3RD PIXEL | 4TH PIXEL |
然后你可以变换这些价值观，但是你会喜欢的，并在具体使用情况，那将是你所需要做的就在前端之前发送的变换数据的服务器：
const transformedData = encryptedDecryptedImage(data);
fetch('httsp://', { ... });
如果你想画的数据转化回上的页面，首先需要将其转换回来 ImageData 使用 CanvasRenderingContext2D.createImageData() 和 CanvasRenderingContext2D.putImageData():
const imageData = context.createImageData(width, height);
imageData.data.set(new Uint8ClampedArray(transformedData));
context.putImageData(transformedData, 0, 0);
工作的例子：
const image = document.getElementById('image');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = image.width;
const height = image.height;
canvas.width = width;
canvas.height = height;
// Draw original image:
context.drawImage(image, 0, 0, width, height);
// Transform the top half of the image (each pixel has 4 coordinates, RGB and alpha):
const maxTransformedCoords = width * Math.round(height / 2) * 4;
// Avoid processing more than needed:
const requiredRows = Math.ceil(maxTransformedCoords / (width * 4));
// Get the pixel component values as an array:
const data = context.getImageData(0, 0, width, requiredRows).data;
// Your transform logic (with some changes):
const key = 48;
let count = 0;
const transformedData = data.map((value, i) => {
if (++count > maxTransformedCoords) return value;
// Turn alpha coordinates opaque:
// if ((i + 1) % 4 === 0) return 255;
// Your logic:
return value ** key;
});
// Turn the transformed data into an ImageData object:
const imageData = context.createImageData(width, requiredRows);
imageData.data.set(new Uint8ClampedArray(transformedData));
// Draw the transformed pixels:
context.putImageData(imageData, 0, 0);
// Display it on the page:
canvas.id = 'canvas';
document.body.append(canvas);body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-family: monospace;
overflow: hidden;
}
#image,
#canvas {
border: 4px solid white;
border-radius: 2px;
box-shadow: 0 0 32px 0 rgba(0, 0, 0, .25);
width: 150px;
box-sizing: border-box;
display: block;
background: cyan;
}
#canvas {
margin-left: 32px;
}<img id="image" src="data:image/gif;base64,R0lGODlhSwBLAPEAACMfIO0cJAAAAAAAACH/C0ltYWdlTWFnaWNrDWdhbW1hPTAuNDU0NTUAIf4jUmVzaXplZCBvbiBodHRwczovL2V6Z2lmLmNvbS9yZXNpemUAIfkEBQAAAgAsAAAAAEsASwAAAv+Uj6mb4A+QY7TaKxvch+MPKpC0eeUUptdomOzJqnLUvnFcl7J6Pzn9I+l2IdfII8DZiCnYsYdK4qRTptAZwQKRVK71CusOgx2nFRrlhMu+33o2NEalC6S9zQvfi3Mlnm9WxeQ396F2+HcQsMjYGEBRVbhy5yOp6OgIeVIHpEnZyYCZ6cklKBJX+Kgg2riqKoayOWl2+VrLmtDqBptIOjZ6K4qAeSrL8PcmHExsgMs2dpyIxPpKvdhM/YxaTMW2PGr9GP76BN3VHTMurh7eoU14jsc+P845Vn6OTb/P/I68iYOfwGv+JOmRNHBfsV5ujA1LqM4eKDoNvXyDqItTxYX/DC9irKBlIhkKGPtFw1JDiMeS7CqWqySPZcKGHH/JHGgIpb6bCl1O0LmT57yCOqoI5UcU0YKjPXmFjMm0ZQ4NIVdGBdZRi9WrjLxJNMY1Yr4dYeuNxWApl1ALHb+KDHrTV1owlriedJgSr4Cybu/9dFiWYAagsqAGVkkzaZTAuqD9ywKWMUG9dCO3u2zWpVzIhpW122utZlrHnTN+Bq2Mqrlnqh8CQ+0Mrq3Kc++q7eo6dlB3rLuh3abPVbbbI2mxBdhWdsZhid8cr0oy9F08q0k5FXSadiyL1mF5z51a8VsQOp3/LlodkBfzmzWf2bOrtfzr48k/1hupDaLa9rUbO+zlwndfaOCURAXRNaCBqBT2BncJakWfTzSYkmCEFr60RX0V8sKaHOltCBJ1tAAFYhHaVVbig3jxp0IBADs=" >这两个英语希腊每天都会注意我用一个小型的数据URI避免 Cross-Origin 问题如果我的包括外部图像或一个答案是大于允许如果我尝试使用一个更长的数据URI。
getImageData().