Javascript kullanarak görüntüyü şifreleyin ve şifresini çözün

Question 1

Sunucum, görüntüleri bir bytearray biçiminde şifrelemek ve şifresini çözmek için bu python işlevini kullanıyor. Aynı şifrelemeyi ön uçta yapmak ve arka uçtaki bu işleve göndermek istiyorum. bu yöntem Javascript'e nasıl dönüştürülür

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

İşte bununla nasıl yapılacağı 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

Bir görüntüden tek tek piksel bileşenleri elde etmek için önce bu görüntüyü bir tuvale çizersiniz:

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

Ardından, güncelleyeceğiniz piksellerin değerlerini alın:

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

Tarafından döndürülen verilerin şekline ve türüne dikkat edinCanvasRenderingContext2D.getImageData() işlev:

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

sx: Imagedata'nın çıkarılacağı dikdörtgenin sol üst köşesinin x koordinatı.
sy: Imagedata'nın çıkarılacağı dikdörtgenin sol üst köşesinin y koordinatı.
sw: Imagedata'nın çıkarılacağı dikdörtgenin genişliği.
sh: Imagedata'nın çıkarılacağı dikdörtgenin yüksekliği.

Döndürdüğünü görebilirsiniz. ImageData itiraz et, her neyse. Buradaki önemli kısım, bu nesnenin bir .data tüm piksel değerlerimizi içeren özellik.

Ancak, unutmayın .data özellik 1 boyutludurUint8ClampedArray bu, pixel'in tüm bileşenlerinin düzleştirildiği anlamına gelir, böylece buna benzeyen bir şey elde edersiniz:

Diyelim ki böyle bir 2x2 görüntünüz var:

 RED PIXEL |       GREEN PIXEL
BLUE PIXEL | TRANSPARENT PIXEL

O zaman onları böyle alacaksın.:

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

Daha sonra bu değerleri istediğiniz gibi dönüştürebilirsiniz ve özel kullanım durumunuzda, dönüştürülen verileri sunucuya göndermeden önce ön uçta yapmanız gereken tek şey bu olacaktır:

const transformedData = encryptedDecryptedImage(data);

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

Dönüştürülen verileri sayfaya geri çizmek istiyorsanız, önce onu sayfaya geri dönüştürmeniz gerekir.ImageData kullanımCanvasRenderingContext2D.createImageData() veCanvasRenderingContext2D.putImageData():

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

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

context.putImageData(transformedData, 0, 0);

Çalışma örneği:

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

Not Önlemek için küçük bir veri urı'si kullanıyorum Cross-Origin harici bir görüntü eklersem veya daha uzun bir veri urı'sı kullanmaya çalışırsam izin verilenden daha büyük bir yanıt eklersem sorunlar.

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