transparent-pixel-generator/lib/transparent-pixel-generator.js

A lightweight, dependency-free library to generate transparent pixel PNGs on the client-side, ideal for creating dynamic backgrounds and placeholders without server requests.

function l(a) {
  let r = a.startsWith("#") ? a.slice(1) : a;
  if (r.length === 3 && (r = r.split("").map((i) => i + i).join("")), !/^[a-f\d]{6}$/i.test(r))
    return null;
  const e = parseInt(r, 16), s = e >> 16 & 255, o = e >> 8 & 255, c = e & 255;
  return { r: s, g: o, b: c };
}
function h({
  width: a = 1,
  height: r = 1,
  color: e = "#ffffff",
  alpha: s = 0
}) {
  let { r: o, g: c, b: i } = { r: 255, g: 255, b: 255 };
  const g = typeof s == "number" && !isNaN(s) ? Math.max(0, Math.min(1, s)) : s;
  if (typeof e == "string" && e.startsWith("#")) {
    const t = l(e);
    t && (o = t.r, c = t.g, i = t.b);
  } else {
    const t = e.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/);
    if (t)
      o = parseInt(t[1], 10), c = parseInt(t[2], 10), i = parseInt(t[3], 10);
    else
      throw new Error("Invalid color format. Use valid hex or rgb formats.");
  }
  const n = document.createElement("canvas");
  n.width = a, n.height = r;
  const f = n.getContext("2d");
  if (!f)
    throw new Error("Failed to get canvas context");
  return f.clearRect(0, 0, n.width, n.height), f.fillStyle = `rgba(${o}, ${c}, ${i}, ${g})`, f.fillRect(0, 0, n.width, n.height), n.toDataURL("image/png");
}
export {
  h as transparentPixelGenerator
};