操縱畫布上的圖像

Question

我必須在畫布對象上加載圖像，並且在單擊某些按鈕或滑動某些滑塊後，我需要更改此畫布上的某些像素。這是我的代碼到目前爲止：

function CanvasImage(element, src) { 

    var width, height; 
    var canvas = document.getElementById(element); 
    var ctx = canvas.getContext("2d"); 
    var img = new Image; 

    img.onload = function() { 

     width = canvas.width = img.width; 
     height = canvas.height = img.width; 

     ctx.drawImage(img, 0, 0, width, height) 
    }; 
    img.src = src; 

    this.brightness = function (amount) { 

     var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
     var data = imgData.data; 
     for (var i = 0; i < data.length; i += 4) { 

      data[i] += amount; 
      data[i + 1] += amount; 
      data[i + 2] += amount 
     } 
     imgData.data = data; 
     ctx.putImageData(imgData, 0, 0) 
    }; 

    this.transform = function (data) { 

     ctx.save(); 
     this.brightness(data.brightness); 
     ctx.restore() 
    } 

} 

這就是我剛剛添加的功能來操縱圖像的亮度。開始時，圖像被加載到畫布元素。這對我來說很好。功能亮度只是將給予量添加到像素。這也是有效的。我認爲我的問題是轉換功能。我保存畫布上下文的狀態並調用我的轉換函數。在這個操作之後，我恢復了狀態。我會說，上下文應該看起來像早先加載的圖像。

我現在的問題是，更改滑塊並將其恢復到原始狀態後，我的圖像仍然更亮或更暗，並且沒有圖像的原始狀態。你有什麼建議嗎？

我很感謝每一個答案。 ：D

Answer 1

save和restore只保存畫布的狀態而不是圖像數據。狀態是諸如樣式，翻譯，文本對齊等等的東西。

爲了找回原始內容，您需要重繪源代碼或將數據存儲爲使用另一個畫布元素（即，屏幕外畫布），或將數據存儲爲數組（getImageData()）。

另外值得注意的是，putImageData繞過畫布狀態並直接獨立改變像素。

我的建議是保留源提供這樣或那樣的，總是一個新的變化發生之前它重繪的畫布。重置只需重繪源代碼並跳過修改。

ONLINE DEMO HERE

this.brightness = function (amount) { 

    ctx.drawImage(img, 0, 0, width, height) 

    /// no change, just exit 
    if (amount === 0) return; 

    /// ... snipped   
};