0

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>
4

1 に答える 1

2

現状では、oRedPixel、oGreenPixel、oBluePixel の値を変更するだけですが、実際の値はoPixelArray変更されません。

配列の値を直接変更してみてください

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

srcキャンバスには属性がないため、この行は必要ありません

// oCanvas.src = oCanvas.toDataURL();
于 2013-01-21T21:41:30.670 に答える