goatdee-canvas 0.0.13 → 0.0.15

package/dist/index.cjs

@@ -3178,6 +3178,8 @@ async function waitForAllImages(container, timeout = 10000) {
     });
     await Promise.all(promises);
 }
+/** 渲染图片的最大边长（物理像素）。超过此值会导致 GPU 纹理上传失败或内存溢出。 */
+const MAX_IMAGE_DIMENSION = 4096;
 
 /**
  * HTML to EditorJSON Converter - Parsing Functions
@@ -11514,6 +11516,9 @@ async function renderBackgroundToBase64(element, width, height) {
     }
     try {
         const dpr = win.devicePixelRatio || 1;
+        // 限制输出物理像素长边不超过 MAX_IMAGE_DIMENSION
+        const maxDim = Math.max(width, height);
+        const clampedDpr = maxDim > 0 ? Math.min(dpr, MAX_IMAGE_DIMENSION / maxDim) : dpr;
         const tempContainer = doc.createElement("div");
         tempContainer.style.position = "fixed";
         tempContainer.style.left = "-9999px";
@@ -11532,7 +11537,7 @@ async function renderBackgroundToBase64(element, width, height) {
         doc.body.appendChild(tempContainer);
         const canvas = await html2canvasExports(tempContainer, {
             backgroundColor: null,
-            scale: dpr,
+            scale: clampedDpr,
             logging: false,
             useCORS: true,
             allowTaint: true,
@@ -11542,8 +11547,8 @@ async function renderBackgroundToBase64(element, width, height) {
         doc.body.removeChild(tempContainer);
         return {
             base64: canvas.toDataURL("image/png"),
-            actualWidth: width * dpr,
-            actualHeight: height * dpr,
+            actualWidth: width * clampedDpr,
+            actualHeight: height * clampedDpr,
             logicalWidth: width,
             logicalHeight: height,
         };
@@ -11584,6 +11589,9 @@ async function renderElementWithHtml2Canvas(element, styles, rect) {
         tempContainer.style.zIndex = "-9999";
         const totalWidth = width + padding * 2;
         const totalHeight = height + padding * 2;
+        // 限制输出物理像素长边不超过 MAX_IMAGE_DIMENSION
+        const maxDim = Math.max(totalWidth, totalHeight);
+        const clampedDpr = maxDim > 0 ? Math.min(dpr, MAX_IMAGE_DIMENSION / maxDim) : dpr;
         tempContainer.style.width = `${totalWidth}px`;
         tempContainer.style.height = `${totalHeight}px`;
         tempContainer.style.overflow = "visible";
@@ -11597,7 +11605,7 @@ async function renderElementWithHtml2Canvas(element, styles, rect) {
         doc.body.appendChild(tempContainer);
         const canvas = await html2canvasExports(tempContainer, {
             backgroundColor: null,
-            scale: dpr,
+            scale: clampedDpr,
             logging: false,
             useCORS: true,
             allowTaint: true,
@@ -11608,8 +11616,8 @@ async function renderElementWithHtml2Canvas(element, styles, rect) {
         return {
             base64: canvas.toDataURL("image/png"),
             padding: padding,
-            actualWidth: totalWidth * dpr,
-            actualHeight: totalHeight * dpr,
+            actualWidth: totalWidth * clampedDpr,
+            actualHeight: totalHeight * clampedDpr,
             logicalWidth: totalWidth,
             logicalHeight: totalHeight,
         };
@@ -11697,6 +11705,11 @@ async function renderElementWithFilterToBase64(element, width, height, styles) {
     const w = Math.ceil(width);
     const h = Math.ceil(height);
     const dpr = win.devicePixelRatio || 1;
+    // 限制输出物理像素长边不超过 MAX_IMAGE_DIMENSION（含 padding 后的总尺寸）
+    const totalW = w + padding * 2;
+    const totalH = h + padding * 2;
+    const maxDim = Math.max(totalW, totalH);
+    const clampedDpr = maxDim > 0 ? Math.min(dpr, MAX_IMAGE_DIMENSION / maxDim) : dpr;
     try {
         const tempContainer = doc.createElement('div');
         tempContainer.style.cssText =
@@ -11710,7 +11723,7 @@ async function renderElementWithFilterToBase64(element, width, height, styles) {
         doc.body.appendChild(tempContainer);
         const noFilterCanvas = await html2canvasExports(tempContainer, {
             backgroundColor: null,
-            scale: dpr,
+            scale: clampedDpr,
             logging: false,
             useCORS: true,
             allowTaint: true,
@@ -11718,22 +11731,20 @@ async function renderElementWithFilterToBase64(element, width, height, styles) {
             height: h,
         });
         doc.body.removeChild(tempContainer);
-        const totalW = w + padding * 2;
-        const totalH = h + padding * 2;
         const finalCanvas = doc.createElement('canvas');
-        finalCanvas.width = totalW * dpr;
-        finalCanvas.height = totalH * dpr;
+        finalCanvas.width = totalW * clampedDpr;
+        finalCanvas.height = totalH * clampedDpr;
         const ctx = finalCanvas.getContext('2d');
         if (!ctx)
             return null;
-        ctx.scale(dpr, dpr);
-        ctx.filter = scaleFilterPxByDpr(filterStr, dpr);
+        ctx.scale(clampedDpr, clampedDpr);
+        ctx.filter = scaleFilterPxByDpr(filterStr, clampedDpr);
         ctx.drawImage(noFilterCanvas, padding, padding, w, h);
         return {
             base64: finalCanvas.toDataURL('image/png'),
             padding,
-            actualWidth: totalW * dpr,
-            actualHeight: totalH * dpr,
+            actualWidth: totalW * clampedDpr,
+            actualHeight: totalH * clampedDpr,
             logicalWidth: totalW,
             logicalHeight: totalH,
         };
@@ -12626,9 +12637,12 @@ async function renderPseudoElementWithHtml2Canvas(element, pseudoElement, rect,
             }
         }
         const dpr = win.devicePixelRatio || 1;
+        // 限制输出物理像素长边不超过 MAX_IMAGE_DIMENSION
+        const maxDim = Math.max(totalWidth, totalHeight);
+        const clampedDpr = maxDim > 0 ? Math.min(dpr, MAX_IMAGE_DIMENSION / maxDim) : dpr;
         const canvas = await html2canvasExports(tempContainer, {
             backgroundColor: null,
-            scale: dpr,
+            scale: clampedDpr,
             logging: false,
             useCORS: true,
             allowTaint: true,
@@ -12640,8 +12654,8 @@ async function renderPseudoElementWithHtml2Canvas(element, pseudoElement, rect,
         return {
             base64: canvas.toDataURL("image/png"),
             padding: padding,
-            actualWidth: totalWidth * dpr,
-            actualHeight: totalHeight * dpr,
+            actualWidth: totalWidth * clampedDpr,
+            actualHeight: totalHeight * clampedDpr,
             logicalWidth: totalWidth,
             logicalHeight: totalHeight,
         };
@@ -12699,6 +12713,9 @@ async function renderMarkerWithHtml2Canvas(element, rect, markerStyles, elementS
         const totalWidth = Math.ceil(rect.width);
         const totalHeight = Math.ceil(rect.height);
         const dpr = win.devicePixelRatio || 1;
+        // 限制输出物理像素长边不超过 MAX_IMAGE_DIMENSION
+        const maxDim = Math.max(totalWidth, totalHeight);
+        const clampedDpr = maxDim > 0 ? Math.min(dpr, MAX_IMAGE_DIMENSION / maxDim) : dpr;
         const tempContainer = doc.createElement('div');
         tempContainer.style.position = 'fixed';
         tempContainer.style.left = '-9999px';
@@ -12730,7 +12747,7 @@ async function renderMarkerWithHtml2Canvas(element, rect, markerStyles, elementS
         }
         const canvas = await html2canvasExports(tempContainer, {
             backgroundColor: null,
-            scale: dpr,
+            scale: clampedDpr,
             logging: false,
             useCORS: true,
             allowTaint: true,
@@ -12741,8 +12758,8 @@ async function renderMarkerWithHtml2Canvas(element, rect, markerStyles, elementS
         return {
             base64: canvas.toDataURL('image/png'),
             padding: 0,
-            actualWidth: totalWidth * dpr,
-            actualHeight: totalHeight * dpr,
+            actualWidth: totalWidth * clampedDpr,
+            actualHeight: totalHeight * clampedDpr,
             logicalWidth: totalWidth,
             logicalHeight: totalHeight,
         };
@@ -12854,8 +12871,13 @@ function convertCanvasElement(element, context) {
     const displayWidth = rect.width;
     const displayHeight = rect.height;
     // 导出 2 倍图：绘制到离屏 canvas (2*displaySize)，再 toDataURL
-    const exportWidth = Math.round(displayWidth * CANVAS_EXPORT_PIXEL_RATIO);
-    const exportHeight = Math.round(displayHeight * CANVAS_EXPORT_PIXEL_RATIO);
+    // 同时确保物理像素长边不超过 MAX_IMAGE_DIMENSION
+    const rawExportWidth = Math.round(displayWidth * CANVAS_EXPORT_PIXEL_RATIO);
+    const rawExportHeight = Math.round(displayHeight * CANVAS_EXPORT_PIXEL_RATIO);
+    const maxDim = Math.max(rawExportWidth, rawExportHeight);
+    const clampRatio = maxDim > MAX_IMAGE_DIMENSION ? MAX_IMAGE_DIMENSION / maxDim : 1;
+    const exportWidth = Math.round(rawExportWidth * clampRatio);
+    const exportHeight = Math.round(rawExportHeight * clampRatio);
     let src;
     try {
         const doc = element.ownerDocument;
@@ -12878,8 +12900,9 @@ function convertCanvasElement(element, context) {
         ? resolveVariable(styles.boxShadow, cssVariables)
         : null;
     const shadow = parseShadow(shadowStr);
-    // 图层尺寸用 2 倍宽高，scale 0.5，显示时等于 displayWidth x displayHeight，实现高清
-    const scale = 1 / CANVAS_EXPORT_PIXEL_RATIO;
+    // 图层尺寸用导出宽高，scaleX/scaleY 保证显示尺寸等于 displayWidth x displayHeight，实现高清
+    const scaleX = displayWidth / exportWidth;
+    const scaleY = displayHeight / exportHeight;
     const layer = {
         type: "image",
         id: uuid(),
@@ -12887,8 +12910,8 @@ function convertCanvasElement(element, context) {
         top,
         width: exportWidth,
         height: exportHeight,
-        scaleX: scale,
-        scaleY: scale,
+        scaleX,
+        scaleY,
         src,
     };
     if (borderRadius > 0) {
@@ -13018,8 +13041,12 @@ async function convertSVGToPNG(svgDataUrl, width, height, win, scale = 5) {
         img.onload = () => {
             try {
                 const canvas = document.createElement("canvas");
-                const actualWidth = width * scale * dpr;
-                const actualHeight = height * scale * dpr;
+                // 动态限制 scale：确保物理像素长边不超过 MAX_IMAGE_DIMENSION
+                const maxDim = Math.max(width, height);
+                const maxScale = maxDim > 0 ? MAX_IMAGE_DIMENSION / (maxDim * dpr) : scale;
+                const clampedScale = Math.min(scale, maxScale);
+                const actualWidth = Math.round(width * clampedScale * dpr);
+                const actualHeight = Math.round(height * clampedScale * dpr);
                 canvas.width = actualWidth;
                 canvas.height = actualHeight;
                 const ctx = canvas.getContext("2d");
@@ -13027,7 +13054,7 @@ async function convertSVGToPNG(svgDataUrl, width, height, win, scale = 5) {
                     resolve(null);
                     return;
                 }
-                ctx.scale(scale * dpr, scale * dpr);
+                ctx.scale(clampedScale * dpr, clampedScale * dpr);
                 ctx.drawImage(img, 0, 0, width, height);
                 resolve({
                     base64: canvas.toDataURL("image/png"),