JuicyDonut

Для разбиения изображения на пиксели можно использовать 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) {
    // здесь вы можете создать и возвращать нужный значок на основе цвета пикселя
}