Mouseover上的灰度

Question

我想要使用HTML5畫布在Javascript中將圖像轉換爲灰度。 我在這裏做錯了什麼？！我知道它非常接近！

function convertToGreyscale(str) 
{ 
    // Get the Canvas 
    var oCanvas = document.getElementById(str); 
    // Get the Canvas Context 
    var oContext = oCanvas.getContext('2d'); 

    // Get the height & width of the canvas 
    var oHeight = oCanvas.height; 
    var oWidth = oCanvas.width; 

    // Get the image data object 
    // getImageData(startX,startY,endX,endY) 
    var oImageData = oContext.getImageData(0,0,oHeight,oWidth); 

    // Get the actual pixel information 
    var oPixelArray = oImageData.data; 
    var iLength = oPixelArray.length; 

    for (var iCount = 0; iCount < iLength; iCount += 4) 
    { 
     var oRedPixel = oPixelArray[iCount]; 
     var oGreenPixel = oPixelArray[iCount+1]; 
     var oBluePixel = oPixelArray[iCount+2]; 
     var oGreyValue = oRedPixel * 0.2126 + oGreenPixel * 0.7152 + oBluePixel * 0.0722; 

     // Set R,G & B to be the new grey value 
     oRedPixel = oGreyValue; 
     oGreenPixel = oGreyValue; 
     oBluePixel = oGreyValue; 

    } 

    // Set the greyscale image back on the canvas. 
    oContext.putImageData(oImageData,0,0); 
    oCanvas.src = oCanvas.toDataURL(); 

} 

下面是相關HTML：

<canvas id="myCanvas" width="500" height="500"></canvas> 

<div style="border: 1px solid black" onmouseover="convertToGreyscale('myCanvas')">Mouseover</div> 

Answer 1

既然這樣你只需更改oRedPixel，oGreenPixel和oBluePixel的值，但實際oPixelArray保持不變。

嘗試直接改變數組值

oPixelArray[iCount] = oGreyValue; 
oPixelArray[iCount+1] = oGreyValue; 
oPixelArray[iCount+2] = oGreyValue; 

而且你不需要這條線作爲畫布沒有一個src屬性

// oCanvas.src = oCanvas.toDataURL();