asciify-engine 1.0.68 → 1.0.70

package/dist/index.cjs

@@ -1162,6 +1162,25 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
 }
 
 // src/core/simple-api.ts
+function getSourceDims(el) {
+  if (el instanceof HTMLVideoElement) return { w: el.videoWidth, h: el.videoHeight };
+  if (el instanceof HTMLImageElement) return { w: el.naturalWidth || el.width, h: el.naturalHeight || el.height };
+  return { w: el.width, h: el.height };
+}
+function makeHiResCanvas(srcW, srcH, displayW, displayH) {
+  if (srcW <= displayW && srcH <= displayH) return null;
+  const MAX = 2048;
+  const scale = Math.min(1, MAX / Math.max(srcW, srcH));
+  const offW = Math.round(srcW * scale);
+  const offH = Math.round(srcH * scale);
+  if (offW <= displayW && offH <= displayH) return null;
+  const offCanvas = document.createElement("canvas");
+  offCanvas.width = offW;
+  offCanvas.height = offH;
+  const offCtx = offCanvas.getContext("2d");
+  if (!offCtx) return null;
+  return { offCanvas, offCtx, offW, offH };
+}
 function sizeCanvasToContainer(canvas, container, aspect, srcW, srcH) {
   const { width, height } = container.getBoundingClientRect();
   if (!width || !height) return;
@@ -1188,7 +1207,7 @@ function sizeCanvasToContainer(canvas, container, aspect, srcW, srcH) {
   canvas.style.width = cssW + "px";
   canvas.style.height = cssH + "px";
 }
-async function asciify(source, canvas, { fontSize = 10, artStyle = "classic", options = {} } = {}) {
+async function asciify(source, canvas, { fontSize, artStyle = "classic", options = {} } = {}) {
   let el;
   if (typeof source === "string") {
     const img = new Image();
@@ -1209,15 +1228,26 @@ async function asciify(source, canvas, { fontSize = 10, artStyle = "classic", op
     el = source;
   }
   const preset = ART_STYLE_PRESETS[artStyle];
-  const merged = { ...DEFAULT_OPTIONS, ...preset, ...options, fontSize };
+  const resolvedFontSize = fontSize ?? options.fontSize ?? 10;
+  const merged = { ...DEFAULT_OPTIONS, ...preset, ...options, fontSize: resolvedFontSize };
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("Could not get 2d context from canvas");
-  const { frame } = imageToAsciiFrame(el, merged, canvas.width, canvas.height);
-  renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height);
+  const { w: srcW, h: srcH } = getSourceDims(el);
+  const hires = makeHiResCanvas(srcW, srcH, canvas.width, canvas.height);
+  if (hires) {
+    const { frame } = imageToAsciiFrame(el, merged, hires.offW, hires.offH);
+    renderFrameToCanvas(hires.offCtx, frame, merged, hires.offW, hires.offH);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(hires.offCanvas, 0, 0, canvas.width, canvas.height);
+  } else {
+    const { frame } = imageToAsciiFrame(el, merged, canvas.width, canvas.height);
+    renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height);
+  }
 }
-async function asciifyGif(source, canvas, { fontSize = 10, artStyle = "classic", options = {} } = {}) {
+async function asciifyGif(source, canvas, { fontSize, artStyle = "classic", options = {} } = {}) {
   const buffer = typeof source === "string" ? await fetch(source).then((r) => r.arrayBuffer()) : source;
-  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[artStyle], ...options, fontSize };
+  const resolvedFontSize = fontSize ?? options.fontSize ?? 10;
+  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[artStyle], ...options, fontSize: resolvedFontSize };
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("Could not get 2d context from canvas");
   const { frames, fps } = await gifToAsciiFrames(buffer, merged, canvas.width, canvas.height);
@@ -1241,10 +1271,11 @@ async function asciifyGif(source, canvas, { fontSize = 10, artStyle = "classic",
     cancelAnimationFrame(animId);
   };
 }
-async function asciifyVideo(source, canvas, { fontSize = 10, artStyle = "classic", options = {}, fitTo, preExtract = false, trim, onReady, onFrame } = {}) {
+async function asciifyVideo(source, canvas, { fontSize, artStyle = "classic", options = {}, fitTo, preExtract = false, trim, onReady, onFrame } = {}) {
   const trimStart = trim?.start ?? 0;
   const trimEnd = trim?.end;
-  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[artStyle], ...options, fontSize };
+  const resolvedFontSize = fontSize ?? options.fontSize ?? 10;
+  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[artStyle], ...options, fontSize: resolvedFontSize };
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("asciifyVideo: could not get 2d context from canvas.");
   const container = typeof fitTo === "string" ? document.querySelector(fitTo) : fitTo instanceof HTMLElement ? fitTo : null;
@@ -1264,15 +1295,24 @@ async function asciifyVideo(source, canvas, { fontSize = 10, artStyle = "classic
       video2 = source;
     }
     if (container) sizeCanvasToContainer(canvas, container, video2.videoWidth / video2.videoHeight, video2.videoWidth, video2.videoHeight);
+    const hires2 = makeHiResCanvas(video2.videoWidth, video2.videoHeight, canvas.width, canvas.height);
+    const renderW = hires2 ? hires2.offW : canvas.width;
+    const renderH = hires2 ? hires2.offH : canvas.height;
     const maxDur = trimEnd !== void 0 ? trimEnd - trimStart : 10;
-    const { frames, fps } = await videoToAsciiFrames(video2, merged, canvas.width, canvas.height, void 0, maxDur, void 0, trimStart);
+    const { frames, fps } = await videoToAsciiFrames(video2, merged, renderW, renderH, void 0, maxDur, void 0, trimStart);
     let cancelled2 = false, animId2, i = 0, last = performance.now();
     let firstFrame2 = true;
     const interval = 1e3 / fps;
     const tick2 = (now) => {
       if (cancelled2) return;
       if (now - last >= interval) {
-        renderFrameToCanvas(ctx, frames[i], merged, canvas.width, canvas.height);
+        if (hires2) {
+          renderFrameToCanvas(hires2.offCtx, frames[i], merged, hires2.offW, hires2.offH);
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(hires2.offCanvas, 0, 0, canvas.width, canvas.height);
+        } else {
+          renderFrameToCanvas(ctx, frames[i], merged, canvas.width, canvas.height);
+        }
         i = (i + 1) % frames.length;
         last = now;
         if (firstFrame2) {
@@ -1350,6 +1390,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, artStyle = "classic
     ro = new ResizeObserver(() => sizeCanvasToContainer(canvas, container, aspect, vw, vh));
     ro.observe(container);
   }
+  const hires = makeHiResCanvas(video.videoWidth, video.videoHeight, canvas.width, canvas.height);
   let cancelled = false;
   let animId;
   let firstFrame = true;
@@ -1359,14 +1400,28 @@ async function asciifyVideo(source, canvas, { fontSize = 10, artStyle = "classic
     if (video.readyState < 2 || canvas.width === 0 || canvas.height === 0) return;
     if (trimStart > 0 && video.currentTime < trimStart) return;
     if (trimEnd !== void 0 && video.currentTime >= trimEnd) return;
-    const { frame } = imageToAsciiFrame(video, merged, canvas.width, canvas.height);
-    if (frame.length > 0) {
-      renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height, 0, null);
-      if (firstFrame) {
-        firstFrame = false;
-        onReady?.(video);
+    if (hires) {
+      const { frame } = imageToAsciiFrame(video, merged, hires.offW, hires.offH);
+      if (frame.length > 0) {
+        renderFrameToCanvas(hires.offCtx, frame, merged, hires.offW, hires.offH, 0, null);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(hires.offCanvas, 0, 0, canvas.width, canvas.height);
+        if (firstFrame) {
+          firstFrame = false;
+          onReady?.(video);
+        }
+        onFrame?.();
+      }
+    } else {
+      const { frame } = imageToAsciiFrame(video, merged, canvas.width, canvas.height);
+      if (frame.length > 0) {
+        renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height, 0, null);
+        if (firstFrame) {
+          firstFrame = false;
+          onReady?.(video);
+        }
+        onFrame?.();
       }
-      onFrame?.();
     }
   };
   animId = requestAnimationFrame(tick);