ページ

▼

2012年4月5日木曜日

Canvasでネガポジ反転してみた

Canvasで画像を少しいじってみました。


<!DOCTYPE html>
<html>
    <head>
        <title>Canvas</title>
        <meta charset="utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <script>
            $(document).ready(function() {
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");

                var image = new Image();
    image.src = "sample.jpg";
    $(image).load(function() {
        ctx.drawImage(image, 0, 0);

        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var pixels = imageData.data;
        var numPixels = imageData.width * imageData.height;
        for (var i = 0; i < numPixels; i++) {
         pixels[i*4] = 255-pixels[i*4]; // Red
         pixels[i*4+1] = 255-pixels[i*4+1]; // Green
         pixels[i*4+2] = 255-pixels[i*4+2]; // Blue
     };
     ctx.clearRect(0, 0, canvas.width, canvas.height);  
     ctx.putImageData(imageData, 0, 0); 
    });

            });
        </script>
    </head>

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

        </canvas>
    </body>
</html>

元画像

Canvasでネガポジ反転！

Canvasを使うとちょっとした画像処理ならできちゃうのですな。

時刻:

0 件のコメント:

コメントを投稿