asciify-engine 1.0.66 → 1.0.68

package/dist/index.js

@@ -1160,23 +1160,31 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
 }
 
 // src/core/simple-api.ts
-function sizeCanvasToContainer(canvas, container, aspect) {
+function sizeCanvasToContainer(canvas, container, aspect, srcW, srcH) {
   const { width, height } = container.getBoundingClientRect();
   if (!width || !height) return;
-  let w = width, h = w / aspect;
-  if (h > height) {
-    h = height;
-    w = h * aspect;
-  }
-  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-  const cssW = Math.round(w);
-  const cssH = Math.round(h);
-  canvas.width = Math.round(cssW * dpr);
-  canvas.height = Math.round(cssH * dpr);
+  let cssW = width, cssH = cssW / aspect;
+  if (cssH > height) {
+    cssH = height;
+    cssW = cssH * aspect;
+  }
+  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);
+  } 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;
   canvas.style.width = cssW + "px";
   canvas.style.height = cssH + "px";
-  canvas.__cssW = cssW;
-  canvas.__cssH = cssH;
 }
 async function asciify(source, canvas, { fontSize = 10, artStyle = "classic", options = {} } = {}) {
   let el;
@@ -1253,22 +1261,16 @@ async function asciifyVideo(source, canvas, { fontSize = 10, artStyle = "classic
     } else {
       video2 = source;
     }
-    if (container) sizeCanvasToContainer(canvas, container, video2.videoWidth / video2.videoHeight);
-    const srcW = video2.videoWidth;
-    const srcH = video2.videoHeight;
+    if (container) sizeCanvasToContainer(canvas, container, video2.videoWidth / video2.videoHeight, video2.videoWidth, video2.videoHeight);
     const maxDur = trimEnd !== void 0 ? trimEnd - trimStart : 10;
-    const { frames, fps } = await videoToAsciiFrames(video2, merged, srcW, srcH, void 0, maxDur, void 0, trimStart);
+    const { frames, fps } = await videoToAsciiFrames(video2, merged, canvas.width, canvas.height, 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;
-      const cssW = canvas.__cssW || canvas.width;
-      const cssH = canvas.__cssH || canvas.height;
       if (now - last >= interval) {
-        const dpr = window.devicePixelRatio || 1;
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        renderFrameToCanvas(ctx, frames[i], merged, cssW, cssH);
+        renderFrameToCanvas(ctx, frames[i], merged, canvas.width, canvas.height);
         i = (i + 1) % frames.length;
         last = now;
         if (firstFrame2) {
@@ -1341,8 +1343,9 @@ async function asciifyVideo(source, canvas, { fontSize = 10, artStyle = "classic
   let ro = null;
   if (container) {
     const aspect = video.videoWidth / video.videoHeight;
-    sizeCanvasToContainer(canvas, container, aspect);
-    ro = new ResizeObserver(() => sizeCanvasToContainer(canvas, container, aspect));
+    const vw = video.videoWidth, vh = video.videoHeight;
+    sizeCanvasToContainer(canvas, container, aspect, vw, vh);
+    ro = new ResizeObserver(() => sizeCanvasToContainer(canvas, container, aspect, vw, vh));
     ro.observe(container);
   }
   let cancelled = false;
@@ -1354,15 +1357,9 @@ 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 srcW = video.videoWidth;
-    const srcH = video.videoHeight;
-    const { frame } = imageToAsciiFrame(video, merged, srcW, srcH);
+    const { frame } = imageToAsciiFrame(video, merged, canvas.width, canvas.height);
     if (frame.length > 0) {
-      const cssW = canvas.__cssW || canvas.width;
-      const cssH = canvas.__cssH || canvas.height;
-      const dpr = window.devicePixelRatio || 1;
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-      renderFrameToCanvas(ctx, frame, merged, cssW, cssH, 0, null);
+      renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height, 0, null);
       if (firstFrame) {
         firstFrame = false;
         onReady?.(video);