M
M
mletov2019-01-27 12:52:25
JavaScript
mletov, 2019-01-27 12:52:25

How to implement color shift when decoding an image?

I stumbled upon pikabu for a fullstack developer job.
One of the test questions went like this:


Secret agent Peekaboo transmitted an encrypted image. You need to decode the image and display it on the page using JS (without third-party libraries). The decryption algorithm is known:
the pixels are moved from left to right for each line;
for each pixel, the parameter s += x + y * 80 is calculated (initially s = 0 and for each next pixel the value increases by x + y * 80), where x is a pixel column, y is a row;
for the red and blue channel, you need to add the s parameter;
for the green channel, you need to subtract the s parameter as follows: green = (green - s) & 0xff;
Encrypted image (to avoid problems with CORS, it is better to download the image to your local server):

https://cs10.pikabu.ru/post_img/2019/01/20/10/1548...
I decided to complete the task. No, I'm not going to send my resume there)
My stack is not like that, and I chose a different language for implementation (C#). It was just interesting that they encrypted it there.
But there were problems with understanding the task. With this algorithm, the value of R and B will quickly go beyond 255, and G will become less than 0. Or they meant that if more than 255, then the color is the remainder of dividing by 255 - 1. For example, when R becomes 256, then this means, what R = 0? Can anyone understand what they want?

Answer the question

In order to leave comments, you need to log in

3 answer(s)
V
Vladimir S, 2019-01-27
@mletov

Can anyone understand what they want?

Apparently they want no problems.
in the picture, the stalone holds fingers up and the inscription - offset.

D
d-stream, 2019-01-27
@d-stream

With this algorithm, the value of R and B will quickly go beyond 255, and G will become less than 0. Or they meant that if more than 255, then the color is the remainder of dividing by 255 - 1. For example, when R becomes 256, then this means, what R = 0? Can anyone understand what they want?
Anyone who has worked with bytes at least once will understand)
ps in sharp - you can play around byte well, or wrap all arithmetic operations in (....) & 255 )

V
Vitaly, 2019-01-31
@daruvayc0

I decided to try to implement on js. But nothing happened =( Tell me where to dig? Am I adding the channels correctly?

let s = 0
  for (var x = 0; x < imgW; x++) {
    for (var y = 0; y < imgH; y++) {
      s += x + y * 80;
      var c = ImDat.getPixel(x, y);
      var r = (c.R + s) % 256;
      var g = (c.G - s) & 0xff;
      var b = (c.B + s) % 256;
      ImDat.setPixel(x, y, {R: r, G: g, B: b, A: c.A});
    }
  }

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question