Как используя js сделать разбитие изображения на сектора и пометить каждый сектор оригинальным значком?

Question

[JuicyDonut]

Здравствуйте, товарищи. Являюсь абсолютным новичком в веб, поэтому пардоньте за глупые вопросы.
Задался целью (не суть важно зачем) написать сайт, где был бы подобный функционал сайту https://xfloss.ru/ .
И пока на стадии придумывания алгоритма редактирования загруженного изображения.
Не могу разобраться, как в js реализовать 2 вещи:
1) Загруженное изображение разбить на пиксели с возможностью крутить ползунок размерности разбиения.
2) Как присвоить каждой группе пикселей одного цвета свой оригинальный значок или номер прям на полученном разбитом на пиксели изображении.
Кто шарит, подскажите, пожалуйста, хотя бы какие слова гуглить, в каком направлении копать.

Comments

[imko]

Пиксель - одна точка одного конкретного цвета. Ты точно хочешь разбивать его на пиксели а не просто на сектора?

[JuicyDonut]

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

[Вадим]

в каком направлении копать.

canvas

[JuicyDonut]

Вадим, сердечно благодарю

Answer 1

[Lapita12]

Для разбиения изображения на пиксели можно использовать HTML5 Canvas и JavaScript.
Пример кода на JavaScript для разбиения изображения на пиксели с определенным размером:

function drawPixelatedImage(image, pixelSize) {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    const pixelImage = document.createElement('canvas');
    pixelImage.width = pixelSize;
    pixelImage.height = pixelSize;
    const pixelCtx = pixelImage.getContext('2d');
    pixelCtx.imageSmoothingEnabled = false;
    pixelCtx.drawImage(canvas, 0, 0, pixelSize, pixelSize);

    const resizedImage = document.createElement('canvas');
    resizedImage.width = canvas.width; 
    resizedImage.height = canvas.height;
    const resizedCtx = resizedImage.getContext('2d');
    resizedCtx.imageSmoothingEnabled = false;
    for (let x = 0; x < canvas.width; x += pixelSize) {
        for (let y = 0; y < canvas.height; y += pixelSize) {
            resizedCtx.drawImage(pixelImage, x, y, pixelSize, pixelSize, x, y, pixelSize, pixelSize);
        }
    }

    return resizedImage.toDataURL('image/png');
}

Чтобы присвоить каждому сектору свой оригинальный значок, можно использовать карту на изображении. В HTML5 Canvas можно создать карту на изображении с помощью функции createImageData().

function createImageMap(image) {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixelMap = [];

    for (let i = 0; i < imageData.data.length; i += 4) {
        const red = imageData.data[i];
        const green = imageData.data[i + 1];
        const blue = imageData.data[i + 2];
        const alpha = imageData.data[i + 3];

        if (alpha === 0) {
            pixelMap.push(null);
        } else {
            pixelMap.push({ r: red, g: green, b: blue });
        }
    }

    return pixelMap;
}

Затем вы можете использовать карту для установки значков для каждого сектора изображения. Пример кода на JavaScript для установки значков на каждый сектор:

function markSectorsWithIcons(image, pixelSize) {
    const pixelatedImage = drawPixelatedImage(image, pixelSize);
    const pixelMap = createImageMap(image);

    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    const resizedImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const resizedData = resizedImageData.data;

    for (let x = 0; x < canvas.width; x += pixelSize) {
        for (let y = 0; y < canvas.height; y += pixelSize) {
            const dataIndex = (y * canvas.width + x) * 4;
            const pixelColor = pixelMap[dataIndex / 4];
            const markerImage = getMarkerImage(pixelColor);

            if (markerImage) {
                const pixelImage = new Image();
                pixelImage.src = markerImage;
                ctx.drawImage(pixelImage, x, y, pixelSize, pixelSize);
            }
        }
    }

    return canvas.toDataURL('image/png');
}

function getMarkerImage(color) {
    // здесь вы можете создать и возвращать нужный значок на основе цвета пикселя
}

Comments

[JuicyDonut]

большое спасибо