Значения getImageData холста Firefox отличаются от значений пикселей исходного изображения - PullRequest
Новая
       11

Значения getImageData холста Firefox отличаются от значений пикселей исходного изображения

0 голосов
/ 28 июня 2018

Я хочу закодировать некоторые JSON как значения RBG в png-файле и прочитать значения в javascript после загрузки изображения. Это функция, которую я использую для загрузки изображения.

Для каждого пикселя изображения мы получаем 4 байта, соответствующих компонентам R, B, G и A. Альфа-канал всегда 255. Поэтому я игнорирую это значение. Кроме того, в изображении может быть некоторое дополнение, чтобы оно соответствовало 4-байтовой границе, требуемой вышеупомянутой схемой. Я тоже это игнорирую. (Посмотрите на цикл for с проверкой состояния нулевых значений в компонентах R, B, G.

В приведенном ниже коде img приходит с сервера, который кодирует данные json в изображение. Для случая с этим вопросом источник img не должен иметь значения. Я могу добавить больше деталей, если требуется.

Значения пикселей на изображении будут выглядеть примерно так: 

5B 7B 22 255 64 72 69 255 22 3A 22 255 31 31 22 255 7B 5B 00 255

, что соответствует 

[{"dri":"11"}]

Это пример, поскольку я не могу поделиться исходным изображением. 

img.onload = function(e){
    console.log('load successful', e);
    var c = document.createElement('canvas');
    c.width = img.width;
    c.height = img.height;
    var ctx = c.getContext("2d");
    console.log(ctx.imageSmoothingEnabled);
    ctx.imageSmoothingEnabled = false;
    ctx.globalAlpha = 1.0;
    ctx.strokeStyle=(0,0,0,1);
    ctx.shadowBluer = 0;
    console.log(ctx.imageSmoothingEnabled);
    window.myCtx = ctx;

    ctx.drawImage(img, 0, 0, img.width, img.height);
    window.imageData = ctx.getImageData(0,0,img.width, img.height);
    result = [];
    for(i=0, len = imageData.data.length; i < len; i++){
        if((i+1)%4===0 || imageData.data[i] === 0){
            continue;
        }
        result.push(String.fromCharCode(imageData.data[i]));
    }
    elem.innerText = result.join("");
};

Этот код должен работать в браузере случайных пользователей. Поэтому я не могу настроить параметры конфигурации браузера. Этот код прекрасно работает в Windows FF, Chrome, IE 11, Edge. Также он отлично работает в Chrome, Safari в Mac. Но в Firefox на Mac значения пикселей немного изменены. Я не уверен, как это исправить. Любая идея исправить это было бы замечательно. Если это не может быть исправлено, если кто-то может привести некоторые причины того, почему Firefox на Mac ведет себя по-другому, это тоже было бы хорошо.

Я полагаю, что проблема связана с предварительным умножением альфа браузерами. Есть ли способ отключить это?

...