Šifrovanie a dešifrovanie obrazu pomocou javascriptu

Question 1

Môj server pomocou tohto python funkciu na šifrovanie a dešifrovanie obrázky v bytearray formát. Chcem urobiť to isté šifrovanie v frontend, a odošlite na túto funkciu v backendu. ako previesť túto metódu do 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

Question 2

Tu je návod, ako to urobiť 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

Ak chcete získať jednotlivé pixely komponentov z obrázku, by ste prvá remíza, že obraz na plátne:

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

Potom, získať hodnoty pixelov budete aktualizácia:

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

Poznámka tvar a typ údajov vráti CanvasRenderingContext2D.getImageData() funkcia:

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

sx: X coordinate of ľavom hornom rohu obdĺžnik, z ktorých ImageData bude rozbalený.
sy: Y coordinate of ľavom hornom rohu obdĺžnik, z ktorých ImageData bude rozbalený.
sw: Šírka obdĺžnika, z ktorých ImageData bude rozbalený.
sh: Výška obdĺžnika, z ktorých ImageData bude rozbalený.

Môžete vidieť, že vráti ImageData objekt, bez ohľadu, že je. Dôležitou súčasťou je, že tu, že objekt má .data majetok, ktorý obsahuje všetky naše hodnoty pixelov.

Upozorňujeme však, že .data nehnuteľnosť je 1-rozmer Uint8ClampedArray,, čo znamená, že všetky pixel komponentov boli sploštené, aby ste získali niečo, čo vyzerá takto:

Povedzme, že máte 2x2 obrazu, ako je tento:

 RED PIXEL |       GREEN PIXEL
BLUE PIXEL | TRANSPARENT PIXEL

Potom, dostanete ich ako 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 |

Potom môžete premeniť tieto hodnoty však, že by ste chceli, a váš konkrétny prípad použitia, ktorý by všetko, čo potrebujete urobiť na frontend pred odoslaním transformované dáta na server:

const transformedData = encryptedDecryptedImage(data);

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

Ak chcete nakresliť transformované dáta späť na stránky, musíte najprv konvertovať ju späť na ImageData pomocou CanvasRenderingContext2D.createImageData() a CanvasRenderingContext2D.putImageData():

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

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

context.putImageData(transformedData, 0, 0);

Pracovné príklade:

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 používam malý dátový URI, aby sa zabránilo Cross-Origin problémy, ak som patria vonkajší obraz alebo odpoveď, ktorá je väčšia, než je povolené, ak sa snažím používať dlhšie údaje URI.

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