Как вы просто получаете массив данных пикселей из изображения?
Спасибо всем за отклик. Я должен был быть более конкретным с моим вопросом. Я рассмотрел несколько примеров, но вот один из W3 Schools (спасибо @Pointy за то, что он указал, что это не источник, на который следует полагаться - каламбур не предназначен).
http://www.w3schools.com/tags/canvas_getimagedata.asp
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
document.getElementById("scream").onload = function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i + 1] = 255 - imgData.data[i + 1];
imgData.data[i + 2] = 255 - imgData.data[i + 2];
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 0, 0);
};
</script>
</body>
</html>
Прежде всего, я немного сбит с толку, поскольку пример на веб-сайте W3 Schools показывает цвета пикселей инвертируемого изображения, но когда я копирую код в Sublime Text 2, сохраняю его и открываю в Chrome, цвета пикселей изображение не становится перевернутым, и изображение просто выглядит точно так же снова рядом с ним.
Мой главный вопрос: как я могу добавить строку в этот код, чтобы показать весь массив данных пикселей для изображения?
Я добавил пустой div с идентификатором «data» под изображением и добавил следующий код, но весь массив данных пикселей не появился:
document.getElementById("data").innerHTML=imgData.data;
Я также попытался увидеть хотя бы длину массива данных пикселей, добавив следующее, но это не сработало:
document.getElementById("data").innerHTML=imgData.data.length;
Я рассмотрел несколько примеров манипулирования данными пикселей изображения из различных источников и несколько раз пытался получить весь массив данных пикселей, но не смог.
Я хотел бы просмотреть массив данных пикселей, чтобы распознать символы или изображения в пределах изображения и начать видеть шаблоны, которые могут возникать из определенных вещей на изображении.
Большое спасибо за Вашу помощь.