沒有putImageData（）的情況下如何在HTML5畫布上繪制？

Question

我發現了這個問題https://code.google.com/p/android/issues/detail?id=17565 ，看來這個問題不會很快解決，所以我想知道，我該如何借鑒畫布而不使用putImageData（）？

var imgCanvas = document.createElement("canvas");
var ctx = imgCanvas.getContext("2d");
var imageObj.src = 'img/someImage.png';
imageObj.onload = function(){

ctx.draw(imageObj,0,0);
var imageData = ctx.getImageData(0,0,30,30);
var data = imageData.data;          
for(var i = 0, n = data.length; i < n; i += 4) {                                 
    data[i]+=20;//red   
    data[i+1]-=20;//green
    data[i+2]-=20;//blue
    data[i+3]=0; //alpha, но я не трогаю этого параметра             
}
ctx.putImageData(imageData,0,0);
}

例如，在普通瀏覽器中，使用上述腳本更改像素rgba = [100,100,100,200]的結果應為rgba = [120,80,80,200]，但是在android 4.2的默認瀏覽器上，結果不是預期的，這很奇怪例如rgba = [153,102,102,200]。 無論如何，關鍵是存在一個問題，我想知道，如何不使用putImageData（）方法更改一個圖像的rgba參數？ 如果沒有辦法使用畫布，我想知道，該如何解決另一種方法呢？ 我需要動態更改圖像顏色，並且需要在Android上使用它（我正在使用phonegap，其結果與默認android瀏覽器中的結果相同）。 謝謝！

Answer 1

如果您想將整個圖像的顏色更改一個因子（例如，將r增加10，將g增加30，將b增加4），則可以使用globalComposite操作： https : //developer.mozilla.org/en-US/ docs / Web / Guide / HTML / Canvas_tutorial / Compositing

檢查“較輕”和“較暗”操作。

如果您想為每個像素設置不同的顏色/因數，我認為putImageData是可行的方法...

希望能幫助到你。