HTML5 Canvas Resim Verisi

Canvas üzerindeki dikdörtgen alanın her pikseli için resim verilerini elde etmek için, ResimVeri nesnesini tuval bağlamının getImageData() yöntemiyle alabilir ve sonra piksel özelliklerine data özelliğinden erişebiliriz. Resim verilerindeki her piksel, kırmızı, yeşil, mavi ve alfa bileşeni olan dört bileşen içerir.

Resim verisi nesnesiyle piksel verilerine erişmek için üç yaygın teknik vardır.

bölgenin sol üst köşesinden başlayarak sağ alt köşesine kadar tüm pikselleri yineleyerek
x, y koordinatlarına dayalı piksel verilerini toplama
Her piksel için x, y koordinatlarını takip ederken tüm piksellerin üzerinde yineleme

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(resimNesne) {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var resimX = 50;
    var resimY = 100;
    var resimWidth = resimNesne.width;
    var resimHeight = resimNesne.height;

    context.drawImage(resimNesne, resimX, resimY);

    var resimData = context.getImageData(resimX, resimY, resimWidth, resimHeight);
    var data = resimData.data;

    // iterate over all pixels
    for(var i = 0, n = data.length; i < n; i += 4) {
        var red = data[i];
        var green = data[i + 1];
        var blue = data[i + 2];
        var alpha = data[i + 3];
    }

    // pick out pixel data from x, y coordinate
    var x = 20;
    var y = 20;
    var red = data[((resimWidth * y) + x) * 4];
    var green = data[((resimWidth * y) + x) * 4 + 1];
    var blue = data[((resimWidth * y) + x) * 4 + 2];
    var alpha = data[((resimWidth * y) + x) * 4 + 3];
    
    // iterate over all pixels based on x and y coordinates
    for(var y = 0; y < resimWidth; y++) {
        // loop through each column
        for(var x = 0; x < resimWidth; x++) {
        var red = data[((resimWidth * y) + x) * 4];
        var green = data[((resimWidth * y) + x) * 4 + 1];
        var blue = data[((resimWidth * y) + x) * 4 + 2];
        var alpha = data[((resimWidth * y) + x) * 4 + 3];
        }
    }
    }
    var resimNesne = new Image();
    resimNesne.onload = function() {
    drawImage(this);
    };
    resimNesne.src = 'res.jpg';

</script>

function drawImage(resimNesne) {

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

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

var resimX = 50;

var resimY = 100;

var resimWidth = resimNesne.width;

var resimHeight = resimNesne.height;

context.drawImage(resimNesne, resimX, resimY);

var resimData = context.getImageData(resimX, resimY, resimWidth, resimHeight);

var data = resimData.data;

// iterate over all pixels

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

var red = data[i];

var green = data[i + 1];

var blue = data[i + 2];

var alpha = data[i + 3];

}

// pick out pixel data from x, y coordinate

var x = 20;

var y = 20;

var red = data[((resimWidth * y) + x) * 4];

var green = data[((resimWidth * y) + x) * 4 + 1];

var blue = data[((resimWidth * y) + x) * 4 + 2];

var alpha = data[((resimWidth * y) + x) * 4 + 3];

// iterate over all pixels based on x and y coordinates

for(var y = 0; y < resimWidth; y++) {

// loop through each column

for(var x = 0; x < resimWidth; x++) {

var red = data[((resimWidth * y) + x) * 4];

var green = data[((resimWidth * y) + x) * 4 + 1];

var blue = data[((resimWidth * y) + x) * 4 + 2];

var alpha = data[((resimWidth * y) + x) * 4 + 3];

}

var resimNesne = new Image();

resimNesne.onload = function() {

drawImage(this);

};

resimNesne.src = 'res.jpg';

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Resim Verisi

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap