Ku6epXBOCTuK/easy-png-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add text tools

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-07 10:38:36 +05:00
parent a49785764b
commit e5b76ca3e1
3 changed files with 271 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/core/textio.ts
+1 -1
View File
@@ -85,7 +85,7 @@ export function stripDataUri(text: string): string {
return m ? text.slice(m[0].length) : text.trim();
}
export function base64ToBytes(text: string): Uint8Array {
export function base64ToBytes(text: string): Uint8Array<ArrayBuffer> {
const clean = text.replace(/\s+/g, "");
const binary = atob(clean);
const bytes = new Uint8Array(binary.length);
web/src/lib/registry-new/analyze.ts
+85
View File
@@ -7,6 +7,9 @@ import {
rarityPredicate,
renderPredicateMask,
} from "../core/masks";
import { hasTransparency, isGrayscale, orientationOf } from "../core/analyze";
import { encode } from "../core/io";
import { base64ToBytes, looksLikePng, stripDataUri } from "../core/textio";
interface ExtractColorParams {
color: string;
@@ -176,6 +179,83 @@ const uniqueColorMask: ToolEntry<UniqueColorParams> = {
run: (img, p) => renderMask(img, p, rarityPredicate(img, p.rarity)),
};
interface NoParams {}
const emptySchema = toolSchema<NoParams>({});
const verifyIsPng: ToolEntry<NoParams> = {
id: "verify-is-png",
title: "Verify If Image Is a PNG",
description:
"Checks the signature of pasted base64 / data-uri content and reports whether it is a real PNG.",
category: "analyze",
schema: emptySchema,
input: "text",
result: "verdict",
textToText: (text) =>
looksLikePng(base64ToBytes(stripDataUri(text)))
? "Yes — valid PNG signature."
: "No — the content is not a PNG.",
};
const pngIsGrayscale: ToolEntry<NoParams> = {
id: "png-is-grayscale",
title: "Check: is PNG grayscale?",
description: "Reports whether the image consists only of shades of gray.",
category: "analyze",
schema: emptySchema,
result: "verdict",
toText: (img) =>
isGrayscale(img) ? "Yes — grayscale." : "No — contains colors.",
};
const pngFileSize: ToolEntry<NoParams> = {
id: "png-file-size",
title: "PNG File Size",
description: "Encodes the image as PNG and reports the resulting file size.",
category: "analyze",
schema: emptySchema,
domOnly: true,
result: "verdict",
toText: async (img) => {
const blob = await encode(img, "image/png");
const kb = blob.size / 1024;
const kbText = kb >= 100 ? Math.round(kb).toString() : kb.toFixed(1);
return `${kbText} KB`;
},
};
const pngIsTransparent: ToolEntry<NoParams> = {
id: "png-is-transparent",
title: "Check: is PNG transparent?",
description:
"Reports whether the image contains transparent or semi-transparent pixels.",
category: "analyze",
schema: emptySchema,
result: "verdict",
toText: (img) =>
hasTransparency(img) ? "Yes — has transparency." : "No — fully opaque.",
};
const pngOrientation: ToolEntry<NoParams> = {
id: "png-orientation",
title: "PNG orientation",
description: "Reports whether it is portrait, landscape or square.",
category: "analyze",
schema: emptySchema,
result: "verdict",
toText: (img) => {
switch (orientationOf(img)) {
case "portrait":
return "Portrait";
case "landscape":
return "Landscape";
default:
return "Square";
}
},
};
export const analyzeEntries = [
extractColor,
showTransparent,
@@ -184,4 +264,9 @@ export const analyzeEntries = [
lightPixelMask,
darkPixelMask,
uniqueColorMask,
verifyIsPng,
pngIsGrayscale,
pngFileSize,
pngIsTransparent,
pngOrientation,
];
web/src/lib/registry-new/convert.ts
+185 -1
View File
@@ -1,7 +1,20 @@
import type { ToolEntry } from "./types";
import { field, toolSchema } from "../registry-schema";
import { flattenOntoColor } from "../core/alpha";
import {
base64ToBytes,
bytesToImage,
imageToByteRows,
imageToRgbValues,
rgbValuesToImage,
stripDataUri,
} from "../core/textio";
import { hexToPixels, pixelsToHex } from "../core/text";
import { clonePixelImage } from "../core/types";
import { decodeBytes, decodeSvgText, toBase64, toDataUrl } from "../core/io";
const widthProps = (defaultValue: number) =>
field.number({ min: 1, max: 10000, step: 1, default: defaultValue });
interface ConvertToJpgParams {
background: string;
@@ -58,4 +71,175 @@ const convertToBmp: ToolEntry<ConvertToBmpParams> = {
output: { mime: "image/bmp", ext: "bmp" },
};
export const convertEntries = [convertToJpg, convertToWebp, convertToBmp];
interface NoParams {}
const emptySchema = toolSchema<NoParams>({});
const pngToBase64: ToolEntry<NoParams> = {
id: "png-to-base64",
title: "PNG to Base64",
description:
"Encodes the image into a base64 string for embedding in code or styles.",
category: "convert",
schema: emptySchema,
result: "text",
toText: (img) => toBase64(img),
};
const pngToDataUri: ToolEntry<NoParams> = {
id: "png-to-data-uri",
title: "PNG to Data URI",
description:
"Builds a full data-uri (data:image/png;base64,…) for embedding in HTML/CSS.",
category: "convert",
schema: emptySchema,
result: "text",
toText: (img) => toDataUrl(img),
};
const pngToHex: ToolEntry<NoParams> = {
id: "png-to-hex",
title: "PNG to HEX pixels",
description:
"Shows all pixels as rrggbbaa hex values — row by row, space separated.",
category: "convert",
schema: emptySchema,
result: "text",
toText: (img) => pixelsToHex(img),
};
const pngToBytes: ToolEntry<NoParams> = {
id: "png-to-bytes",
title: "PNG to Bytes",
description:
"Lists every pixel as four decimal bytes (R G B A), one image row per line.",
category: "convert",
schema: emptySchema,
result: "text",
toText: (img) => imageToByteRows(img),
};
const pngToRgbValues: ToolEntry<NoParams> = {
id: "png-to-rgb-values",
title: "PNG to RGB Values",
description: "Lists every pixel as rgba(r, g, b, a), one image row per line.",
category: "convert",
schema: emptySchema,
result: "text",
toText: (img) => imageToRgbValues(img),
};
const base64ToPng: ToolEntry<NoParams> = {
id: "base64-to-png",
title: "Base64 to PNG",
description:
"Decodes a base64 string or data-uri back into an image. Paste the string on the left.",
category: "convert",
schema: emptySchema,
input: "text",
runFromText: async (text) => decodeBytes(base64ToBytes(stripDataUri(text))),
};
const dataUriToPng: ToolEntry<NoParams> = {
id: "data-uri-to-png",
title: "Data URI to PNG",
description: "Decodes data:image/…;base64,… back into an image file.",
category: "convert",
schema: emptySchema,
input: "text",
runFromText: async (text) => decodeBytes(base64ToBytes(stripDataUri(text))),
};
interface HexToPngParams {
width: number;
}
export const hexToPngSchema = toolSchema<HexToPngParams>({
width: widthProps(1),
});
const hexToPng: ToolEntry<HexToPngParams> = {
id: "hex-to-png",
title: "HEX pixels to PNG",
description:
"Assembles an image from rrggbbaa hex values (space separated). Set the width — the height is computed automatically.",
category: "convert",
schema: hexToPngSchema,
input: "text",
runFromText: (text, p) => hexToPixels(text, Math.trunc(p.width)),
};
interface BytesToPngParams {
width: number;
}
export const bytesToPngSchema = toolSchema<BytesToPngParams>({
width: widthProps(32),
});
const bytesToPng: ToolEntry<BytesToPngParams> = {
id: "bytes-to-png",
title: "Bytes to PNG",
description:
"Assembles an image from decimal RGBA byte numbers (any separators). Set the width — height is computed automatically.",
category: "convert",
schema: bytesToPngSchema,
input: "text",
runFromText: (text, p) => bytesToImage(text, Math.trunc(p.width)),
};
interface RgbValuesToPngParams {
width: number;
}
export const rgbValuesToPngSchema = toolSchema<RgbValuesToPngParams>({
width: widthProps(32),
});
const rgbValuesToPng: ToolEntry<RgbValuesToPngParams> = {
id: "rgb-values-to-png",
title: "RGB Values to PNG",
description:
"Assembles an image from rgba(r, g, b, a) numbers. Set the width — height is computed automatically.",
category: "convert",
schema: rgbValuesToPngSchema,
input: "text",
runFromText: (text, p) => rgbValuesToImage(text, Math.trunc(p.width)),
};
interface SvgToPngParams {
width: number;
}
export const svgToPngSchema = toolSchema<SvgToPngParams>({
width: widthProps(512),
});
const svgToPng: ToolEntry<SvgToPngParams> = {
id: "svg-to-png",
title: "SVG to PNG",
description:
"Decodes SVG markup into a raster image. Paste the SVG code on the left.",
category: "convert",
schema: svgToPngSchema,
input: "text",
domOnly: true,
runFromText: (text, p) => decodeSvgText(text, Math.trunc(p.width)),
};
export const convertEntries = [
convertToJpg,
convertToWebp,
convertToBmp,
pngToBase64,
pngToDataUri,
pngToHex,
pngToBytes,
pngToRgbValues,
base64ToPng,
dataUriToPng,
hexToPng,
bytesToPng,
rgbValuesToPng,
svgToPng,
];