asciify-engine 1.0.8 → 1.0.10

package/dist/index.d.cts

@@ -160,15 +160,19 @@ declare function asciifyGif(source: string | ArrayBuffer, canvas: HTMLCanvasElem
  */
 declare function asciifyVideo(source: HTMLVideoElement | string, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<() => void>;
 /**
- * Generate a clean 2-line embed snippet.
+ * Generate a clean embed snippet.
  *
- * All data lives in data attributes on the <canvas>.
- * The <script> tag is always the same CDN line — identical across all embeds,
- * so browsers/CDNs cache it once and reuse it everywhere.
+ * Structure:
+ *   <canvas id>            — the render target, short and clean
+ *   <script type=json id>  — frame data lives here, clearly separated
+ *   <script src=cdn>       — always the same line, cached by browsers
  *
- * Output:
- *   <canvas data-asciify-id="ar-xxx" data-asciify-src="…" data-asciify-opts="{…}" width="…" height="…"></canvas>
- *   <script src="https://cdn.jsdelivr.net/npm/asciify-engine@x.x.x/dist/embed.js" async></script>
+ * Output (static):
+ *   <!-- Asciify Embed -->
+ *   <canvas id="ar-xxx" data-asciify-opts="{…}" width="…" height="…"></canvas>
+ *   <script type="application/json" id="ar-xxx-d">"BASE64"</script>
+ *   <script src="cdn/embed.js" async></script>
+ *   <!-- /Asciify Embed -->
  */
 declare function generateEmbedCode(frame: AsciiFrame, options: AsciiOptions, width: number, height: number): string;
 /**

package/dist/index.d.ts

@@ -160,15 +160,19 @@ declare function asciifyGif(source: string | ArrayBuffer, canvas: HTMLCanvasElem
  */
 declare function asciifyVideo(source: HTMLVideoElement | string, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<() => void>;
 /**
- * Generate a clean 2-line embed snippet.
+ * Generate a clean embed snippet.
  *
- * All data lives in data attributes on the <canvas>.
- * The <script> tag is always the same CDN line — identical across all embeds,
- * so browsers/CDNs cache it once and reuse it everywhere.
+ * Structure:
+ *   <canvas id>            — the render target, short and clean
+ *   <script type=json id>  — frame data lives here, clearly separated
+ *   <script src=cdn>       — always the same line, cached by browsers
  *
- * Output:
- *   <canvas data-asciify-id="ar-xxx" data-asciify-src="…" data-asciify-opts="{…}" width="…" height="…"></canvas>
- *   <script src="https://cdn.jsdelivr.net/npm/asciify-engine@x.x.x/dist/embed.js" async></script>
+ * Output (static):
+ *   <!-- Asciify Embed -->
+ *   <canvas id="ar-xxx" data-asciify-opts="{…}" width="…" height="…"></canvas>
+ *   <script type="application/json" id="ar-xxx-d">"BASE64"</script>
+ *   <script src="cdn/embed.js" async></script>
+ *   <!-- /Asciify Embed -->
  */
 declare function generateEmbedCode(frame: AsciiFrame, options: AsciiOptions, width: number, height: number): string;
 /**

package/dist/index.js

@@ -720,7 +720,7 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
 function serializeFrame(frame, fullColor) {
   const rows = frame.length;
   const cols = rows > 0 ? frame[0].length : 0;
-  const stride = fullColor ? 4 : 2;
+  const stride = fullColor ? 3 : 1;
   const buf = new Uint8Array(1 + rows * cols * stride);
   buf[0] = stride;
   let i = 1;
@@ -731,10 +731,8 @@ function serializeFrame(frame, fullColor) {
         buf[i++] = cell.r;
         buf[i++] = cell.g;
         buf[i++] = cell.b;
-        buf[i++] = cell.a;
       } else {
         buf[i++] = Math.round(0.299 * cell.r + 0.587 * cell.g + 0.114 * cell.b);
-        buf[i++] = cell.a;
       }
     }
   }
@@ -832,7 +830,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic",
     cancelAnimationFrame(animId);
   };
 }
-var EMBED_CDN_VERSION = "1.0.8";
+var EMBED_CDN_VERSION = "1.0.10";
 function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
   const o = {
     r: rows,
@@ -866,7 +864,8 @@ function generateEmbedCode(frame, options, width, height) {
   const id = `ar-${Math.random().toString(36).slice(2, 9)}`;
   const opts = buildEmbedOpts(options, rows, cols, width, height);
   return `<!-- Asciify Embed -->
-<canvas data-asciify-id="${id}" data-asciify-src='"${data}"' data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
+<canvas id="${id}" data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
+<script type="application/json" id="${id}-d">"${data}"</script>
 ${CDN_SCRIPT}
 <!-- /Asciify Embed -->`;
 }
@@ -879,7 +878,8 @@ function generateAnimatedEmbedCode(frames, options, fps, width, height) {
   const id = `ar-${Math.random().toString(36).slice(2, 9)}`;
   const opts = buildEmbedOpts(options, rows, cols, width, height, fps, true);
   return `<!-- Asciify Animated Embed -->
-<canvas data-asciify-id="${id}" data-asciify-src='${JSON.stringify(allData)}' data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
+<canvas id="${id}" data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
+<script type="application/json" id="${id}-d">${JSON.stringify(allData)}</script>
 ${CDN_SCRIPT}
 <!-- /Asciify Animated Embed -->`;
 }