Шифрование и расшифровка изображений с помощью javascript

Мой сервер использует эту функцию 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;

Вы можете преобразовывать эти значения как угодно, и в вашем конкретном случае это будет все, что вам нужно сделать на фронтенде перед отправкой преобразованных данных на сервер: 

const transformedData = encryptedDecryptedImage(data);

fetch('httsp://', { ... });

Если вы хотите вернуть преобразованные данные на страницу, сначала необходимо преобразовать их в ImageData:

const imageData = context.createImageData(width, height);

imageData.data.set(new Uint8ClampedArray(transformedData));

context.putImageData(transformedData, 0, 0);

Пример работы:

⚠️ Обратите внимание, я использую небольшой URI данных, чтобы избежать Cross-Origin проблем, если я включу внешнее изображение или ответ, размер которого превышает допустимый, если я попытаюсь использовать более длинный URI данных.

Вернуться на верх