如何将Python实现的图片加解密方法转换为JavaScript版本

逻辑说明 #

原Python代码的逻辑非常明确：

• 固定加密密钥为48
• 仅对输入字节数组的前10个字节做异或运算，超过10个字节的部分完全不做处理
• 异或属于对称运算，所以同一个函数既可以做加密也可以做解密

JavaScript 实现代码 #

和Python逻辑1:1对齐的实现如下，入参对应Python的bytearray类型使用前端的Uint8Array：

function encryptedDecryptedImage(image) {
    const key = 48;
    let count = 0;
    for (let index = 0; index < image.length; index++) {
        count++;
        image[index] = image[index] ^ key;
        if (count === 10) {
            break;
        }
    }
    return image;
}

前端使用示例 #

以下是前端读取本地图片后加密上传的常见使用场景：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    // 读取文件为二进制缓冲
    const buffer = await file.arrayBuffer();
    // 转换为Uint8Array类型，匹配函数入参要求
    const imageBytes = new Uint8Array(buffer);
    // 调用加密方法
    const processedBytes = encryptedDecryptedImage(imageBytes);
    // 后续把processedBytes封装为二进制流或者FormData发送给后端接口即可
})

注意事项 #

• 必须确保传入函数的参数是Uint8Array类型，不要直接传入ArrayBuffer或者普通JS数组，否则运算结果会和后端不一致
• 和Python版本行为一致，加密和解密都可以调用同一个函数，对同一段数据执行两次函数即可还原原始内容
• 如果前端需要解密后端返回的加密图片，直接调用同一个函数处理返回的二进制字节即可正常渲染

内容的提问来源于stack exchange，提问作者Ali Ouda