Итак, я использую эту функцию getImageData для переменной «context», которую я создал внутри части <script>
, и когда я делаю что-то, например, рисуем прямоугольник, тогда делаю ctx.getImageData.data [0] он покажет красное значение того прямоугольника, который я нарисовал на холсте.Но когда я импортирую изображение и рисую его на холсте, и пытаюсь использовать getImageData.data [0], все, что я получаю, это 0, что не имеет смысла, я не уверен, почему оно неправильно читает изображение.Я попробовал учебники по этому вопросу, но все они расплывчаты и содержат только сегменты, написанные вместе.
Итак, когда я рисую прямоугольник, значение его цвета получается просто отлично, но снова, когда я рисую изображение, даже не рисуя прямоугольник на холсте, я никогда не получаю значение этого конкретного пикселя на изображении.
Может ли кто-нибудь мне помочь?Вот мой текущий код:
<html>
<head>
<title>
Color Test :)
</title>
</head>
<body>
<canvas id = "ColorTest" width = "500" height = "500">
please don't use shitty browsers :)
</canvas>
<script>
//netscape.security.PrivilegeManage…
var canvas = document.getElementById("ColorTest")
, ctx = canvas.getContext("2d")
, image = new Image()
image.onload = function(){
ctx.drawImage(image,0,0)
}
image.src = 'Pikachu.gif'
ctx.fillStyle = "rgb(123,40,170)"
ctx.fillRect(0,0,100,100)
var imagedata = ctx.getImageData(0,0,100,100)
, spot = 0
while(imagedata.data[spot] == 0){
spot++
}
console.log(imagedata.data[0])
</script>
</body>
</html>