asciify-engine 1.0.70 → 1.0.71

package/dist/index.cjs

@@ -1167,23 +1167,14 @@ function getSourceDims(el) {
   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;
+function computeRenderDims(srcW, srcH) {
   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 };
+  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;
@@ -1191,21 +1182,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;
@@ -1233,16 +1224,19 @@ async function asciify(source, canvas, { fontSize, artStyle = "classic", options
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("Could not get 2d context from canvas");
   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);
-  }
+  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;
@@ -1295,24 +1289,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 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 { 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, renderW, renderH, 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) {
-        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);
-        }
+        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) {
@@ -1383,14 +1379,29 @@ 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);
   }
-  const hires = makeHiResCanvas(video.videoWidth, video.videoHeight, canvas.width, canvas.height);
   let cancelled = false;
   let animId;
   let firstFrame = true;
@@ -1400,28 +1411,14 @@ 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;
-    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?.();
+    const { frame } = imageToAsciiFrame(video, merged, renderW, renderH);
+    if (frame.length > 0) {
+      renderFrameToCanvas(ctx, frame, merged, renderW, renderH, 0, null);
+      if (firstFrame) {
+        firstFrame = false;
+        onReady?.(video);
       }
+      onFrame?.();
     }
   };
   animId = requestAnimationFrame(tick);