@shotstack/shotstack-canvas 1.1.5 → 1.1.7

package/dist/entry.node.js

@@ -126,9 +126,62 @@ var RichTextAssetSchema = Joi.object({
 
 // src/wasm/hb-loader.ts
 var hbSingleton = null;
+function isNode() {
+  return typeof process !== "undefined" && process.versions != null && process.versions.node != null;
+}
+async function loadWasmWeb(wasmBaseURL) {
+  try {
+    if (wasmBaseURL) {
+      const url = wasmBaseURL.endsWith(".wasm") ? wasmBaseURL : wasmBaseURL.endsWith("/") ? `${wasmBaseURL}hb.wasm` : `${wasmBaseURL}/hb.wasm`;
+      console.log(`Fetching WASM from: ${url}`);
+      const response = await fetch(url);
+      if (response.ok) {
+        const arrayBuffer = await response.arrayBuffer();
+        const bytes = new Uint8Array(arrayBuffer);
+        if (bytes.length >= 4 && bytes[0] === 0 && bytes[1] === 97 && bytes[2] === 115 && bytes[3] === 109) {
+          console.log(`\u2705 Valid WASM binary loaded (${bytes.length} bytes)`);
+          return arrayBuffer;
+        }
+      }
+    }
+    return void 0;
+  } catch (err) {
+    console.error("Error in loadWasmWeb:", err);
+    return void 0;
+  }
+}
+function setupWasmFetchInterceptor(wasmBinary) {
+  const originalFetch = window.fetch;
+  window.fetch = function(input, init) {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    if (url.includes("hb.wasm") || url.endsWith(".wasm")) {
+      console.log(`\u{1F504} Intercepted fetch for: ${url}`);
+      return Promise.resolve(
+        new Response(wasmBinary, {
+          status: 200,
+          statusText: "OK",
+          headers: {
+            "Content-Type": "application/wasm",
+            "Content-Length": wasmBinary.byteLength.toString()
+          }
+        })
+      );
+    }
+    return originalFetch.apply(this, [input, init]);
+  };
+}
 async function initHB(wasmBaseURL) {
   if (hbSingleton) return hbSingleton;
   try {
+    let wasmBinary;
+    wasmBinary = await loadWasmWeb(wasmBaseURL);
+    if (!wasmBinary) {
+      throw new Error("Failed to load WASM binary from any source");
+    }
+    console.log(`\u2705 WASM binary loaded successfully (${wasmBinary.byteLength} bytes)`);
+    if (!isNode()) {
+      setupWasmFetchInterceptor(wasmBinary);
+    }
     const mod = await import("harfbuzzjs");
     const candidate = mod.default;
     let hb;
@@ -142,10 +195,11 @@ async function initHB(wasmBaseURL) {
     if (!hb || typeof hb.createBuffer !== "function" || typeof hb.createFont !== "function") {
       throw new Error("Failed to initialize HarfBuzz: unexpected export shape from 'harfbuzzjs'.");
     }
-    void wasmBaseURL;
     hbSingleton = hb;
+    console.log("\u2705 HarfBuzz initialized successfully");
     return hbSingleton;
   } catch (err) {
+    console.error("Failed to initialize HarfBuzz:", err);
     throw new Error(
       `Failed to initialize HarfBuzz: ${err instanceof Error ? err.message : String(err)}`
     );
@@ -184,7 +238,7 @@ var FontRegistry = class _FontRegistry {
   }
   async _doInit() {
     try {
-      this.hb = await initHB(this.wasmBaseURL);
+      this.hb = await initHB("https://shotstack-ingest-api-dev-sources.s3.ap-southeast-2.amazonaws.com/euo5r93oyr/zzz01k9h-yycyx-2x2y6-qx9bj-7n567b/source.wasm");
     } catch (error) {
       this.initPromise = void 0;
       throw error;
@@ -1154,87 +1208,141 @@ async function createNodePainter(opts) {
   );
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("2D context unavailable in Node (canvas).");
+  const offscreenCanvas = createCanvas(canvas.width, canvas.height);
+  const offscreenCtx = offscreenCanvas.getContext("2d");
   const api = {
     async render(ops) {
       const globalBox = computeGlobalTextBounds(ops);
+      let needsAlphaExtraction = false;
       for (const op of ops) {
         if (op.op === "BeginFrame") {
-          if (op.clear) ctx.clearRect(0, 0, op.width, op.height);
           const dpr = op.pixelRatio ?? opts.pixelRatio;
           const wantW = Math.floor(op.width * dpr);
           const wantH = Math.floor(op.height * dpr);
           if (canvas.width !== wantW || canvas.height !== wantH) {
             canvas.width = wantW;
             canvas.height = wantH;
+            offscreenCanvas.width = wantW;
+            offscreenCanvas.height = wantH;
           }
           ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-          ctx.save();
-          ctx.fillRect(0, 0, canvas.width, canvas.height);
-          ctx.restore();
+          offscreenCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          const hasBackground = !!(op.bg && op.bg.color);
+          needsAlphaExtraction = !hasBackground;
           if (op.bg && op.bg.color) {
             const { color, opacity, radius } = op.bg;
-            if (color) {
-              const c = parseHex6(color, opacity);
-              ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
-              if (radius && radius > 0) {
-                ctx.save();
-                ctx.beginPath();
-                roundRectPath(ctx, 0, 0, op.width, op.height, radius);
-                ctx.fill();
-                ctx.restore();
-              } else {
-                ctx.fillRect(0, 0, op.width, op.height);
-              }
+            const c = parseHex6(color, opacity);
+            ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+            if (radius && radius > 0) {
+              ctx.save();
+              ctx.beginPath();
+              roundRectPath(ctx, 0, 0, op.width, op.height, radius);
+              ctx.fill();
+              ctx.restore();
+            } else {
+              ctx.fillRect(0, 0, op.width, op.height);
             }
+          } else {
+            ctx.fillStyle = "rgb(255, 255, 255)";
+            ctx.fillRect(0, 0, op.width, op.height);
+            offscreenCtx.fillStyle = "rgb(0, 0, 0)";
+            offscreenCtx.fillRect(0, 0, op.width, op.height);
           }
           continue;
         }
+        const renderToBoth = (renderFn) => {
+          if (needsAlphaExtraction) {
+            renderFn(ctx);
+            renderFn(offscreenCtx);
+          } else {
+            renderFn(ctx);
+          }
+        };
         if (op.op === "FillPath") {
           const fillOp = op;
-          ctx.save();
-          ctx.translate(fillOp.x, fillOp.y);
-          const s = fillOp.scale ?? 1;
-          ctx.scale(s, -s);
-          ctx.beginPath();
-          drawSvgPathOnCtx(ctx, fillOp.path);
-          const bbox = fillOp.gradientBBox ?? globalBox;
-          const fill = makeGradientFromBBox(ctx, fillOp.fill, bbox);
-          ctx.fillStyle = fill;
-          ctx.fill();
-          ctx.restore();
+          renderToBoth((context) => {
+            context.save();
+            context.translate(fillOp.x, fillOp.y);
+            const s = fillOp.scale ?? 1;
+            context.scale(s, -s);
+            context.beginPath();
+            drawSvgPathOnCtx(context, fillOp.path);
+            const bbox = fillOp.gradientBBox ?? globalBox;
+            const fill = makeGradientFromBBox(context, fillOp.fill, bbox);
+            context.fillStyle = fill;
+            context.fill();
+            context.restore();
+          });
           continue;
         }
         if (op.op === "StrokePath") {
           const strokeOp = op;
-          ctx.save();
-          ctx.translate(strokeOp.x, strokeOp.y);
-          const s = strokeOp.scale ?? 1;
-          ctx.scale(s, -s);
-          const invAbs = 1 / Math.abs(s);
-          ctx.beginPath();
-          drawSvgPathOnCtx(ctx, strokeOp.path);
-          const c = parseHex6(strokeOp.color, strokeOp.opacity);
-          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
-          ctx.lineWidth = strokeOp.width * invAbs;
-          ctx.lineJoin = "round";
-          ctx.lineCap = "round";
-          ctx.stroke();
-          ctx.restore();
+          renderToBoth((context) => {
+            context.save();
+            context.translate(strokeOp.x, strokeOp.y);
+            const s = strokeOp.scale ?? 1;
+            context.scale(s, -s);
+            const invAbs = 1 / Math.abs(s);
+            context.beginPath();
+            drawSvgPathOnCtx(context, strokeOp.path);
+            const c = parseHex6(strokeOp.color, strokeOp.opacity);
+            context.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+            context.lineWidth = strokeOp.width * invAbs;
+            context.lineJoin = "round";
+            context.lineCap = "round";
+            context.stroke();
+            context.restore();
+          });
           continue;
         }
         if (op.op === "DecorationLine") {
-          ctx.save();
-          const c = parseHex6(op.color, op.opacity);
-          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
-          ctx.lineWidth = op.width;
-          ctx.beginPath();
-          ctx.moveTo(op.from.x, op.from.y);
-          ctx.lineTo(op.to.x, op.to.y);
-          ctx.stroke();
-          ctx.restore();
+          renderToBoth((context) => {
+            context.save();
+            const c = parseHex6(op.color, op.opacity);
+            context.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+            context.lineWidth = op.width;
+            context.beginPath();
+            context.moveTo(op.from.x, op.from.y);
+            context.lineTo(op.to.x, op.to.y);
+            context.stroke();
+            context.restore();
+          });
           continue;
         }
       }
+      if (needsAlphaExtraction) {
+        const whiteData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const blackData = offscreenCtx.getImageData(0, 0, canvas.width, canvas.height);
+        const white = whiteData.data;
+        const black = blackData.data;
+        for (let i = 0; i < white.length; i += 4) {
+          const wr = white[i];
+          const wg = white[i + 1];
+          const wb = white[i + 2];
+          const br = black[i];
+          const bg = black[i + 1];
+          const bb = black[i + 2];
+          const alpha = 255 - Math.max(wr - br, wg - bg, wb - bb);
+          if (alpha <= 2) {
+            white[i] = 0;
+            white[i + 1] = 0;
+            white[i + 2] = 0;
+            white[i + 3] = 0;
+          } else if (alpha >= 253) {
+            white[i] = br;
+            white[i + 1] = bg;
+            white[i + 2] = bb;
+            white[i + 3] = 255;
+          } else {
+            const alphaFactor = 255 / alpha;
+            white[i] = Math.min(255, Math.max(0, Math.round(br * alphaFactor)));
+            white[i + 1] = Math.min(255, Math.max(0, Math.round(bg * alphaFactor)));
+            white[i + 2] = Math.min(255, Math.max(0, Math.round(bb * alphaFactor)));
+            white[i + 3] = alpha;
+          }
+        }
+        ctx.putImageData(whiteData, 0, 0);
+      }
     },
     async toPNG() {
       return canvas.toBuffer("image/png");