html2canvas-pro 2.4.0 → 2.4.2

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.4.0 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.4.2 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -8089,6 +8089,39 @@
 	};
 	//#endregion
 	//#region src/dom/replaced-elements/svg-element-container.ts
+	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;
+	};
 	var SVGElementContainer = class extends ElementContainer {
 		constructor(context, img) {
 			super(context, img);
@@ -8096,7 +8129,7 @@
 			const bounds = 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(serializeWithoutBoxOffsets(s, img))}`;
 			this.intrinsicWidth = img.width.baseVal.value;
 			this.intrinsicHeight = img.height.baseVal.value;
 			this.context.cache.addImage(this.svg);
@@ -9703,21 +9736,20 @@
 			}
 			if (rx > 0 && ry > 0) {
 				const cacheKey = `rg|${Math.round(x)}x${Math.round(y)}|${Math.round(rx)}x${Math.round(ry)}|${JSON.stringify(backgroundImage.stops)}`;
+				const stops = 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;
+					const offscreen = (this.canvas.ownerDocument ?? document).createElement("canvas");
+					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);
-						processColorStops(backgroundImage.stops, offRadius * 2).forEach((s) => gradient.addColorStop(s.stop, asString(s.color)));
+						const gradient = offCtx.createRadialGradient(rx, rx, 0, rx, rx, rx);
+						stops.forEach((s) => gradient.addColorStop(s.stop, 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);
 					}
@@ -9726,9 +9758,13 @@
 					this.path(path);
 					this.ctx.save();
 					this.ctx.clip();
-					this.ctx.translate(left + x - Math.max(rx, ry), top + y - Math.max(rx, ry));
+					if (lastStop) {
+						this.ctx.fillStyle = 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();
 				}
 			}