當alpha = 0時畫布損壞rgb

我使用HTML畫布投影圖像。當我嘗試操縱圖像數據的Alpha通道時，我發現任何時候都會將其清零，像素中的其他值也會發生變化。即使設置爲較低的數字，它們似乎也會改變。從控制檯執行此操作當alpha = 0時畫布損壞rgb

canvas=document.getElementById('canvasid') 
ctx=canvas.getContext('2d') 
mydata=ctx.getImageData(20,20,20,20) 
for (var i=0;i<1600;i+=4){mydata.data[i+3]=0} 
ctx.putImageData(mydata,20,20) 
mydata=ctx.getImageData(20,20,20,20) 
for (var i=0;i<1600;i+=4){mydata.data[i+3]=255} 
ctx.putImageData(mydata,20,20)

導致黑色方塊而不是恢復應該在RGB值中的圖像。

發生在Chrome和Safari瀏覽器，沒有測試其它

任何線索，我在做什麼錯。

來源

2014-03-13 bobbdelsol

當涉及到alpha通道和畫布時，webkit瀏覽器（也可能是Blink）存在幾個問題。這是一個related issue。

markE的答案可能是實際發生的事情，但它不是應發生。 Alpha通道的整個亮點是RGB值保持不變（以及避免手動混色等）。

Webkit瀏覽器需要預先乘以該值（當在瀏覽器中合成時），但是這樣的結果似乎「漏」到了不應該的畫布位圖中。

您正確地期望值在更改Alpha通道時保持不變。這是一個錯誤，您應該將其報告給Chromium團隊（編輯：現在has been reported）。

可能的變通

唯一的變通辦法，我能想到的對飛，將是保持原始圖像數據作爲一個單獨的緩存，並從源緩衝區的數據複製到目標緩衝區同時改變Alpha通道。當然，如果你需要在同一時間更新RGB /像素數據，那麼除非你願意更新像素（RGB）僅用於屏幕外緩衝區，否則你將會恢復到同樣的狀態 - 這可以可以使用一個32位的類型化數組緩衝區來屏蔽alpha通道（會降低性能）。

來源

2014-03-13 19:50:55 K3N

感謝您的幫助。我有其他原因保留原件。我只保存一個畫布，其中有未遮罩的Alpha通道和getImageData，然後將Alpha和putImageData設置爲我正在顯示的畫布。 – bobbdelsol

是的，這是意想不到的行爲，不是*應該發生的事情。順便說一句，除了Chrome之外，IE11和FF27也會出現這種相同的不良行爲。 – markE

當您向畫布（alpha == 0）寫入完全透明的像素時，瀏覽器會自動使用零填充r，g，b值。

所以你的第一個putImage用rgba（0,0,0,0）填充;

當你再次getImage這些像素，你改變透明度爲255（完全不透明），你有rgba（0,0,0,255）;

這是黑色的rgb。

這就是爲什麼你的代碼導致黑色像素。

如果要恢復原始像素，可以將putImageData與原始mydata一起使用（不用另一個getImageData進行重新設定）。

來源

2014-03-13 17:25:30 markE

你是對的，看到我的評論被檢查爲正確的答案。 – bobbdelsol

當alpha = 0時畫布損壞rgb

回答

相關問題