asciify-engine 1.0.69 → 1.0.71

package/dist/index.js

@@ -1160,9 +1160,19 @@ 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 computeRenderDims(srcW, srcH) {
+  const MAX = 2048;
+  const scale = Math.min(1, MAX / Math.max(srcW, srcH));
+  return { renderW: Math.round(srcW * scale), renderH: Math.round(srcH * scale) };
+}
 function sizeCanvasToContainer(canvas, container, aspect, srcW, srcH) {
   const { width, height } = container.getBoundingClientRect();
-  if (!width || !height) return;
+  if (!width || !height) return { renderW: 0, renderH: 0, dpr: 1 };
   let cssW = width, cssH = cssW / aspect;
   if (cssH > height) {
     cssH = height;
@@ -1170,21 +1180,21 @@ function sizeCanvasToContainer(canvas, container, aspect, srcW, srcH) {
   }
   cssW = Math.round(cssW);
   cssH = Math.round(cssH);
-  const MAX_BUF = 2048;
-  let bufW, bufH;
-  if (srcW && srcH && (srcW > cssW || srcH > cssH)) {
-    const scale = Math.min(1, MAX_BUF / Math.max(srcW, srcH));
-    bufW = Math.round(srcW * scale);
-    bufH = Math.round(srcH * scale);
+  let renderW, renderH;
+  if (srcW && srcH) {
+    ({ renderW, renderH } = computeRenderDims(srcW, srcH));
   } else {
-    const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-    bufW = Math.round(cssW * dpr);
-    bufH = Math.round(cssH * dpr);
-  }
-  canvas.width = bufW;
-  canvas.height = bufH;
+    renderW = cssW;
+    renderH = cssH;
+  }
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  const MAX_PX = 8e6;
+  const cappedDpr = renderW * dpr * renderH * dpr > MAX_PX ? Math.sqrt(MAX_PX / (renderW * renderH)) : dpr;
+  canvas.width = Math.round(renderW * cappedDpr);
+  canvas.height = Math.round(renderH * cappedDpr);
   canvas.style.width = cssW + "px";
   canvas.style.height = cssH + "px";
+  return { renderW, renderH, dpr: cappedDpr };
 }
 async function asciify(source, canvas, { fontSize, artStyle = "classic", options = {} } = {}) {
   let el;
@@ -1211,8 +1221,20 @@ async function asciify(source, canvas, { fontSize, artStyle = "classic", options
   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 { renderW, renderH } = computeRenderDims(srcW, srcH);
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  const MAX_PX = 8e6;
+  const cappedDpr = renderW * dpr * renderH * dpr > MAX_PX ? Math.sqrt(MAX_PX / (renderW * renderH)) : dpr;
+  if (canvas.width < renderW || canvas.height < renderH) {
+    canvas.width = Math.round(renderW * cappedDpr);
+    canvas.height = Math.round(renderH * cappedDpr);
+  }
+  const { frame } = imageToAsciiFrame(el, merged, renderW, renderH);
+  ctx.save();
+  ctx.setTransform(cappedDpr, 0, 0, cappedDpr, 0, 0);
+  renderFrameToCanvas(ctx, frame, merged, renderW, renderH);
+  ctx.restore();
 }
 async function asciifyGif(source, canvas, { fontSize, artStyle = "classic", options = {} } = {}) {
   const buffer = typeof source === "string" ? await fetch(source).then((r) => r.arrayBuffer()) : source;
@@ -1265,15 +1287,26 @@ async function asciifyVideo(source, canvas, { fontSize, artStyle = "classic", op
       video2 = source;
     }
     if (container) sizeCanvasToContainer(canvas, container, video2.videoWidth / video2.videoHeight, video2.videoWidth, video2.videoHeight);
+    const { renderW: renderW2, renderH: renderH2 } = computeRenderDims(video2.videoWidth, video2.videoHeight);
+    const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+    const MAX_PX = 8e6;
+    const cappedDpr = renderW2 * dpr * renderH2 * dpr > MAX_PX ? Math.sqrt(MAX_PX / (renderW2 * renderH2)) : dpr;
+    if (canvas.width < Math.round(renderW2 * cappedDpr)) {
+      canvas.width = Math.round(renderW2 * cappedDpr);
+      canvas.height = Math.round(renderH2 * cappedDpr);
+    }
     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, renderW2, renderH2, 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);
+        ctx.save();
+        ctx.setTransform(cappedDpr, 0, 0, cappedDpr, 0, 0);
+        renderFrameToCanvas(ctx, frames[i], merged, renderW2, renderH2);
+        ctx.restore();
         i = (i + 1) % frames.length;
         last = now;
         if (firstFrame2) {
@@ -1344,12 +1377,28 @@ async function asciifyVideo(source, canvas, { fontSize, artStyle = "classic", op
     video.addEventListener("timeupdate", timeupdateHandler);
   }
   let ro = null;
+  const { renderW, renderH } = computeRenderDims(video.videoWidth, video.videoHeight);
   if (container) {
     const aspect = video.videoWidth / video.videoHeight;
     const vw = video.videoWidth, vh = video.videoHeight;
-    sizeCanvasToContainer(canvas, container, aspect, vw, vh);
-    ro = new ResizeObserver(() => sizeCanvasToContainer(canvas, container, aspect, vw, vh));
+    const sizing = sizeCanvasToContainer(canvas, container, aspect, vw, vh);
+    const sCtx = canvas.getContext("2d");
+    if (sCtx) sCtx.setTransform(sizing.dpr, 0, 0, sizing.dpr, 0, 0);
+    ro = new ResizeObserver(() => {
+      const s = sizeCanvasToContainer(canvas, container, aspect, vw, vh);
+      const rCtx = canvas.getContext("2d");
+      if (rCtx) rCtx.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
+    });
     ro.observe(container);
+  } else {
+    const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+    const MAX_PX = 8e6;
+    const cappedDpr = renderW * dpr * renderH * dpr > MAX_PX ? Math.sqrt(MAX_PX / (renderW * renderH)) : dpr;
+    if (canvas.width < Math.round(renderW * cappedDpr)) {
+      canvas.width = Math.round(renderW * cappedDpr);
+      canvas.height = Math.round(renderH * cappedDpr);
+    }
+    ctx.setTransform(cappedDpr, 0, 0, cappedDpr, 0, 0);
   }
   let cancelled = false;
   let animId;
@@ -1360,9 +1409,9 @@ async function asciifyVideo(source, canvas, { fontSize, artStyle = "classic", op
     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);
+    const { frame } = imageToAsciiFrame(video, merged, renderW, renderH);
     if (frame.length > 0) {
-      renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height, 0, null);
+      renderFrameToCanvas(ctx, frame, merged, renderW, renderH, 0, null);
       if (firstFrame) {
         firstFrame = false;
         onReady?.(video);