asciify-engine 1.0.64 → 1.0.66

package/dist/index.js

@@ -1168,8 +1168,15 @@ function sizeCanvasToContainer(canvas, container, aspect) {
     h = height;
     w = h * aspect;
   }
-  canvas.width = Math.round(w);
-  canvas.height = Math.round(h);
+  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);
+  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;
@@ -1247,15 +1254,21 @@ async function asciifyVideo(source, canvas, { fontSize = 10, artStyle = "classic
       video2 = source;
     }
     if (container) sizeCanvasToContainer(canvas, container, video2.videoWidth / video2.videoHeight);
+    const srcW = video2.videoWidth;
+    const srcH = video2.videoHeight;
     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, srcW, srcH, 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) {
-        renderFrameToCanvas(ctx, frames[i], merged, canvas.width, canvas.height);
+        const dpr = window.devicePixelRatio || 1;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        renderFrameToCanvas(ctx, frames[i], merged, cssW, cssH);
         i = (i + 1) % frames.length;
         last = now;
         if (firstFrame2) {
@@ -1341,9 +1354,15 @@ 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);
+    const srcW = video.videoWidth;
+    const srcH = video.videoHeight;
+    const { frame } = imageToAsciiFrame(video, merged, srcW, srcH);
     if (frame.length > 0) {
-      renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height, 0, null);
+      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);
       if (firstFrame) {
         firstFrame = false;
         onReady?.(video);