Как реализовать сдвиг по цветам при декодировании изображения?

Question

[mletov]

Наткнулся на pikabu на вакансию fullstack developer.
Одно из тестовых заданий звучало вот так:

Секретный агент Пикабу передал зашифрованное изображение. Вам необходимо расшифровать изображение и вывести его на страницу средствами JS (без сторонних библиотек). Алгоритм дешифрования известен:
пиксели перебираются слева направо для каждой строки;
для каждого пикселя вычисляется параметр s += x + y * 80 (изначально s = 0 и для каждого следующего пикселя значение увеличивается на x + y * 80), где x - колонка пикселя, y - строка;
для канала красного и синего цвета необходимо добавить параметр s;
для канала зеленого цвета необходимо отнять параметр s следующим образом: green = (green - s) & 0xff;
Зашифрованное изображение (чтобы избежать проблемы с CORS изображение лучше скачать себе на локальный сервер):

https://cs10.pikabu.ru/post_img/2019/01/20/10/1548...

Решил я выполнить задание. Нет, я не собираюсь отправлять туда свое резюме )
Стек у меня не такой да и язык для реализации выбрал другой (C#). Просто интересно стало, что они там такое зашифровали.
Но возникли проблемы с пониманием задачи. При таком алгоритме значение R и B быстро выйдет за 255, а G станет меньше 0. Или они имели ввиду, что если больше 255, то цвет это остаток от деления на 255 - 1. Например, когда R станет 256, то это значит, что R = 0? Может кто понял что они хотят?

Comments

[Foggy Finder]

проверить вашу гипотезу не сложно :-)

[0ffff0]

Могу высказать свое суждение, с сильной долей сомнения в правильности,
но на вскидку, у них в условии изначально не s=0 , а
s =[] , при этом s[i] = 0 .

[RAX7]

Или они имели ввиду, что если больше 255, то цвет это остаток от деления на 255 - 1.

Цвет это остаток от деления на 256 после сложения с параметром s. color = (color + s) % 256

Answer 1

[Vladimir S]

Может кто понял что они хотят?

видимо хотят без заморочек.
на картинке сталоне держит пальцы вверх и надпись - зачет.

Comments

[mletov]

Спасибо, Сталлоне с пальцами получился, а вот надпись "Зачет" что-то нет )

[Vladimir S]

[Vladimir S]

var bmp = new Bitmap(@"I:\154800137443598227.png");

            var s = 0;
            for(int h = 0; h < bmp.Height; h++)

            {
                for(int w = 0; w < bmp.Width; w++)
                {
                    s += w + h * 80;
                    var p = bmp.GetPixel(w, h);
                    bmp.SetPixel(w, h, Color.FromArgb(255, (byte)(p.R + s), (byte)((p.G - s) & 0xff), (byte)(p.B + s)));
                }
            }

            bmp.Save("n.bmp");

код очень груб

[mletov]

Vladimir S, Спасибо, значит нужна поправка на ветер. А то контуры правильно получились - и все :)

[mletov]

Vladimir S,

[Vladimir S]

параметры исходной картинки смотри - я скачал сохранил 32rgba

Answer 2

[d-stream]

При таком алгоритме значение R и B быстро выйдет за 255, а G станет меньше 0. Или они имели ввиду, что если больше 255, то цвет это остаток от деления на 255 - 1. Например, когда R станет 256, то это значит, что R = 0? Может кто понял что они хотят?

Кто хоть раз работал с байтами - тот поймет)

p.s. в шарпе - можно поиграться byte ну или все арифметические операции завернуть в (….)&255 )

Answer 3

[Виталий]

Решил попробовать реализовать на js. Но ничего не получилось =( Подскажите куда копать? Правильно ли я складываю каналы?

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