goatdee-canvas 0.0.4 → 0.0.5

package/dist/index.cjs

@@ -3124,6 +3124,34 @@ function waitForImage(img, timeout = 5000) {
         };
     });
 }
+/**
+ * 加载图片并获取其自然尺寸
+ * @param src - 图片 URL
+ * @param timeout - 超时时间（毫秒）
+ * @returns 图片的自然宽度和高度，加载失败返回 null
+ */
+async function loadImageDimensions(src, timeout = 5000) {
+    return new Promise((resolve) => {
+        const img = new Image();
+        const timeoutId = setTimeout(() => {
+            resolve(null);
+        }, timeout);
+        img.onload = () => {
+            clearTimeout(timeoutId);
+            if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+                resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            }
+            else {
+                resolve(null);
+            }
+        };
+        img.onerror = () => {
+            clearTimeout(timeoutId);
+            resolve(null);
+        };
+        img.src = src;
+    });
+}
 /**
  * 等待容器内所有图片加载完成
  * @param container - 容器元素
@@ -11813,7 +11841,7 @@ function shouldConvertAsBackground(styles, cssVariables) {
  * @param styles 元素样式（可选）
  * @returns base64 data URL 或 null
  */
-async function renderSVGToBase64(element, width, height, styles, scale = 2) {
+async function renderSVGToBase64(element, width, height, styles, scale = 5) {
     var _a, _b, _c;
     if (typeof document === "undefined" || typeof window === "undefined") {
         return null;
@@ -11855,8 +11883,10 @@ async function renderSVGToBase64(element, width, height, styles, scale = 2) {
         // 创建 data URL
         const dataUrl = `data:image/svg+xml,${encodedSVG}`;
         // 使用 canvas 将 SVG 渲染为 PNG
-        const pngDataUrl = await convertSVGToPNG(dataUrl, width, height, win, scale);
-        return pngDataUrl || dataUrl;
+        const result = await convertSVGToPNG(dataUrl, width, height, win, scale);
+        if (!result)
+            return null;
+        return result;
     }
     catch (e) {
         console.warn("Failed to render SVG to base64:", e);
@@ -11889,7 +11919,7 @@ function resolveCurrentColor(node, color) {
  * 用于处理有复杂滤镜效果的 SVG
  * @param win 元素所在 document 的 window（元素在 iframe 内时传入 iframe.contentWindow）
  */
-async function convertSVGToPNG(svgDataUrl, width, height, win, scale = 2) {
+async function convertSVGToPNG(svgDataUrl, width, height, win, scale = 5) {
     return new Promise((resolve) => {
         var _a, _b;
         const img = new Image();
@@ -11897,8 +11927,10 @@ async function convertSVGToPNG(svgDataUrl, width, height, win, scale = 2) {
         img.onload = () => {
             try {
                 const canvas = document.createElement("canvas");
-                canvas.width = width * scale * dpr;
-                canvas.height = height * scale * dpr;
+                const actualWidth = width * scale * dpr;
+                const actualHeight = height * scale * dpr;
+                canvas.width = actualWidth;
+                canvas.height = actualHeight;
                 const ctx = canvas.getContext("2d");
                 if (!ctx) {
                     resolve(null);
@@ -11906,7 +11938,13 @@ async function convertSVGToPNG(svgDataUrl, width, height, win, scale = 2) {
                 }
                 ctx.scale(scale * dpr, scale * dpr);
                 ctx.drawImage(img, 0, 0, width, height);
-                resolve(canvas.toDataURL("image/png"));
+                resolve({
+                    base64: canvas.toDataURL("image/png"),
+                    actualWidth,
+                    actualHeight,
+                    logicalWidth: width,
+                    logicalHeight: height,
+                });
             }
             catch (e) {
                 console.warn("Failed to convert SVG to PNG:", e);
@@ -11970,6 +12008,7 @@ async function renderElementWithHtml2Canvas(element, styles, rect) {
         const blurRadius = blurMatch ? parseInt(blurMatch[1], 10) : 0;
         // blur 扩散范围约为 3 倍半径（3σ 原则）
         const padding = blurRadius * 3;
+        const dpr = win.devicePixelRatio || 1;
         // 创建临时容器（使用元素所在 document，以便 iframe 内元素在正确上下文中渲染）
         const tempContainer = doc.createElement("div");
         tempContainer.style.position = "fixed";
@@ -11993,7 +12032,7 @@ async function renderElementWithHtml2Canvas(element, styles, rect) {
         // 使用 html2canvas 截图
         const canvas = await html2canvasExports(tempContainer, {
             backgroundColor: null,
-            scale: win.devicePixelRatio || 1,
+            scale: dpr,
             logging: false,
             useCORS: true,
             allowTaint: true,
@@ -12005,6 +12044,10 @@ async function renderElementWithHtml2Canvas(element, styles, rect) {
         return {
             base64: canvas.toDataURL("image/png"),
             padding: padding,
+            actualWidth: totalWidth * dpr,
+            actualHeight: totalHeight * dpr,
+            logicalWidth: totalWidth,
+            logicalHeight: totalHeight,
         };
     }
     catch (e) {
@@ -12069,7 +12112,16 @@ async function renderElementWithFilterToBase64(element, width, height, styles) {
     const filterStr = styles.filter;
     // 没有 filter 或 filter:none，走常规 html2canvas 路径
     if (!filterStr || filterStr === 'none') {
-        return renderElementWithHtml2Canvas(element, styles, { width, height });
+        const result = await renderElementWithHtml2Canvas(element, styles, { width, height });
+        if (!result)
+            return null;
+        return {
+            ...result,
+            actualWidth: width,
+            actualHeight: height,
+            logicalWidth: width,
+            logicalHeight: height,
+        };
     }
     // html2canvas 完全不支持任何 CSS filter 函数
     //（blur / brightness / contrast / saturate / hue-rotate /
@@ -12126,6 +12178,10 @@ async function renderElementWithFilterToBase64(element, width, height, styles) {
         return {
             base64: finalCanvas.toDataURL('image/png'),
             padding,
+            actualWidth: totalW * dpr,
+            actualHeight: totalH * dpr,
+            logicalWidth: totalW,
+            logicalHeight: totalH,
         };
     }
     catch (e) {
@@ -12480,9 +12536,10 @@ async function renderPseudoElementWithHtml2Canvas(element, pseudoElement, rect,
             }
         }
         // 使用 html2canvas 截图
+        const dpr = win.devicePixelRatio || 1;
         const canvas = await html2canvasExports(tempContainer, {
             backgroundColor: null,
-            scale: win.devicePixelRatio || 1,
+            scale: dpr,
             logging: false,
             useCORS: true,
             allowTaint: true,
@@ -12495,6 +12552,10 @@ async function renderPseudoElementWithHtml2Canvas(element, pseudoElement, rect,
         return {
             base64: canvas.toDataURL("image/png"),
             padding: padding,
+            actualWidth: totalWidth * dpr,
+            actualHeight: totalHeight * dpr,
+            logicalWidth: totalWidth,
+            logicalHeight: totalHeight,
         };
     }
     catch (e) {
@@ -12550,6 +12611,7 @@ async function renderMarkerWithHtml2Canvas(element, rect, markerStyles, elementS
     try {
         const totalWidth = Math.ceil(rect.width);
         const totalHeight = Math.ceil(rect.height);
+        const dpr = win.devicePixelRatio || 1;
         const tempContainer = doc.createElement('div');
         tempContainer.style.position = 'fixed';
         tempContainer.style.left = '-9999px';
@@ -12581,7 +12643,7 @@ async function renderMarkerWithHtml2Canvas(element, rect, markerStyles, elementS
         }
         const canvas = await html2canvasExports(tempContainer, {
             backgroundColor: null,
-            scale: win.devicePixelRatio || 1,
+            scale: dpr,
             logging: false,
             useCORS: true,
             allowTaint: true,
@@ -12589,13 +12651,200 @@ async function renderMarkerWithHtml2Canvas(element, rect, markerStyles, elementS
             height: totalHeight,
         });
         doc.body.removeChild(tempContainer);
-        return { base64: canvas.toDataURL('image/png'), padding: 0 };
+        return {
+            base64: canvas.toDataURL('image/png'),
+            padding: 0,
+            actualWidth: totalWidth * dpr,
+            actualHeight: totalHeight * dpr,
+            logicalWidth: totalWidth,
+            logicalHeight: totalHeight,
+        };
     }
     catch (e) {
         console.error('[html2canvas] Error rendering ::marker:', e);
         return null;
     }
 }
+/**
+ * 解析 repeating-linear-gradient 参数
+ * 例如：repeating-linear-gradient(45deg, #000, #000 2px, transparent 2px, transparent 6px)
+ * 或：repeating-linear-gradient(45deg, rgb(0,0,0) 0px, rgb(0,0,0) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px)
+ */
+function parseRepeatingLinearGradient(gradientStr) {
+    // 匹配整个 repeating-linear-gradient(...)，使用递归括号匹配
+    let startIdx = gradientStr.indexOf('repeating-linear-gradient(');
+    if (startIdx === -1) {
+        return null;
+    }
+    startIdx += 'repeating-linear-gradient('.length;
+    let parenDepth = 1;
+    let endIdx = startIdx;
+    // 找到匹配的右括号
+    while (endIdx < gradientStr.length && parenDepth > 0) {
+        if (gradientStr[endIdx] === '(')
+            parenDepth++;
+        if (gradientStr[endIdx] === ')')
+            parenDepth--;
+        if (parenDepth > 0)
+            endIdx++;
+    }
+    const content = gradientStr.substring(startIdx, endIdx);
+    // 智能分割：考虑括号嵌套（如 rgb(), rgba()）
+    const parts = [];
+    let current = '';
+    parenDepth = 0;
+    for (let i = 0; i < content.length; i++) {
+        const char = content[i];
+        if (char === '(')
+            parenDepth++;
+        if (char === ')')
+            parenDepth--;
+        if (char === ',' && parenDepth === 0) {
+            if (current.trim()) {
+                parts.push(current.trim());
+            }
+            current = '';
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.trim()) {
+        parts.push(current.trim());
+    }
+    // 解析角度
+    let angle = 180; // 默认向下
+    let colorStopStart = 0;
+    if (parts.length > 0 && parts[0].includes('deg')) {
+        const angleMatch = parts[0].match(/([-\d.]+)deg/);
+        if (angleMatch) {
+            angle = parseFloat(angleMatch[1]);
+            colorStopStart = 1;
+        }
+    }
+    // 解析颜色停止点
+    const colorStops = [];
+    let lastPosition = 0;
+    for (let i = colorStopStart; i < parts.length; i++) {
+        const part = parts[i].trim();
+        // 尝试匹配 "color position" 格式
+        // 支持: "rgb(0,0,0) 2px", "#000 2px", "transparent 2px", "rgba(0,0,0,0) 6px"
+        const withPosMatch = part.match(/^(.+?)\s+([\d.]+)(px|%|em|rem)?$/);
+        if (withPosMatch) {
+            const color = withPosMatch[1].trim();
+            const position = parseFloat(withPosMatch[2]);
+            colorStops.push({ color, position });
+            lastPosition = position;
+        }
+        else {
+            // 没有位置信息，使用上一个位置
+            const color = part.trim();
+            colorStops.push({ color, position: lastPosition });
+        }
+    }
+    if (colorStops.length < 2) {
+        return null;
+    }
+    return { angle, colorStops };
+}
+/**
+ * 使用 Canvas 2D 手动渲染 repeating-linear-gradient
+ * html2canvas 不支持 repeating-linear-gradient，需要手动绘制
+ */
+function renderRepeatingLinearGradientToCanvas(canvas, width, height, gradientStr, dpr) {
+    const parsed = parseRepeatingLinearGradient(gradientStr);
+    if (!parsed) {
+        return false;
+    }
+    const { angle, colorStops } = parsed;
+    if (colorStops.length < 2) {
+        return false;
+    }
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        return false;
+    }
+    canvas.width = width;
+    canvas.height = height;
+    // 计算渐变的重复周期（最后一个颜色停止点的位置）
+    const repeatLength = colorStops[colorStops.length - 1].position;
+    if (repeatLength <= 0) {
+        return false;
+    }
+    // 将角度转换为弧度
+    const angleRad = (angle - 90) * Math.PI / 180;
+    // 计算渐变方向向量
+    const dx = Math.cos(angleRad);
+    const dy = Math.sin(angleRad);
+    // 计算需要覆盖整个画布的渐变长度
+    const diagonal = Math.sqrt(width * width + height * height);
+    const gradientLength = diagonal * 2; // 放大确保覆盖
+    // 计算渐变起点和终点（从画布中心延伸）
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const x0 = centerX - dx * gradientLength / 2;
+    const y0 = centerY - dy * gradientLength / 2;
+    const x1 = centerX + dx * gradientLength / 2;
+    const y1 = centerY + dy * gradientLength / 2;
+    // 创建线性渐变
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    // 计算需要重复多少次才能覆盖整个渐变长度
+    const repeatCount = Math.ceil(gradientLength / repeatLength) + 2;
+    // 添加重复的颜色停止点
+    for (let i = 0; i < repeatCount; i++) {
+        const offset = i * repeatLength;
+        for (const stop of colorStops) {
+            const absolutePosition = offset + stop.position;
+            const normalizedPosition = absolutePosition / gradientLength;
+            if (normalizedPosition >= 0 && normalizedPosition <= 1) {
+                gradient.addColorStop(normalizedPosition, stop.color);
+            }
+        }
+    }
+    // 填充渐变
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+    return true;
+}
+/**
+ * 使用 Canvas 2D 渲染 repeating-linear-gradient 为 base64 图片
+ * html2canvas 不支持 repeating-linear-gradient，需要手动绘制
+ * @returns 返回渲染结果，如果失败返回 null
+ */
+async function renderRepeatingLinearGradientToBase64(element, width, height) {
+    const doc = element.ownerDocument;
+    const win = doc === null || doc === void 0 ? void 0 : doc.defaultView;
+    if (!doc || !win) {
+        return null;
+    }
+    try {
+        const dpr = win.devicePixelRatio || 1;
+        // 获取元素的背景样式
+        const styles = win.getComputedStyle(element);
+        const bgImage = styles.backgroundImage;
+        if (!bgImage || !bgImage.includes('repeating-linear-gradient')) {
+            return null;
+        }
+        // 使用 Canvas 2D 手动渲染
+        const canvas = doc.createElement('canvas');
+        const success = renderRepeatingLinearGradientToCanvas(canvas, width, height, bgImage, dpr);
+        if (!success) {
+            return null;
+        }
+        const base64 = canvas.toDataURL('image/png');
+        return {
+            base64: base64,
+            actualWidth: width,
+            actualHeight: height,
+            logicalWidth: width,
+            logicalHeight: height,
+        };
+    }
+    catch (e) {
+        console.error('[renderRepeatingLinearGradientToBase64] 错误:', e);
+        return null;
+    }
+}
 /**
  * 将元素的背景渲染为 base64 图片
  * 使用 html2canvas 完美复刻复杂背景效果
@@ -12608,6 +12857,7 @@ async function renderBackgroundToBase64(element, width, height) {
         return null;
     }
     try {
+        const dpr = win.devicePixelRatio || 1;
         // 创建临时容器（使用元素所在 document，以便 iframe 内元素在正确上下文中渲染）
         const tempContainer = doc.createElement("div");
         tempContainer.style.position = "fixed";
@@ -12630,7 +12880,7 @@ async function renderBackgroundToBase64(element, width, height) {
         // 使用 html2canvas 截图
         const canvas = await html2canvasExports(tempContainer, {
             backgroundColor: null,
-            scale: win.devicePixelRatio || 1,
+            scale: dpr,
             logging: false,
             useCORS: true,
             allowTaint: true,
@@ -12639,7 +12889,13 @@ async function renderBackgroundToBase64(element, width, height) {
         });
         // 清理
         doc.body.removeChild(tempContainer);
-        return canvas.toDataURL("image/png");
+        return {
+            base64: canvas.toDataURL("image/png"),
+            actualWidth: width * dpr,
+            actualHeight: height * dpr,
+            logicalWidth: width,
+            logicalHeight: height,
+        };
     }
     catch (e) {
         console.warn("Failed to render background to base64:", e);
@@ -12744,34 +13000,36 @@ function convertImageElement(element, context) {
         ? resolveVariable(styles.boxShadow, cssVariables)
         : null;
     const shadow = parseShadow(shadowStr);
-    // 计算图片尺寸
-    let width = rect.width;
-    let height = rect.height;
-    // 如果高度很小（可能图片未加载），尝试根据自然尺寸计算
-    if (height < 10 && element.naturalWidth > 0 && element.naturalHeight > 0) {
-        const aspectRatio = element.naturalHeight / element.naturalWidth;
-        height = width * aspectRatio;
-    }
-    // 如果仍然没有高度，尝试从 HTML 属性获取
-    if (height < 10) {
+    // 获取图片的像素尺寸（裁剪区域）
+    let naturalWidth = element.naturalWidth;
+    let naturalHeight = element.naturalHeight;
+    // 如果图片未加载，尝试从 HTML 属性获取
+    if (naturalWidth === 0 || naturalHeight === 0) {
         const attrWidth = element.getAttribute("width");
         const attrHeight = element.getAttribute("height");
         if (attrWidth && attrHeight) {
-            const w = parseFloat(attrWidth);
-            const h = parseFloat(attrHeight);
-            if (w > 0 && h > 0) {
-                height = (width / w) * h;
-            }
+            naturalWidth = parseFloat(attrWidth);
+            naturalHeight = parseFloat(attrHeight);
         }
     }
+    // 如果仍然无法获取像素尺寸，回退到显示尺寸
+    if (naturalWidth === 0 || naturalHeight === 0) {
+        naturalWidth = rect.width;
+        naturalHeight = rect.height;
+    }
+    // 计算缩放比例：显示尺寸 / 像素尺寸
+    const scaleX = naturalWidth > 0 ? rect.width / naturalWidth : 1;
+    const scaleY = naturalHeight > 0 ? rect.height / naturalHeight : 1;
     const layer = {
         type: "image",
         name: prompt,
         id: uuid(),
         left,
         top,
-        width,
-        height,
+        width: naturalWidth,
+        height: naturalHeight,
+        scaleX,
+        scaleY,
         src,
     };
     if (borderRadius > 0) {
@@ -12867,10 +13125,11 @@ async function convertSVGElement(element, context) {
     // 计算相对位置
     const left = rect.left - containerRect.left;
     const top = rect.top - containerRect.top;
-    // 获取 SVG 的 data URL
-    const svgDataUrl = await renderSVGToBase64(element, rect.width, rect.height, styles);
-    if (!svgDataUrl)
+    // 获取 SVG 的 data URL（使用 scale=10 提升清晰度）
+    const result = await renderSVGToBase64(element, rect.width, rect.height, styles, 10);
+    if (!result)
         return null;
+    const { base64, actualWidth, actualHeight, logicalWidth, logicalHeight } = result;
     // 解析圆角
     const borderRadiusStr = styles
         ? resolveVariable(styles.borderRadius, cssVariables)
@@ -12885,17 +13144,19 @@ async function convertSVGElement(element, context) {
         ? resolveVariable(styles.boxShadow, cssVariables)
         : null;
     const shadow = parseShadow(shadowStr);
-    const scale = 10;
+    // 使用实际像素尺寸作为 width/height，通过 scale 控制显示尺寸
+    const scaleX = logicalWidth / actualWidth;
+    const scaleY = logicalHeight / actualHeight;
     const layer = {
         type: "image",
         id: uuid(),
         left,
         top,
-        width: rect.width * scale,
-        height: rect.height * scale,
-        scaleX: 1 / scale,
-        scaleY: 1 / scale,
-        src: svgDataUrl,
+        width: actualWidth,
+        height: actualHeight,
+        scaleX,
+        scaleY,
+        src: base64,
     };
     if (borderRadius > 0) {
         layer.rx = borderRadius;
@@ -12972,21 +13233,20 @@ async function convertPseudoElements(element, context) {
         if (angle === undefined) {
             angle = getElementRotation(element, null);
         }
+        // 使用实际像素尺寸作为 width/height，通过 scale 控制显示尺寸
+        const scaleX = useScale ? logicalWidth / actualWidth : 1;
+        const scaleY = useScale ? logicalHeight / actualHeight : 1;
         const imageLayer = {
             type: "image",
             id: uuid(),
             left,
             top,
-            width: layerWidth + padding * 2,
-            height: layerHeight + padding * 2,
+            width: actualWidth,
+            height: actualHeight,
+            scaleX,
+            scaleY,
             src: base64,
         };
-        if (useScale) {
-            const w = layerWidth + padding * 2;
-            const h = layerHeight + padding * 2;
-            imageLayer.scaleX = logicalWidth / w;
-            imageLayer.scaleY = logicalHeight / h;
-        }
         if (opacity < 1) {
             imageLayer.opacity = opacity;
         }
@@ -12997,6 +13257,165 @@ async function convertPseudoElements(element, context) {
     }
     return layers;
 }
+/**
+ * 处理带有 filter 效果的背景元素
+ */
+async function handleFilterBackground(element, left, top, width, height, styles) {
+    const result = await renderElementWithFilterToBase64(element, width, height, styles);
+    if (!result)
+        return null;
+    const { base64, padding, actualWidth, actualHeight, logicalWidth, logicalHeight } = result;
+    // 解析透明度（考虑父元素链的透明度累积）
+    const opacity = getElementOpacity(element);
+    // 解析旋转角度（考虑父元素链的 transform: rotate）
+    const angle = getElementRotation(element, styles);
+    // 使用实际像素尺寸作为 width/height，通过 scale 控制显示尺寸
+    const scaleX = logicalWidth / actualWidth;
+    const scaleY = logicalHeight / actualHeight;
+    const imageLayer = {
+        type: "image",
+        id: uuid(),
+        left: left - padding,
+        top: top - padding,
+        width: actualWidth,
+        height: actualHeight,
+        scaleX,
+        scaleY,
+        src: base64,
+    };
+    if (opacity < 1) {
+        imageLayer.opacity = opacity;
+    }
+    if (angle !== undefined) {
+        imageLayer.angle = angle;
+    }
+    return imageLayer;
+}
+/**
+ * 处理 repeating-linear-gradient 背景
+ */
+async function handleRepeatingLinearGradientBackground(element, left, top, width, height, borderRadius, isCircle, styles, cssVariables) {
+    const result = await renderRepeatingLinearGradientToBase64(element, width, height);
+    if (!result)
+        return null;
+    const { base64, actualWidth, actualHeight, logicalWidth, logicalHeight } = result;
+    const shadowStr = resolveVariable(styles.boxShadow, cssVariables);
+    const shadow = parseShadow(shadowStr);
+    // 解析透明度（考虑父元素链的透明度累积）
+    const opacity = getElementOpacity(element);
+    // 解析旋转角度（考虑父元素链的 transform: rotate）
+    const angle = getElementRotation(element, styles);
+    // 使用实际像素尺寸作为 width/height，通过 scale 控制显示尺寸
+    const scaleX = logicalWidth / actualWidth;
+    const scaleY = logicalHeight / actualHeight;
+    const imageLayer = {
+        type: "image",
+        id: uuid(),
+        left,
+        top,
+        width: actualWidth,
+        height: actualHeight,
+        scaleX,
+        scaleY,
+        src: base64,
+    };
+    if (borderRadius > 0 && !isCircle) {
+        imageLayer.rx = borderRadius;
+        imageLayer.ry = borderRadius;
+    }
+    if (shadow)
+        imageLayer.shadow = shadow;
+    if (angle !== undefined)
+        imageLayer.angle = angle;
+    if (opacity < 1)
+        imageLayer.opacity = opacity;
+    return imageLayer;
+}
+/**
+ * 处理复杂背景（url、gradient 等）
+ */
+async function handleComplexBackground(element, left, top, width, height, borderRadius, isCircle, bgImage, bgSize, angle, styles, cssVariables) {
+    // 检查是否是简单的 url() 背景图片
+    if (bgImage && bgImage.includes("url(")) {
+        // 提取 URL
+        const urlMatch = bgImage.match(/url\(["']?([^"')]+)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+            const imageUrl = urlMatch[1];
+            const shadowStr = resolveVariable(styles.boxShadow, cssVariables);
+            const shadow = parseShadow(shadowStr);
+            // 解析透明度（考虑父元素链的透明度累积）
+            const opacity = getElementOpacity(element);
+            // 尝试加载图片获取自然尺寸
+            const dimensions = await loadImageDimensions(imageUrl);
+            let naturalWidth = width;
+            let naturalHeight = height;
+            let scaleX = 1;
+            let scaleY = 1;
+            if (dimensions) {
+                naturalWidth = dimensions.width;
+                naturalHeight = dimensions.height;
+                scaleX = width / naturalWidth;
+                scaleY = height / naturalHeight;
+            }
+            const imageLayer = {
+                type: "image",
+                id: uuid(),
+                left,
+                top,
+                width: naturalWidth,
+                height: naturalHeight,
+                scaleX,
+                scaleY,
+                src: imageUrl,
+            };
+            if (borderRadius > 0 && !isCircle) {
+                imageLayer.rx = borderRadius;
+                imageLayer.ry = borderRadius;
+            }
+            if (shadow)
+                imageLayer.shadow = shadow;
+            if (angle !== undefined)
+                imageLayer.angle = angle;
+            if (opacity < 1)
+                imageLayer.opacity = opacity;
+            return imageLayer;
+        }
+    }
+    // 对于复杂背景（gradient 等），使用 html2canvas 渲染
+    const result = await renderBackgroundToBase64(element, width, height);
+    if (!result)
+        return null;
+    const { base64, actualWidth, actualHeight, logicalWidth, logicalHeight } = result;
+    const shadowStr = resolveVariable(styles.boxShadow, cssVariables);
+    const shadow = parseShadow(shadowStr);
+    // 解析透明度（考虑父元素链的透明度累积）
+    const opacity = getElementOpacity(element);
+    // 使用实际像素尺寸作为 width/height，通过 scale 控制显示尺寸
+    const scaleX = logicalWidth / actualWidth;
+    const scaleY = logicalHeight / actualHeight;
+    const imageLayer = {
+        type: "image",
+        id: uuid(),
+        left,
+        top,
+        width: actualWidth,
+        height: actualHeight,
+        scaleX,
+        scaleY,
+        src: base64,
+    };
+    if (borderRadius > 0 && !isCircle) {
+        imageLayer.rx = borderRadius;
+        imageLayer.ry = borderRadius;
+    }
+    if (shadow)
+        imageLayer.shadow = shadow;
+    if (angle !== undefined)
+        imageLayer.angle = angle;
+    if (opacity < 1)
+        imageLayer.opacity = opacity;
+    return imageLayer;
+}
 /**
  * 转换背景元素
  */
@@ -13045,93 +13464,23 @@ async function convertBackgroundElement(element, context) {
         borderRadius >= Math.min(width, height) / 2);
     const filterStr = styles.filter;
     const hasFilter = filterStr && filterStr !== "none";
+    // 处理 filter 效果
     if (hasFilter) {
-        const result = await renderElementWithFilterToBase64(element, width, height, styles);
-        if (result) {
-            const { base64, padding } = result;
-            // 解析透明度（考虑父元素链的透明度累积）
-            const opacity = getElementOpacity(element);
-            // 解析旋转角度（考虑父元素链的 transform: rotate）
-            const angle = getElementRotation(element, styles);
-            const imageLayer = {
-                type: "image",
-                id: uuid(),
-                left: left - padding,
-                top: top - padding,
-                width: width + padding * 2,
-                height: height + padding * 2,
-                src: base64,
-            };
-            if (opacity < 1) {
-                imageLayer.opacity = opacity;
-            }
-            if (angle !== undefined) {
-                imageLayer.angle = angle;
-            }
-            return imageLayer;
-        }
+        const result = await handleFilterBackground(element, left, top, width, height, styles);
+        if (result)
+            return result;
     }
+    // 处理 repeating-linear-gradient（html2canvas 不支持，需要手动渲染）
+    if (bgImage && bgImage.includes('repeating-linear-gradient')) {
+        const result = await handleRepeatingLinearGradientBackground(element, left, top, width, height, borderRadius, isCircle, styles, cssVariables);
+        if (result)
+            return result;
+    }
+    // 处理其他复杂背景
     if (isComplexBackground(bgImage, bgSize)) {
-        // 检查是否是简单的 url() 背景图片
-        if (bgImage && bgImage.includes("url(")) {
-            // 提取 URL
-            const urlMatch = bgImage.match(/url\(["']?([^"')]+)["']?\)/);
-            if (urlMatch && urlMatch[1]) {
-                const imageUrl = urlMatch[1];
-                const shadowStr = resolveVariable(styles.boxShadow, cssVariables);
-                const shadow = parseShadow(shadowStr);
-                // 解析透明度（考虑父元素链的透明度累积）
-                const opacity = getElementOpacity(element);
-                const imageLayer = {
-                    type: "image",
-                    id: uuid(),
-                    left,
-                    top,
-                    width,
-                    height,
-                    src: imageUrl,
-                };
-                if (borderRadius > 0 && !isCircle) {
-                    imageLayer.rx = borderRadius;
-                    imageLayer.ry = borderRadius;
-                }
-                if (shadow)
-                    imageLayer.shadow = shadow;
-                if (angle !== undefined)
-                    imageLayer.angle = angle;
-                if (opacity < 1)
-                    imageLayer.opacity = opacity;
-                return imageLayer;
-            }
-        }
-        // 对于复杂背景（gradient 等），使用 html2canvas 渲染
-        const base64 = await renderBackgroundToBase64(element, width, height);
-        if (base64) {
-            const shadowStr = resolveVariable(styles.boxShadow, cssVariables);
-            const shadow = parseShadow(shadowStr);
-            // 解析透明度（考虑父元素链的透明度累积）
-            const opacity = getElementOpacity(element);
-            const imageLayer = {
-                type: "image",
-                id: uuid(),
-                left,
-                top,
-                width,
-                height,
-                src: base64,
-            };
-            if (borderRadius > 0 && !isCircle) {
-                imageLayer.rx = borderRadius;
-                imageLayer.ry = borderRadius;
-            }
-            if (shadow)
-                imageLayer.shadow = shadow;
-            if (angle !== undefined)
-                imageLayer.angle = angle;
-            if (opacity < 1)
-                imageLayer.opacity = opacity;
-            return imageLayer;
-        }
+        const result = await handleComplexBackground(element, left, top, width, height, borderRadius, isCircle, bgImage, bgSize, angle, styles, cssVariables);
+        if (result)
+            return result;
     }
     let fill;
     if (bgImage && bgImage !== "none") {
@@ -13277,21 +13626,21 @@ async function convertSingleBorders(element, context) {
                 height: rect.height,
             });
             if (result) {
-                const { base64, padding } = result;
-                const scale = 2;
+                const { base64, padding, actualWidth, actualHeight, logicalWidth, logicalHeight } = result;
                 const left = rect.left - containerRect.left - padding;
                 const top = rect.top - containerRect.top - padding;
-                const width = rect.width + padding * 2;
-                const height = rect.height + padding * 2;
+                // 使用实际像素尺寸作为 width/height，通过 scale 控制显示尺寸
+                const scaleX = logicalWidth / actualWidth;
+                const scaleY = logicalHeight / actualHeight;
                 const imageLayer = {
                     type: "image",
                     id: uuid(),
                     left,
                     top,
-                    width: width * scale,
-                    height: height * scale,
-                    scaleX: 1 / scale,
-                    scaleY: 1 / scale,
+                    width: actualWidth,
+                    height: actualHeight,
+                    scaleX,
+                    scaleY,
                     src: base64,
                 };
                 if (opacity < 1)
@@ -13369,6 +13718,10 @@ async function convertSingleBorders(element, context) {
  * HTML to EditorJSON Converter - Text Element Converters
  * 新的文本元素转换逻辑
  */
+/**
+ * 标记文本元素已处理的属性名
+ */
+const TEXT_PROCESSED_ATTR = 'data-text-processed';
 /**
  * 获取元素中文本节点的实际边界框
  * 用于处理包含非文本子元素的文本元素（如 <h2><div>图标</div>文本</h2>）
@@ -13449,6 +13802,15 @@ function getDirectTextNodes(element) {
     });
     return directTextNodes;
 }
+/**
+ * 深度标记元素及其所有后代为已处理（递归）
+ */
+function deepMarkAsProcessed(element) {
+    element.setAttribute(TEXT_PROCESSED_ATTR, 'true');
+    for (const child of Array.from(element.children)) {
+        deepMarkAsProcessed(child);
+    }
+}
 /**
  * 判断元素是否为行内元素（通过 display 属性）
  */
@@ -13490,6 +13852,10 @@ function isDecorationOnlyInlineBlock(child) {
 function canProcessAsWholeText(element) {
     const childElements = Array.from(element.children);
     const directTextNodes = getDirectTextNodes(element);
+    // 规则0: 如果有子元素已经被处理过，不能作为整体处理
+    if (childElements.some(child => child.hasAttribute(TEXT_PROCESSED_ATTR))) {
+        return false;
+    }
     // 规则1: 没有子元素，只有直接文本，且不包含 emoji
     if (childElements.length === 0 && directTextNodes.length > 0 && !directTextNodes.some(node => containsEmojiText(node.textContent || ""))) {
         return true;
@@ -13562,7 +13928,9 @@ async function convertChildElements(element, context, layers) {
             layers.push(...pseudoLayers);
         }
         // 递归处理子元素的子元素
-        await convertChildElements(child, context, layers);
+        if (child.children.length > 0) {
+            await convertChildElements(child, context, layers);
+        }
     }
 }
 /**
@@ -13735,10 +14103,15 @@ async function processTextNodeWithEmoji(textNode, parentElement, context, layers
  */
 async function convertTextElements(element, context, layers) {
     var _a;
+    // 检查是否已经处理过（避免重复处理）
+    if (element.hasAttribute(TEXT_PROCESSED_ATTR)) {
+        return true;
+    }
     // 1. 如果是图标字体（如 Material Icons），则转换为 ImageLayer
     const iconLayer = await convertIconFontToImage(element, context);
     if (iconLayer) {
         layers.push(iconLayer);
+        deepMarkAsProcessed(element);
         return true;
     }
     // 2. 作为整体转为 textLayer
@@ -13749,6 +14122,7 @@ async function convertTextElements(element, context, layers) {
         if (textLayer) {
             layers.push(textLayer);
         }
+        deepMarkAsProcessed(element);
         return true;
     }
     // 3. 无法作为整体处理时，将每个直接文本节点转为独立的 textLayer
@@ -14301,21 +14675,20 @@ async function convertSinglePseudoElement(element, pseudoType, ctx) {
     if (angle === undefined) {
         angle = getElementRotation(element, null);
     }
+    // 使用实际像素尺寸作为 width/height，通过 scale 控制显示尺寸
+    const scaleX = useScale ? logicalWidth / actualWidth : 1;
+    const scaleY = useScale ? logicalHeight / actualHeight : 1;
     const imageLayer = {
         type: "image",
         id: uuid(),
         left,
         top,
-        width: layerWidth + padding * 2,
-        height: layerHeight + padding * 2,
+        width: actualWidth,
+        height: actualHeight,
+        scaleX,
+        scaleY,
         src: base64,
     };
-    if (useScale) {
-        const w = layerWidth + padding * 2;
-        const h = layerHeight + padding * 2;
-        imageLayer.scaleX = logicalWidth / w;
-        imageLayer.scaleY = logicalHeight / h;
-    }
     if (opacity < 1)
         imageLayer.opacity = opacity;
     if (angle !== undefined)
@@ -14348,26 +14721,26 @@ async function convertSingleMarker(element, ctx) {
     const result = await renderMarkerWithHtml2Canvas(element, markerRect, markerStyles, elementStyles);
     if (!result)
         return null;
-    const { base64, padding } = result;
+    const { base64, padding, actualWidth, actualHeight, logicalWidth, logicalHeight } = result;
     const { containerRect } = ctx;
     const left = markerRect.left - containerRect.left - padding;
     const top = markerRect.top - containerRect.top - padding;
-    const width = markerRect.width + padding * 2;
-    const height = markerRect.height + padding * 2;
     const markerOpacity = parseFloat(markerStyles.opacity || "1") || 1;
     const parentOpacity = getElementOpacity(element);
     const opacity = markerOpacity * parentOpacity;
     const angle = getElementRotation(element, null);
-    const scale = 5;
+    // 使用实际像素尺寸作为 width/height，通过 scale 控制显示尺寸
+    const scaleX = logicalWidth / actualWidth;
+    const scaleY = logicalHeight / actualHeight;
     const markerLayer = {
         type: "image",
         id: uuid(),
         left,
         top,
-        width: width * scale,
-        height: height * scale,
-        scaleX: 1 / scale,
-        scaleY: 1 / scale,
+        width: actualWidth,
+        height: actualHeight,
+        scaleX,
+        scaleY,
         src: base64,
     };
     if (opacity < 1)