Create a component that deconstruct image by randomizing pixels

[Mukesh]

• An util function that generates a unique sequence from 1 to given no. For example, if input is 4 -> possible output is: [4,2,1,3]

• Randomizing pixel:

• If input image is 10x5 px, generate random sequence (1, 10).

• the canvas element should randomize the pixel horizontally based on the generated sequence.

• Once done, return base64.

Example:
Original image (5x3px):

[ 
    [x1, x2, x3, x4, x5],
    [y1, y2, y3, y4, y5],
    [z1, z2, z3, z4, z5]
] 

if randomize sequence of (1, 5) is [2,4,1,3,5] then output image will be:
1st will got 2nd, 2nd will go to 4th and so on..

[ 
    [x3, x1, x4, x2, x5],
    [y3, y1, y4, y2, y5],
    [z3, z1, z4, z2, z5],
] 

The component should be able to construct and deconstruct with the secret sequence and return base64.
Note: We're only randomizing pixel horizontally and pixel by pixel to keep it simple - based on the result might need to change it.

[Narasimha Prasanna HN]

@muke1908 , can I work on this??
I've understood the method you're proposing.
Can you please define inputs and outputs more clearly.

[Mukesh]

Hi @Narasimha1997 ,
this is completely experimental. I haven't tested this or tried it so no idea how would be the result of it. Would be great if you try it out.

---

Input will be any image - W x H, the output will be a de-structured image of the same height width.
Now, for image operation let's use canvas. example:

const image = new Image();
image.src = <original image base64 >;

const canvas = document.getElementById('canvas'),
const ctx = canvas.getContext('2d');

// let's take the pixel at (x, y) and place it at the (i, j).
ctx.drawImage(image,
        x, y,   //  Start at x, y pixels,
        1, 1,   //  Get a `1 * 1` (w * h) area from the source image,
        i, j,    // Place the result at i, j in the canvas,
        1, 1); // With as width / height

// and repeat this process for each pixel. 

[Narasimha Prasanna HN]

@muke1908 , won't this be slow for larger image resolutions?? One direct way of encryption will be to encrypt the bytes data directly instead of decoding and shuffling at pixel level. A typical 1080p JPEG image would be only 300KB of data, but when decoded it results in almost 6MB of data, also a matrix of 1920x1080 require 1920 shuffle operations which can be computationally expensive

[Mukesh]

@Narasimha1997 Hi definitely we can encrypt the image traditionally. But this was to bypass the encryption process yet keep it hidden over the internet - and, shuffling 1920 times would be much faster compared to encrypting->sending->decrypting process.

As I said earlier it can be considered as just a fun experiment, I have no idea how the result will be.

[Mukesh]

@Narasimha1997
As far as I know, vectorizing is not possible in javascript on v8 runtime.
On the browser, we can't really do that stuff parallelly rather concurrently, so in any case, it'd be O(n)

Encryption is a full-proof technique in terms of security - no doubt. But my thought was not to go through the encryption process. Also, the de-structuring - re-structuring image on the client-side allows us to add a few more fun tricks to make it a little more interesting for example The original image will no be downloadable (because the image is distorted). The image will be re-structure itself only when someone clicks and hold on the image - potentially prevent taking screenshot etc.

So, this issue is not about encryption, anyway, the random sequences (which is essentially the key to re-structure the image) will be end-to-end encrypted.

[Narasimha Prasanna HN]

@muke1908 yeah! That would be a good feature

[Mukesh]

@muke1908 yeah! That would be a good feature

Also, I don't think pixel by pixel shuffling is required. For example, an image of 1980*1980 can be distorted by shuffling 100 * 100 pixels - which is 198 * 198 iteration. But need an optimized algorithm to choose the right block based on the image size.

[Gagan Aryan]

@muke1908 I guess randomizing pixel should be another utility function, right?