Проблемы с выборкой цвета из пикселя изображения, нарисованного на закадровом холсте - PullRequest
Новая
       9

Проблемы с выборкой цвета из пикселя изображения, нарисованного на закадровом холсте

2 голосов
/ 13 сентября 2011

Мне нужно сэмплировать цвет пикселя с изображения, но кажется, что я не могу понять это правильно. Я загружаю изображение и рисую его за пределами экрана, затем пытаюсь выбрать цвет пикселя, но всегда получаю 0 значений.

Мой код: 

// Create canvas and set context
var canvas = document.createElement('canvas');
canvas.width = 8;
canvas.width = 8;
var context = canvas.getContext('2d');

// Setup image
var image = new Image();
image.src = 'img.png';
image.onload = function(){
    context.drawImage(image, 0, 0);
}

// Sample a random pixel from the canvas
var x = Math.floor(Math.random()*8);
var y = Math.floor(Math.random()*8);
var pixelInfo = context.getImageData(x,y,1,1);
var rgbaVal = pixelInfo.data;
alert('Image: '+image.src+'\n\nR: '+rgbaVal[0]+'\nG: '+rgbaVal[1]+'\nB: '+rgbaVal[2]+'\nA: '+rgbaVal[3]+'\n\nCoords: '+x+', '+y);

Я не получаю ошибок, и если я пытаюсь нарисовать изображение на экранном холсте, изображение рисуется правильно. Мне не удается найти проблему

Ответы [ 2 ]

2 голосов
/ 13 сентября 2011

Поскольку изображение еще не было загружено и нарисовано. Вы рисуете его после срабатывания загрузки, затем вы также должны получить значение RGB.

Функция image.onload сработает позже, чем ваша функция сэмплирования, поэтому в данный момент вы просто сэмплируете пустой холст.

1 голос
/ 21 декабря 2012 

<canvas id="canvas1" width="200", height="200" style="background:red;">Random Canvas</canvas>
<script>

    var canvas = document.getElementById("canvas1");
    //canvas.width = 200;
    //canvas.width = 200;
    var context = canvas.getContext('2d');

    // Setup image
    var image = new Image();
    image.src = "img/image.jpg";

    image.onload = function()
    {

       context.drawImage(image, 0, 0);

       var x = Math.floor(Math.random()*200);
       var y = Math.floor(Math.random()*200);
       var pixelInfo = context.getImageData(x,y,1,1);
       var rgbaVal = pixelInfo.data;

       alert('Image: '+image.src+'\n\nR: '+rgbaVal[0]+'\nG: '+rgbaVal[1]+'\nB: '+rgbaVal[2]+'\nA: '+rgbaVal[3]+'\n\nCoords: '+x+', '+y);

    }

    // Sample a random pixel from the canvas

</script>

...