Проблема в цветах Javascript и холсте

Question

Я использовал этот код, чтобы точно попытаться получить цветовой код RGB:

var huePixel = HueCanvas.css('background-color').match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);//["rgb(0, 70, 255", "0", "70", "255"]
var svPixel = SVCanvas.get(0).getContext("2d").getImageData(satPos,valPos,1,1).data;
//opacity*original + (1-opacity)*background = resulting pixel
var opacity =(svPixel[3]/255);
var r =parseInt((opacity*svPixel[0])+((1-opacity)*huePixel[1]));
var g =parseInt((opacity*svPixel[1])+((1-opacity)*huePixel[2]));
var b =parseInt((opacity*svPixel[2])+((1-opacity)*huePixel[3]));

Проблема в том, что в некоторых пикселях RGB не совсем одинаков. Если я использую Math.round, а не parseInt, проблем больше, и больше пикселей имеют небольшие изменения, чем реальные.

Я знаю, что проблема в var opacity =(svPixel[3]/255);, но я не знаю, как поставить уравнение, чтобы не было таких проблем.

Спасибо за внимание.

Answer 1

Я не знаю точного ответа на ваш вопрос (я даже не уверен, что понимаю сам вопрос), но я сделаю снимок.

Похоже, вы пытаетесь вычислить значение RGB, которое вы видите, когда что-то еще (браузер?) Смешивает непрозрачный холст поверх непрозрачного фона. (Вы уверены, что это правильно делать?)

Во-первых, пожалуйста, не используйте parseInt для округления числа. Он используется для разбора строк , и вы должны использовать его для преобразования huePixel [i] в ​​целое число: parseInt(huePixel[i], 10) (обратите внимание, что я явно указываю основание, чтобы избежать синтаксического анализа чисел как восьмеричных).

Для округления значений следует использовать методы Math: Math.round (до ближайшего целого числа), Math.ceil (округление вверх) или Math.floor (округление вниз).

Возможно, ваша проблема вызвана ошибками округления (трудно сказать без конкретных входных данных и ожидаемых выходных данных расчета). Чтобы минимизировать ошибки округления, вы можете попробовать переписать формулу следующим образом:

(opacity * svPixel[0]) + ((1-opacity) * huePixel[1]) =
  huePixel[1] + opacity * (svPixel[0]-huePixel[1]) =
  huePixel[1] + svPixel[3] * (svPixel[0]-huePixel[1]) / 255