@onesy/utils/imageToPalette.js

Utils

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const isEnvironment_1 = __importDefault(require("./isEnvironment"));
const quantize_1 = __importDefault(require("./quantize"));
const imageToPalette = (value, options = { amount: 4, size: 400, allowCrossOrigin: false }) => new Promise(resolve => {
    if ((0, isEnvironment_1.default)('browser')) {
        const img = new Image();
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        if (options.allowCrossOrigin)
            img.crossOrigin = 'Anonymous';
        img.onload = () => {
            const size = options.size || 140;
            let width = img.naturalWidth || img.offsetWidth || img.width;
            let height = img.naturalHeight || img.offsetHeight || img.height;
            // resize
            if (width > size) {
                height /= width / size;
                width = size;
            }
            if (height > size) {
                width /= height / size;
                height = size;
            }
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            // image data
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            const length = data.length;
            const values = [];
            // array of rgb values
            for (let i = 0; i < length; i += 4)
                values.push([data[i], data[i + 1], data[i + 2]]);
            // quantize image values to a palette
            const result = (0, quantize_1.default)(values, options.amount || 4);
            return resolve(result.map(item => `rgb(${item[0]}, ${item[1]}, ${item[2]})`));
        };
        img.onerror = () => resolve([]);
        // src
        img.src = value;
    }
    else
        resolve(undefined);
});
exports.default = imageToPalette;