HTML5 Canvas Resim Renklerini Ters Çevir

HTML5 Canvas ile bir resmin renklerini ters çevirmek için, görüntüdeki tüm piksellerin üzerinde yineleyebilir ve her bileşeni maksimum renk değerinden (255) çıkararak kırmızı, yeşil ve mavi bileşenleri tersine çevirebiliriz. Güncellenmiş görüntü verilerini putImageData() yöntemiyle veri dizisi ve konumla kaydedebiliriz.

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) {
        // kırmızı
        data[i] = 255 - data[i];
        // yeşil
        data[i + 1] = 255 - data[i + 1];
        // mavi
        data[i + 2] = 255 - data[i + 2];
    }

    // orjinal resmin üzerine ekleyin
    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) {

// kırmızı

data[i] = 255 - data[i];

// yeşil

data[i + 1] = 255 - data[i + 1];

// mavi

data[i + 2] = 255 - data[i + 2];

}

// orjinal resmin üzerine ekleyin

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 Resim Renklerini Ters Çevir

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap