HTML5 Canvas Gri Tonlamalı Resim Renkleri Oluşturma

HTML5 Canvas ile bir görüntünün renklerini gri tonlamak için görüntüdeki tüm pikselleri yineleyebilir, her birinin parlaklığını hesaplayabilir ve ardından kırmızı, yeşil ve mavi bileşenleri parlaklığa eşit olarak ayarlayabiliriz.

Not: getImageData() yöntemi, görüntünün, yürüten kodla aynı etki alanına sahip bir web sunucusunda barındırılmasını gerektirir. Bu koşul yerine getirilmezse, bir SECURITY_ERR istisnası atılır.

Çıktı:

Kod:


<canvas id="canvas" width="578" height="400"></canvas>
<script>
    function drawImage(imageObj) {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
        var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
        // kırmızı
        data[i] = brightness;
        // yeşil
        data[i + 1] = brightness;
        // mavi
        data[i + 2] = brightness;
    }

    // orjinal resmin üzerine yaz
    context.putImageData(imageData, x, y);
    }
    
    var imageObj = new Image();
    imageObj.onload = function() {
    drawImage(this);
    };
    imageObj.src = 'res.jpg';
</script>

function drawImage(imageObj) {

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var x = 69;

var y = 50;

context.drawImage(imageObj, x, y);

var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);

var data = imageData.data;

for(var i = 0; i < data.length; i += 4) {

var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];

// kırmızı

data[i] = brightness;

// yeşil

data[i + 1] = brightness;

// mavi

data[i + 2] = brightness;

}

// orjinal resmin üzerine yaz

context.putImageData(imageData, x, y);

}

var imageObj = new Image();

imageObj.onload = function() {

drawImage(this);

};

imageObj.src = 'res.jpg';

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Gri Tonlamalı Resim Renkleri Oluşturma

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap