collageify/dist/index.js

accepts images, creates a collage, and downloads it as a file, get the dominant colors in the uploaded image

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  createCollage: () => createCollage,
  downloadCanvas: () => downloadCanvas,
  getDominantColorsFromImage: () => getDominantColorsFromImage
});
module.exports = __toCommonJS(index_exports);

// src/browser.ts
async function createCollage({
  images,
  rows = 2,
  cols = 2,
  width = 800,
  height = 800,
  padding = 10,
  backgroundColor = "#ffffff"
}) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("Canvas not supported");
  canvas.width = width;
  canvas.height = height;
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
  const imageElements = await Promise.all(
    images.map((src) => loadImage(src))
  );
  const cellWidth = (width - padding * (cols + 1)) / cols;
  const cellHeight = (height - padding * (rows + 1)) / rows;
  imageElements.forEach((img, index) => {
    const row = Math.floor(index / cols);
    const col = index % cols;
    const x = padding + col * (cellWidth + padding);
    const y = padding + row * (cellHeight + padding);
    ctx.drawImage(img, x, y, cellWidth, cellHeight);
  });
  return canvas;
}
function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => resolve(img);
    img.onerror = reject;
    if (typeof src === "string") {
      img.src = src;
    } else {
      const reader = new FileReader();
      reader.onload = () => {
        img.src = reader.result;
      };
      reader.onerror = reject;
      reader.readAsDataURL(src);
    }
  });
}
function downloadCanvas(canvas, filename = "collage.png") {
  const link = document.createElement("a");
  link.download = filename;
  link.href = canvas.toDataURL("image/png");
  link.click();
}
async function getDominantColorsFromImage(file, colorCount = 5) {
  const image = await loadImage(file);
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("Canvas is not supported");
  const width = canvas.width = image.width;
  const height = canvas.height = image.height;
  ctx.drawImage(image, 0, 0, width, height);
  const imageData = ctx.getImageData(0, 0, width, height);
  const colorMap = {};
  for (let i = 0; i < imageData.data.length; i += 4) {
    const r = imageData.data[i];
    const g = imageData.data[i + 1];
    const b = imageData.data[i + 2];
    const a = imageData.data[i + 3];
    if (a < 128) continue;
    const hex = rgbToHex(r, g, b);
    colorMap[hex] = (colorMap[hex] || 0) + 1;
  }
  const sortedColors = Object.entries(colorMap).sort((a, b) => b[1] - a[1]).slice(0, colorCount).map(([hex]) => hex);
  return sortedColors;
}
function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("").toUpperCase();
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  createCollage,
  downloadCanvas,
  getDominantColorsFromImage
});
//# sourceMappingURL=index.js.map