Šifrování a dešifrování obrazu pomocí javascriptu

Question 1

Můj server pomocí této python funkce pro šifrování a dešifrování obrázků v bytearray formátu. Chci udělat to samé šifrování v frontend a poslat této funkce v backend. jak převést tuto metodu do Javascriptu

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

Question 2

Zde je návod, jak to udělat s 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]))

Question 3

Aby si jednotlivé pixely komponent z obrázku, měli byste nejprve nakreslit obraz na plátně:

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);

Pak se hodnoty pixelů se chystáte aktualizovat:

const data = context.getImageData(0, 0, width, height).data;

Poznámka: tvar a typ dat vrácených CanvasRenderingContext2D.getImageData() funkce:

ImageData ctx.getImageData(sx, sy, sw, sh);

sx: Souřadnice x levého horního rohu obdélníku, z nichž ImageData bude extrahován.
sy: Souřadnice y levého horního rohu obdélníku, z nichž ImageData bude extrahován.
sw: Šířka obdélníku, z nichž ImageData bude extrahován.
sh: Výška obdélníku, z nichž ImageData bude extrahován.

Můžete vidět to vrátí ImageData objekt, ať už je to cokoliv. Důležité je, že objekt má .data majetek, který obsahuje všechny naše hodnoty pixelu.

Nicméně, na vědomí, že .data ubytování je 1-rozměr Uint8ClampedArray, což znamená, že všechny pixel je součásti byly zploštělé, takže jste stále něco, co vypadá takto:

Řekněme, že máte 2x2 obrázku, jako je tento:

 RED PIXEL |       GREEN PIXEL
BLUE PIXEL | TRANSPARENT PIXEL

Pak, budete si je jako toto:

[ 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 |

Pak můžete transformovat tyto hodnoty však budete chtít, a v konkrétní případ použití, a to by bylo vše, co musíte udělat na rozhraní před odesláním transformovaných dat na server:

const transformedData = encryptedDecryptedImage(data);

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

Pokud chcete čerpat data transformována zpět na stránku, musíte nejprve převést zpět na ImageData pomocí CanvasRenderingContext2D.createImageData() a CanvasRenderingContext2D.putImageData():

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

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

context.putImageData(transformedData, 0, 0);

Funkční příklad:

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=" >

⚠️ Poznámka: já používám malé datové URI, aby se zabránilo Cross-Origin problémy, pokud jsem se zahrnují externí disk nebo odpověď, která je větší, než je povoleno, pokud se snažím používat déle, data URI.

Invizi · Answer 1 · 2021-11-22T03:07:25