html2canvas-pro 2.4.0 → 2.4.2

package/dist/lib/dom/replaced-elements/svg-element-container.js

@@ -1,8 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SVGElementContainer = void 0;
+exports.SVGElementContainer = exports.serializeWithoutBoxOffsets = void 0;
 const element_container_1 = require("../element-container");
 const bounds_1 = require("../../css/layout/bounds");
+const BOX_OFFSET_PROPERTIES = [
+    'position',
+    'inset',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'inset-inline',
+    'inset-inline-start',
+    'inset-inline-end',
+    'inset-block',
+    'inset-block-start',
+    'inset-block-end',
+    'margin',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'margin-inline',
+    'margin-inline-start',
+    'margin-inline-end',
+    'margin-block',
+    'margin-block-start',
+    'margin-block-end'
+];
+const serializeWithoutBoxOffsets = (serializer, img) => {
+    const style = img.getAttribute('style');
+    BOX_OFFSET_PROPERTIES.forEach((property) => img.style.removeProperty(property));
+    const serialized = serializer.serializeToString(img);
+    if (style === null) {
+        img.removeAttribute('style');
+    }
+    else {
+        img.setAttribute('style', style);
+    }
+    return serialized;
+};
+exports.serializeWithoutBoxOffsets = serializeWithoutBoxOffsets;
 class SVGElementContainer extends element_container_1.ElementContainer {
     constructor(context, img) {
         super(context, img);
@@ -10,7 +48,7 @@ class SVGElementContainer extends element_container_1.ElementContainer {
         const bounds = (0, bounds_1.parseBounds)(context, img);
         img.setAttribute('width', `${bounds.width}px`);
         img.setAttribute('height', `${bounds.height}px`);
-        this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`;
+        this.svg = `data:image/svg+xml,${encodeURIComponent((0, exports.serializeWithoutBoxOffsets)(s, img))}`;
         this.intrinsicWidth = img.width.baseVal.value;
         this.intrinsicHeight = img.height.baseVal.value;
         this.context.cache.addImage(this.svg);

package/dist/lib/render/canvas/background-renderer.js

@@ -226,22 +226,27 @@ class BackgroundRenderer {
         if (rx > 0 && ry > 0) {
             // Cache key for radial gradient: position + radii + colour stops
             const cacheKey = `rg|${Math.round(x)}x${Math.round(y)}|${Math.round(rx)}x${Math.round(ry)}|${JSON.stringify(backgroundImage.stops)}`;
+            // The ellipse is rasterised as a circle of radius rx that is scaled vertically by
+            // ry / rx, so the offscreen canvas must be the ellipse's full bounding box
+            // (2rx × 2ry). Sizing it as a max(rx, ry) square stretched the gradient past the
+            // canvas edge whenever ry > rx, clipping the ellipse before its last stop and
+            // leaving a hard horizontal seam on tall elements.
+            const stops = (0, gradient_1.processColorStops)(backgroundImage.stops, rx * 2);
+            const lastStop = stops[stops.length - 1];
             let pattern = this.patternCache.get(cacheKey);
             if (!pattern) {
                 const ownerDocument = this.canvas.ownerDocument ?? document;
-                const size = Math.ceil(Math.max(rx, ry) * 2);
                 const offscreen = ownerDocument.createElement('canvas');
-                offscreen.width = size;
-                offscreen.height = size;
+                offscreen.width = Math.ceil(rx * 2);
+                offscreen.height = Math.ceil(ry * 2);
                 const offCtx = offscreen.getContext('2d');
                 if (offCtx) {
-                    const offRadius = Math.max(rx, ry);
-                    const gradient = offCtx.createRadialGradient(offRadius, offRadius, 0, offRadius, offRadius, offRadius);
-                    (0, gradient_1.processColorStops)(backgroundImage.stops, offRadius * 2).forEach((s) => gradient.addColorStop(s.stop, (0, color_utilities_1.asString)(s.color)));
+                    const gradient = offCtx.createRadialGradient(rx, rx, 0, rx, rx, rx);
+                    stops.forEach((s) => gradient.addColorStop(s.stop, (0, color_utilities_1.asString)(s.color)));
                     offCtx.fillStyle = gradient;
                     if (rx !== ry)
                         offCtx.scale(1, ry / rx);
-                    offCtx.fillRect(0, 0, offRadius * 2, offRadius * 2);
+                    offCtx.fillRect(0, 0, rx * 2, rx * 2);
                     pattern = this.ctx.createPattern(offscreen, 'no-repeat');
                     this.patternCache.set(cacheKey, pattern);
                 }
@@ -250,9 +255,15 @@ class BackgroundRenderer {
                 this.path(path);
                 this.ctx.save();
                 this.ctx.clip();
-                this.ctx.translate(left + x - Math.max(rx, ry), top + y - Math.max(rx, ry));
+                // Outside the ending shape a radial gradient continues with its last colour
+                // stop, so paint that first and lay the ellipse pattern on top.
+                if (lastStop) {
+                    this.ctx.fillStyle = (0, color_utilities_1.asString)(lastStop.color);
+                    this.ctx.fill();
+                }
+                this.ctx.translate(left + x - rx, top + y - ry);
                 this.ctx.fillStyle = pattern;
-                this.ctx.fillRect(0, 0, Math.max(rx, ry) * 2, Math.max(rx, ry) * 2);
+                this.ctx.fillRect(0, 0, rx * 2, ry * 2);
                 this.ctx.restore();
             }
         }

package/dist/types/dom/replaced-elements/svg-element-container.d.ts

@@ -1,5 +1,6 @@
 import { ElementContainer } from '../element-container';
 import { Context } from '../../core/context';
+export declare const serializeWithoutBoxOffsets: (serializer: XMLSerializer, img: SVGSVGElement) => string;
 export declare class SVGElementContainer extends ElementContainer {
     svg: string;
     intrinsicWidth: number;

package/package.json

@@ -19,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.4.0",
+  "version": "2.4.2",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",