問題在Javascript中的色彩和帆布

我已經使用這個代碼精確嘗試有顏色的RGB代碼：問題在Javascript中的色彩和帆布

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);，但我不知道如何讓方程沒有這個問題。

感謝您的關注。

來源

2010-10-20 A.Quiroga

在設置不透明度之前，svPixel的價值是什麼？ – EMMERICH 2010-10-20 08:59:34

svPixel [3]從0到255運行。 – 2010-10-20 09:04:48

您只是更改一個像素，還是打算將整個畫布內容與背景混合？如果將畫布像素設置爲不透明度<255，則它們將與底層元素和背景混合，無需額外的工作。 – andrewmu 2010-10-20 09:30:13

我不知道你的問題的確切答案（我甚至不知道我是否理解這個問題本身），但我會拍攝。

看起來你正在試圖計算當別的東西（瀏覽器？）在不透明背景上混合不透明畫布時看到的RGB值。（你確定這是正確的做法嗎？）

首先，請不要使用parseInt四捨五入數字。它使用to parse strings，你應該使用它來將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

來源

2010-10-25 17:30:43 Nickolay

問題在Javascript中的色彩和帆布

回答

相關問題