Как разбить картинку на пиксели?

Question

[Rubix]

Всем привет! Делаю игру вроде пиксель-арта, где надо по номерам раскрашивать картинку. Записываю картинки в формате матрицы (row => col => color):

let matrix = [
	['white', 'red', 'white', 'red', 'white'],
	['red', 'red', 'red', 'red', 'red'],
	['red', 'red', 'red', 'red', 'red'],
	['white', 'red', 'red', 'red', 'white'],
	['white', 'white', 'red', 'white', 'white']
]

На примере я показал именованные цвета, но можно и hex'ом.
Для выбора цвета я перебираю этот массив и записываю цвет в отдельный массив. Если такой цвет уже есть, то пропускаю:

let colors = [];
for (let i = 0; i < matrix.length; i++) {
	for (let j = 0; j < matrix[0].length; j++) {
		console.log(matrix[i][j]);
		if (colors.indexOf(matrix[i][j]) === -1) colors.push(matrix[i][j]);
	}
}

Как мне сделать функцию, которая будет разбивать обычную картинку на пиксели и записывать их в matrix? Вручную записывать не удобно.

Answer 1

[Сергей Соколов]

Загрузить картинку в canvas, взять imageData и пройтись циклом.
См. уроки как работать с canvas на MDN, в частности Pixel Manipulation.

Набросал работающий пример:

Comments

[Rubix]

Ну, а как сделать более мельче пиксели? Я в цикле 10 меняю на 5, появляются красные цвета, их нет в картинке. Не, я всё понимаю, пиксели RGB и все такое, но вроде должно быть не так.

[Сергей Соколов]

Rubix, я слегка ошибся в коде, а вы не прочитали ссылку и не поняли код.
imageData содержит последовательность значений r g b a r g b a ...
В примере я не все 10 тыс значений вывожу а только каждый 100-й пиксель. Чуть поправил код, теперь левых цветов не должно вылезать. Но приложите усилие, поймите код.

[Rubix]

Сергей Соколов, спасибо!!!

[Rubix]

Сергей Соколов, а как свою картинку поместить? Я пытаюсь, не выходит

[Сергей Соколов]

Rubix, свою надобно с https:// хостинга какого-ньть.

[Rubix]

Сергей Соколов, а с компа никак?

[Сергей Соколов]

Rubix, ну там заморочки с безопасностью у браузеров. Если JS тоже лежит локально, то, наверное, можно. Или можно под nodejs переписать

[Rubix]

Сергей Соколов, ну да локально) Я тупо для себя делаю

Answer 2

[Mors Clamor]

Мне таки думается, что в таких играх под "пикселем" подразумевается некий квадрат определенного размера (тот же div). Вам надо создать сетку из таких квадратов, ловить нажатия по ним и обновлять матрицу соответственно.

Comments

[Rubix]

Я на канвасе это всё делаю! Все работает, просто надо разбить картинку!!!!