0

jqueryを使って画像のR,G,Bの色を変えたいです。画像をキャンバスに変換していますが、うまくいきません。エラーを修正するか、何が欠けているかを修正してください。

今回は、これが機能する場合は赤色を変更するだけです。残りは同じことができます。

これが私のコードです

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

   <script type="text/javascript" src="js/jquery-1.8.3.js"></script>


    <script type="text/javascript">

    function redSwitch() {

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        var photo = new Image();
        photo.src = $('#pic').attr('src');

        canvas.width = photo.width;
        canvas.height = photo.height; 
        ctx.drawImage(photo, 0, 0); 
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var val = $('#red').val();

        for(var y=0; y<imgPixels.height; y++)
        {
            for(var x=0; x<imgPixels.width; x++)
            {
                var i = (y * 4) * imgPixels.width + x * 4;
                if(imgPixels.data[i]+val > 255)
                {
                    imgPixels.data[i] = 255;
                }
                else
                {
                    imgPixels.data[i] = imgPixels.data[i]+val;
                }
            }
        }

    }


    $(document).ready(function(){

                $('#red').change(function(){
        redSwitch();
    });});
    </script>
</head>
<body>

<img id="pic" src="pool.jpg" />

<input type="range" id="red"  min="-255" max="255" value="0" />


</body>
</html>
4

1 に答える 1

0

ソース画像データを取得して実際に変更するが、元に戻さないというコードの問題。最初に、キャンバスを変更ごとに作成するのではなく、静的タグとして定義する必要があります。

<canvas id="main"></canvas>

次に、変更コールバックで #main からコンテキストを取得します。

var canvas = $('#main')[0];
var ctx = canvas.getContext('2d');

最後に、ピクセル操作が完了したら、変更されたバイトを #main に描画します。

ctx.putImageData(imgPixels, 0, 0);

そして、1つの補足：画像要素のクローンを作成する必要はありません。変更しないため、既存のものを使用してください：

var photo = $('#pic')[0];
于 2013-05-16T08:31:06.347 に答える