Javascript 鼠标悬停时的灰度

我正在尝试使用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();

}

函数convertToGreyscale（str）
{
//拿画布
var oCanvas=document.getElementById（str）；
//获取画布上下文
var oContext=oCanvas.getContext（'2d'）；
//获取画布的高度和宽度
var oHeight=oCanvas.高度；
var oWidth=oCanvas.width；
//获取图像数据对象
//getImageData（startX、startY、endX、endY）
var oImageData=oContext.getImageData（0,0，oHeight，oWidth）；
//获取实际像素信息
var oPixelArray=oImageData.data；
var iLength=阿片素数组.length；
对于（变量iCount=0；iCount

以下是相关的HTML：

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

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

鼠标盖

目前，您只需更改oRedPixel、oGreenPixel和oBluePixel的值，但实际的

oPixelArray

保持不变

尝试直接更改数组值

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

您不需要这一行，因为画布没有

src

属性

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

---

你已经计算出了RGB像素（例如oRedPixel）的值，但你没有对它们做任何事情……我想他在这里做了到

oImageData.data

中的实际

Uint8ClampedArray

？不确定，因此出现问题！oPixelArray是数组的引用，而不是副本。单个像素值（或像素等）是lostsource指出的副本。