Javascript-форум - Работа с изображениями

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Работа с изображениями (https://javascript.ru/forum/misc/37757-rabota-s-izobrazheniyami.html)

Работа с изображениями

Доброго всем дня, есть такой вопрос.
Есть html-страница, там есть картинка.
Нужно получить всю возможную информацию о каждом пикселе изображения - узнать его цвет(в любом формате любой цветовой схемы), яркость, прозрачность, координаты etc.
В идеале - перебрать всю картинку циклом по пикселю(с возможностью указать шаг - т.е. каждый пиксель, каждый десятый пиксель или каждый сотый и т.п.) и сложить все это в структуру данных, удобную для обработки.
Я встречал подобное в сети, но там это реализовывалось на сервер-сайде, такое возможно сделать на клиенте?
Я в этих ваших программированиях не специалист, поэтому буду благодарен за развернутый ответ, либо за указания, в каком направлении гуглить.
Заранее спасибо!

gismthedwarf,
Загрузить в canvas, ежели изо с того же домена , что и сайт - имеем доступ к кажому пикселю картинки

Deff,
В идеале логика такая:
Есть страница, там кнопка "загрузить файл". Пользователь загружает картинку, она попадает на сервер. Сразу же после этого, картинка выводится в специально отведенный блок на страницу. Теперь из этой картинки, что уже есть на странице, любыми средствами клиента(js) нужно это картинку анализировать: брать каждый пиксель и получать о нём всю возможную информацию.
Подскажите названия функций js или какие-либо библиотеки, которые умеют получать в качестве входных данных этот самый пиксель и возвращать цвет, яркость и т.д. этого пикселя. Или тэги, по которым гуглить. Спасибо!

Вот вам пример:

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    *{padding:0;margin:0;}
    html,body{
        width: 100%;
        height: 100%;
        background: rgb(157,213,58);
    }
	canvas{
		cursor: crosshair;
		position: relative;
	}
	#fixed{
		position: fixed;
		right: 0;
		top: 0;
		background: rgba(222,222,244,.6);
		border: 5px solid #000;
		z-index:2;
	}
    </style>
</head>
<body>
 
<script type="text/javascript">
function id(i){return document.getElementById(i)}
function read(file) {
    var d = document,
        canvas = d.createElement('canvas'),
        ctx = canvas.getContext('2d'),
		img = new Image(),
		out = id('output');
		
    img.onload = function() {
		canvas.width = img.width;
		canvas.height = img.height;
        
		ctx.drawImage(img, 0, 0); 

		var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
		
		canvas.onmousemove = function(e){
			var i = (e.layerX + e.layerY * canvas.width) * 4;
			
			out.innerHTML = 'x: ' + e.layerX +
			'<br/>y: ' + e.layerY +
			'<br/>r: ' + data[i] +
			'<br/>g: ' + data[i+1] +
			'<br/>b: ' + data[i+2] +
			'<br/>a: ' + data[i+3];
			out.parentNode.style.borderColor = 'rgba(' + data[i] + ',' + data[i+1] + ',' + data[i+2] + ',' + data[i+3] + ')';
		};
		
		d.body.appendChild(canvas);
    }
    img.src = URL.createObjectURL( file );
    
}
</script>
<div id="fixed" >
	<input type="file" id="input" onchange="read(files[0])"/>
	<div id="output"/></div>
</div>
</body>
</html>

Здесь всё что касается js. Работу с цветами и с сервером - гуглите сами.