dompdf.js 1.1.0 → 1.2.0

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

@@ -51,17 +51,21 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasRenderer = void 0;
+exports.CanvasRenderer = exports.JsPdfContext2d = void 0;
 var jspdf_1 = require("jspdf");
+require("jspdf/dist/polyfills.es.js");
 var bitwise_1 = require("../../core/bitwise");
 var bounds_1 = require("../../css/layout/bounds");
 var text_1 = require("../../css/layout/text");
 var line_height_1 = require("../../css/property-descriptors/line-height");
 var parser_1 = require("../../css/syntax/parser");
 var color_1 = require("../../css/types/color");
+var gradient_1 = require("../../css/types/functions/gradient");
+var image_1 = require("../../css/types/image");
 var length_percentage_1 = require("../../css/types/length-percentage");
 var select_element_container_1 = require("../../dom/elements/select-element-container");
 var textarea_element_container_1 = require("../../dom/elements/textarea-element-container");
+// import {ReplacedElementContainer} from '../../dom/replaced-elements';
 var canvas_element_container_1 = require("../../dom/replaced-elements/canvas-element-container");
 var iframe_element_container_1 = require("../../dom/replaced-elements/iframe-element-container");
 var image_element_container_1 = require("../../dom/replaced-elements/image-element-container");
@@ -74,9 +78,18 @@ var bound_curves_1 = require("../bound-curves");
 var box_sizing_1 = require("../box-sizing");
 var effects_1 = require("../effects");
 var font_metrics_1 = require("../font-metrics");
+// transformPath
+var utils_1 = require("../../utils");
+var path_1 = require("../path");
 var renderer_1 = require("../renderer");
 var stacking_context_1 = require("../stacking-context");
 var vector_1 = require("../vector");
+var JsPdfContext2d = /** @class */ (function () {
+    function JsPdfContext2d() {
+    }
+    return JsPdfContext2d;
+}());
+exports.JsPdfContext2d = JsPdfContext2d;
 var CanvasRenderer = /** @class */ (function (_super) {
     __extends(CanvasRenderer, _super);
     function CanvasRenderer(context, options) {
@@ -84,58 +97,35 @@ var CanvasRenderer = /** @class */ (function (_super) {
         _this._activeEffects = [];
         _this.totalPages = 1;
         _this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        _this.ctx = _this.canvas.getContext('2d');
-        var pxToPt = function (px) { return px * (72 / 96); };
-        var pageWidth = pxToPt(options.width);
-        var pageHeight = pxToPt(options.height);
-        // const enc =
-        //     this.options.encryption &&
-        //     (this.options.encryption.userPassword ||
-        //         this.options.encryption.ownerPassword ||
-        //         (this.options.encryption.userPermissions && this.options.encryption.userPermissions.length))
-        //         ? this.options.encryption
-        //         : [];
-        var encOptions = _this.options.encryption
-            ? {
-                userPassword: _this.options.encryption.userPassword,
-                ownerPassword: _this.options.encryption.ownerPassword,
-                userPermissions: _this.options.encryption.userPermissions
-            }
-            : undefined;
+        // this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
+        _this.pxToPt = function (px) { return px * (72 / 96); };
+        var pageWidth = _this.pxToPt(options.width);
+        var pageHeight = _this.pxToPt(options.height);
+        // 如果 format 是数组，则将 px 转换为 pt
+        var format = Array.isArray(options.format) ? options.format.map(function (v) { return _this.pxToPt(v); }) : options.format;
         _this.jspdfCtx = new jspdf_1.jsPDF({
-            orientation: pageWidth > pageHeight ? 'landscape' : 'portrait',
+            // orientation: pageWidth > pageHeight ? 'landscape' : 'landscape',
             unit: 'pt',
-            format: options.pagination && options.format ? options.format : [pageHeight, pageWidth],
+            format: options.pagination && format ? format : [pageHeight, pageWidth],
             hotfixes: ['px_scaling'],
             putOnlyUsedFonts: options.putOnlyUsedFonts,
             compress: options.compress,
             precision: options.precision,
             floatPrecision: options.floatPrecision,
-            encryption: encOptions
+            encryption: options.encryption
         });
-        //     orientation: pageWidth > pageHeight ? 'landscape' : 'portrait',
-        //     unit: 'pt',
-        //     format: options.pagination && options.format ? options.format : [pageHeight, pageWidth],
-        //     hotfixes: ['px_scaling'],
-        //     putOnlyUsedFonts: options.putOnlyUsedFonts,
-        //     compress: options.compress,
-        //     precision: options.precision,
-        //     floatPrecision: options.floatPrecision,
-        //     encryption: enc
-        // });
         _this.context2dCtx = _this.jspdfCtx.context2d;
         _this.context2dCtx.scale(0.75, 0.75);
         _this.context2dCtx.translate(-options.x, -options.y);
         if (options.fontConfig) {
             try {
-                _this.loadFont();
+                _this.addFontToJsPDF();
             }
             catch (error) {
                 console.warn('Failed to set font:', error);
                 _this.jspdfCtx.setFont('Helvetica');
             }
         }
-        _this.pxToPt = pxToPt;
         if (!options.canvas) {
             _this.canvas.width = 10;
             _this.canvas.height = 10;
@@ -148,26 +138,55 @@ var CanvasRenderer = /** @class */ (function (_super) {
         _this.context.logger.debug("Canvas renderer initialized (".concat(options.width, "x").concat(options.height, ") with scale ").concat(options.scale));
         return _this;
     }
-    CanvasRenderer.prototype.loadFont = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var fontData;
-            return __generator(this, function (_a) {
-                if (this.options.fontConfig.fontBase64) {
-                    fontData = this.options.fontConfig.fontBase64;
-                }
-                this.addFontToJsPDF(fontData);
-                return [2 /*return*/];
-            });
+    CanvasRenderer.prototype.addFontToJsPDF = function () {
+        var _this = this;
+        if ((0, utils_1.isEmptyValue)(this.options.fontConfig)) {
+            return;
+        }
+        var fonts = (0, utils_1.isObject)(this.options.fontConfig)
+            ? [this.options.fontConfig]
+            : this.options.fontConfig;
+        fonts.forEach(function (v) {
+            _this.jspdfCtx.addFileToVFS("".concat(v.fontFamily, ".ttf"), v.fontBase64);
+            _this.jspdfCtx.addFont("".concat(v.fontFamily, ".ttf"), v.fontFamily, 'normal');
+            _this.jspdfCtx.setFont(v.fontFamily);
         });
+        // console.log('render getFont', this.jspdfCtx.getFont());
+        this.context.logger.debug("setFont renderer initialized");
     };
-    CanvasRenderer.prototype.addFontToJsPDF = function (fontData) {
-        var fontFamily = this.options.fontConfig.fontFamily;
-        if (!fontFamily) {
-            return;
+    // reset all font
+    CanvasRenderer.prototype.resetJsPDFFont = function () {
+        var _this = this;
+        if ((0, utils_1.isArray)(this.options.fontConfig) && !(0, utils_1.isEmptyValue)(this.options.fontConfig)) {
+            this.options.fontConfig.forEach(function (v) {
+                v.fontFamily && _this.jspdfCtx.setFont(v.fontFamily);
+            });
         }
-        this.jspdfCtx.addFileToVFS("".concat(fontFamily, ".ttf"), fontData);
-        this.jspdfCtx.addFont("".concat(fontFamily, ".ttf"), fontFamily, 'normal');
-        this.jspdfCtx.setFont(fontFamily);
+    };
+    // setFont form options
+    CanvasRenderer.prototype.setTextFont = function (styles) {
+        var _a, _b, _c;
+        // console.log(styles.fontWeight, styles.fontStyle, styles.fontFamily, 'styles');
+        if ((0, utils_1.isEmptyValue)(this.options.fontConfig)) {
+            return '';
+        }
+        var fontConfigRef = this.options.fontConfig;
+        // 处理字体图标场景
+        var isIconFont = fontConfigRef.find(function (v) { return v.iconFont; });
+        var otherFonts = fontConfigRef.filter(function (v) { return !v.iconFont; });
+        if (isIconFont && styles.fontFamily.some(function (family) { return family.includes(isIconFont.fontFamily); })) {
+            isIconFont.fontFamily && this.jspdfCtx.setFont(isIconFont.fontFamily);
+            return isIconFont.fontFamily;
+        }
+        // 除开字体图标场景
+        if (otherFonts.length === 1) {
+            var fontFamilyCustom_1 = (_a = otherFonts[0].fontFamily) !== null && _a !== void 0 ? _a : '';
+            fontFamilyCustom_1 && this.jspdfCtx.setFont(fontFamilyCustom_1);
+            return fontFamilyCustom_1;
+        }
+        var fontFamilyCustom = (_c = (_b = otherFonts.find(function (v) { return v.fontWeight === (styles.fontWeight > 500 ? 700 : 400) && v.fontStyle === styles.fontStyle; })) === null || _b === void 0 ? void 0 : _b.fontFamily) !== null && _c !== void 0 ? _c : '';
+        fontFamilyCustom && this.jspdfCtx.setFont(fontFamilyCustom);
+        return fontFamilyCustom;
     };
     CanvasRenderer.prototype.applyEffects = function (effects) {
         var _this = this;
@@ -177,27 +196,25 @@ var CanvasRenderer = /** @class */ (function (_super) {
         effects.forEach(function (effect) { return _this.applyEffect(effect); });
     };
     CanvasRenderer.prototype.applyEffect = function (effect) {
-        this.ctx.save();
+        this.context2dCtx.save();
         if ((0, effects_1.isOpacityEffect)(effect)) {
-            this.ctx.globalAlpha = effect.opacity;
+            this.context2dCtx.globalAlpha = effect.opacity;
         }
         if ((0, effects_1.isTransformEffect)(effect)) {
-            this.ctx.translate(effect.offsetX, effect.offsetY);
-            this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
-            this.ctx.translate(-effect.offsetX, -effect.offsetY);
+            this.context2dCtx.translate(effect.offsetX, effect.offsetY);
+            this.context2dCtx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
+            this.context2dCtx.translate(-effect.offsetX, -effect.offsetY);
         }
         if ((0, effects_1.isClipEffect)(effect)) {
             this.path(effect.path);
-            this.ctx.clip();
+            this.context2dCtx.clip();
         }
         this._activeEffects.push(effect);
     };
     CanvasRenderer.prototype.popEffect = function () {
         this._activeEffects.pop();
         this.context2dCtx.restore();
-        if (this.options.fontConfig && this.options.fontConfig.fontFamily) {
-            this.jspdfCtx.setFont(this.options.fontConfig.fontFamily);
-        }
+        this.resetJsPDFFont();
     };
     CanvasRenderer.prototype.renderStack = function (stack) {
         return __awaiter(this, void 0, void 0, function () {
@@ -246,7 +263,8 @@ var CanvasRenderer = /** @class */ (function (_super) {
             var letters = (0, text_1.segmentGraphemes)(text.text);
             letters.reduce(function (left, letter) {
                 _this.context2dCtx.fillText(letter, left, text.bounds.top + baseline);
-                return left + _this.ctx.measureText(letter).width;
+                return left + _this.context2dCtx.measureText(letter);
+                // return left + this.context2dCtx.measureText(letter).width;
             }, text.bounds.left);
         }
     };
@@ -274,19 +292,19 @@ var CanvasRenderer = /** @class */ (function (_super) {
         return "#".concat(r.toString(16).padStart(2, '0')).concat(g.toString(16).padStart(2, '0')).concat(b
             .toString(16)
             .padStart(2, '0'));
-        return (0, color_1.asString)(color);
+        // return asString(color);
     };
     CanvasRenderer.prototype.renderTextNode = function (text, styles) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, font, fontFamily, fontSize, fontSizePt, _b, baseline, middle, paintOrder;
+            var _a, font, fontFamily, fontSize, fontFamilyFinal, fontSizePt, _b, baseline, middle, paintOrder;
             var _this = this;
             return __generator(this, function (_c) {
                 _a = this.createFontStyle(styles), font = _a[0], fontFamily = _a[1], fontSize = _a[2];
-                this.ctx.font = font;
-                this.context2dCtx.font = this.options.fontConfig.fontFamily;
-                this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
-                this.context2dCtx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
-                this.ctx.textAlign = 'left';
+                fontFamilyFinal = this.setTextFont(styles);
+                this.context2dCtx.font = fontFamilyFinal || font;
+                // console.log(fontFamilyFinal, styles, 'render getFont', this.jspdfCtx.getFont());
+                // jspdf context2d not supported ‘direction’
+                // this.context2dCtx.direction = styles.direction === DIRECTION.RTL ? 'rtl' : 'ltr';
                 this.context2dCtx.textAlign = 'left';
                 fontSizePt = styles.fontSize.number;
                 this.jspdfCtx.setFontSize(fontSizePt);
@@ -338,27 +356,65 @@ var CanvasRenderer = /** @class */ (function (_super) {
             });
         });
     };
-    CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) {
-        if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
-            var box = (0, box_sizing_1.contentBox)(container);
-            var path = (0, bound_curves_1.calculatePaddingBoxPath)(curves);
-            this.path(path);
-            this.ctx.save();
-            this.ctx.clip();
-            this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height);
-            this.ctx.restore();
+    CanvasRenderer.prototype.renderReplacedJsPdfImage = function (container, image) {
+        var bounds = (0, box_sizing_1.contentBox)(container);
+        var x = this.pxToPt(bounds.left - this.options.x);
+        var y = this.pxToPt(bounds.top - this.options.y);
+        var width = this.pxToPt(bounds.width);
+        var height = this.pxToPt(bounds.height);
+        // fix: url is svg image export
+        if ((0, utils_1.getImageTypeByPath)(container.src, 'svg')) {
+            var canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            var ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.clearRect(0, 0, width, height);
+                ctx.drawImage(image, 0, 0, width, height);
+                var dataURL = canvas.toDataURL('image/png', 0.8);
+                this.addImagePdf(dataURL, 'PNG', x, y, width, height);
+            }
+        }
+        else {
+            this.addImagePdf(image, 'JPEG', x, y, width, height);
+        }
+    };
+    CanvasRenderer.prototype.renderReplacedJsPdfSvg = function (container, image) {
+        var bounds = (0, box_sizing_1.contentBox)(container);
+        var x = this.pxToPt(bounds.left - this.options.x);
+        var y = this.pxToPt(bounds.top - this.options.y);
+        var width = this.pxToPt(bounds.width);
+        var height = this.pxToPt(bounds.height);
+        var canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        var ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.clearRect(0, 0, width, height);
+            ctx.drawImage(image, 0, 0, width, height);
+            var dataURL = canvas.toDataURL('image/png', 0.8);
+            this.addImagePdf(dataURL, 'PNG', x, y, width, height);
         }
     };
+    CanvasRenderer.prototype.renderReplacedJsPdfCanvasImage = function (container) {
+        var bounds = (0, box_sizing_1.contentBox)(container);
+        var x = this.pxToPt(bounds.left - this.options.x);
+        var y = this.pxToPt(bounds.top - this.options.y);
+        var width = this.pxToPt(bounds.width);
+        var height = this.pxToPt(bounds.height);
+        var dataURL = container.canvas.toDataURL('image/png', 0.8);
+        this.addImagePdf(dataURL, 'PNG', x, y, width, height);
+    };
     CanvasRenderer.prototype.renderNodeContent = function (paint) {
         return __awaiter(this, void 0, void 0, function () {
-            var container, curves, styles, _i, _a, child, image, bounds, x, y, width, height, e_1, bounds, x, y, width, height, dataURL, image, bounds, x, y, width, height, canvas, ctx, dataURL, e_2, size, _b, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, e_3, fontFamily, bounds;
+            var container, styles, _i, _a, child, image, e_1, image, e_2, size, _b, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, iconWidth, iconHeight, e_3, fontFamily, bounds;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
                         this.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
                         container = paint.container;
-                        curves = paint.curves;
                         styles = container.styles;
+                        this.resetJsPDFFont();
                         _i = 0, _a = container.textNodes;
                         _c.label = 1;
                     case 1:
@@ -379,18 +435,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         return [4 /*yield*/, this.context.cache.match(container.src)];
                     case 6:
                         image = _c.sent();
-                        this.renderReplacedElement(container, curves, image);
-                        try {
-                            bounds = (0, box_sizing_1.contentBox)(container);
-                            x = this.pxToPt(bounds.left - this.options.x);
-                            y = this.pxToPt(bounds.top - this.options.y);
-                            width = this.pxToPt(bounds.width);
-                            height = this.pxToPt(bounds.height);
-                            this.addImagePdf(image, 'JPEG', x, y, width, height);
-                        }
-                        catch (err) {
-                            this.context.logger.error("Error adding image to PDF: ".concat(err));
-                        }
+                        this.renderReplacedJsPdfImage(container, image);
                         return [3 /*break*/, 8];
                     case 7:
                         e_1 = _c.sent();
@@ -398,15 +443,8 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         return [3 /*break*/, 8];
                     case 8:
                         if (container instanceof canvas_element_container_1.CanvasElementContainer) {
-                            this.renderReplacedElement(container, curves, container.canvas);
                             try {
-                                bounds = (0, box_sizing_1.contentBox)(container);
-                                x = this.pxToPt(bounds.left - this.options.x);
-                                y = this.pxToPt(bounds.top - this.options.y);
-                                width = this.pxToPt(bounds.width);
-                                height = this.pxToPt(bounds.height);
-                                dataURL = container.canvas.toDataURL('image/png', 0.95);
-                                this.addImagePdf(dataURL, 'PNG', x, y, width, height);
+                                this.renderReplacedJsPdfCanvasImage(container);
                             }
                             catch (err) {
                                 this.context.logger.error("Error adding canvas to PDF: ".concat(err));
@@ -419,27 +457,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         return [4 /*yield*/, this.context.cache.match(container.svg)];
                     case 10:
                         image = _c.sent();
-                        this.renderReplacedElement(container, curves, image);
-                        try {
-                            bounds = (0, box_sizing_1.contentBox)(container);
-                            x = this.pxToPt(bounds.left - this.options.x);
-                            y = this.pxToPt(bounds.top - this.options.y);
-                            width = this.pxToPt(bounds.width);
-                            height = this.pxToPt(bounds.height);
-                            canvas = document.createElement('canvas');
-                            canvas.width = container.intrinsicWidth || image.width;
-                            canvas.height = container.intrinsicHeight || image.height;
-                            ctx = canvas.getContext('2d');
-                            if (ctx) {
-                                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                                ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-                                dataURL = canvas.toDataURL('image/png');
-                                this.addImagePdf(dataURL, 'PNG', x, y, width, height);
-                            }
-                        }
-                        catch (err) {
-                            this.context.logger.error("Error adding SVG to PDF: ".concat(err));
-                        }
+                        this.renderReplacedJsPdfSvg(container, image);
                         return [3 /*break*/, 12];
                     case 11:
                         e_2 = _c.sent();
@@ -465,9 +483,6 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                     this.context2dCtx.fillStyle = this.convertColor(input_element_container_1.INPUT_COLOR);
                                     this.context2dCtx.fill();
                                     this.context2dCtx.restore();
-                                    if (this.options.fontConfig && this.options.fontConfig.fontFamily) {
-                                        this.jspdfCtx.setFont(this.options.fontConfig.fontFamily);
-                                    }
                                 }
                             }
                             else if (container.type === input_element_container_1.RADIO) {
@@ -523,7 +538,9 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         return [4 /*yield*/, this.context.cache.match(url)];
                     case 14:
                         image = _c.sent();
-                        this.context2dCtx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
+                        iconWidth = image.width;
+                        iconHeight = image.height;
+                        this.context2dCtx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top, iconWidth, iconHeight);
                         return [3 /*break*/, 16];
                     case 15:
                         e_3 = _c.sent();
@@ -543,11 +560,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                             this.context2dCtx.textAlign = 'left';
                         }
                         _c.label = 18;
-                    case 18:
-                        if (this.options.fontConfig && this.options.fontConfig.fontFamily) {
-                            this.jspdfCtx.setFont(this.options.fontConfig.fontFamily);
-                        }
-                        return [2 /*return*/];
+                    case 18: return [2 /*return*/];
                 }
             });
         });
@@ -671,32 +684,36 @@ var CanvasRenderer = /** @class */ (function (_super) {
         this.formatPath(paths.slice(0).reverse());
         this.context2dCtx.closePath();
     };
-    CanvasRenderer.prototype.path = function (paths) {
-        this.context2dCtx.beginPath();
-        this.formatPath(paths);
-        this.context2dCtx.closePath();
+    CanvasRenderer.prototype.path = function (paths, ctx2d) {
+        var contextCtx = ctx2d ? ctx2d : this.context2dCtx;
+        contextCtx.beginPath();
+        this.formatPath(paths, contextCtx);
+        contextCtx.closePath();
     };
-    CanvasRenderer.prototype.formatPath = function (paths) {
-        var _this = this;
+    CanvasRenderer.prototype.formatPath = function (paths, ctx2d) {
+        var contextCtx = ctx2d ? ctx2d : this.context2dCtx;
         paths.forEach(function (point, index) {
             var start = (0, bezier_curve_1.isBezierCurve)(point) ? point.start : point;
             if (index === 0) {
-                _this.context2dCtx.moveTo(start.x, start.y);
+                contextCtx.moveTo(start.x, start.y);
             }
             else {
-                _this.context2dCtx.lineTo(start.x, start.y);
+                contextCtx.lineTo(start.x, start.y);
             }
             if ((0, bezier_curve_1.isBezierCurve)(point)) {
-                _this.context2dCtx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
+                contextCtx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
             }
         });
     };
-    CanvasRenderer.prototype.renderRepeat = function (path, pattern, offsetX, offsetY) {
-        this.path(path);
-        this.ctx.fillStyle = pattern;
-        this.context2dCtx.translate(offsetX, offsetY);
-        this.context2dCtx.fill();
-        this.context2dCtx.translate(-offsetX, -offsetY);
+    CanvasRenderer.prototype.renderRepeat = function (boxs, ctx, path, pattern) {
+        // renderRepeat(boxs: Bounds, ctx: CanvasRenderingContext2D, path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number): void {
+        var contextCtx = ctx;
+        this.path(path, contextCtx);
+        contextCtx.fillStyle = pattern;
+        contextCtx.translate(0, 0);
+        // contextCtx.fill();
+        contextCtx.fillRect(0, 0, boxs.width, boxs.height); // 绘制填充矩形（此时坐标系已偏移）
+        contextCtx.translate(-0, -0);
     };
     CanvasRenderer.prototype.resizeImage = function (image, width, height) {
         var _a;
@@ -712,54 +729,166 @@ var CanvasRenderer = /** @class */ (function (_super) {
         return canvas;
     };
     CanvasRenderer.prototype.renderBackgroundImage = function (container) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function () {
-            var index, _i, _a, backgroundImage, image, url, e_4, _b, path, x, y, width, height, pattern, xPt, yPt, widthPt, heightPt;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var index, _loop_1, this_1, _i, _c, backgroundImage;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         index = container.styles.backgroundImage.length - 1;
-                        _i = 0, _a = container.styles.backgroundImage.slice(0).reverse();
-                        _c.label = 1;
+                        _loop_1 = function (backgroundImage) {
+                            var image, url, _e, path, x, y, width, height, boxs, ownerDocument, canvas, ctx, repeatStr, xPt, yPt, widthPt, heightPt, resizeImg, pattern, pathTs, dataURL, xPt, yPt, widthPt, heightPt, e_4, _f, path, x, y, width, height, _g, lineLength, x0, x1, y0, y1, boxs, canvas, ctx, gradient_2, pattern, pathTs, dataURL, xPt, yPt, widthPt, heightPt, _h, path, left, top_1, width, height, position, x, y, _j, rx, ry, ownerDocument, canvas, ctx, radialGradient_1, pathTs, midX, midY, f, invF, dataURL, xPt, yPt, widthPt, heightPt;
+                            return __generator(this, function (_k) {
+                                switch (_k.label) {
+                                    case 0:
+                                        if (!(backgroundImage.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 5];
+                                        image = void 0;
+                                        url = backgroundImage.url;
+                                        _k.label = 1;
+                                    case 1:
+                                        _k.trys.push([1, 3, , 4]);
+                                        return [4 /*yield*/, this_1.context.cache.match(url)];
+                                    case 2:
+                                        image = _k.sent();
+                                        if (image) {
+                                            _e = (0, background_1.calculateBackgroundRendering)(container, index, [
+                                                image.width,
+                                                image.height,
+                                                image.width / image.height
+                                            ]), path = _e[0], x = _e[1], y = _e[2], width = _e[3], height = _e[4];
+                                            boxs = (0, box_sizing_1.contentBox)(container);
+                                            ownerDocument = (_a = this_1.canvas.ownerDocument) !== null && _a !== void 0 ? _a : document;
+                                            canvas = ownerDocument.createElement('canvas');
+                                            canvas.width = Math.max(1, boxs.width);
+                                            canvas.height = Math.max(1, boxs.height);
+                                            ctx = canvas.getContext('2d');
+                                            ctx.save();
+                                            repeatStr = (0, utils_1.getBackgroundRepeat)(container.styles.backgroundRepeat[0]);
+                                            if (container.styles.backgroundRepeat[0] === 1 /* BACKGROUND_REPEAT.NO_REPEAT */) {
+                                                xPt = this_1.pxToPt(x - this_1.options.x);
+                                                yPt = this_1.pxToPt(y - this_1.options.y);
+                                                widthPt = this_1.pxToPt(width);
+                                                heightPt = this_1.pxToPt(height);
+                                                this_1.addImagePdf(image, 'JPEG', xPt, yPt, widthPt, heightPt);
+                                            }
+                                            else {
+                                                resizeImg = this_1.resizeImage(image, width, height);
+                                                pattern = ctx.createPattern(resizeImg, repeatStr);
+                                                pathTs = (0, path_1.transformPath)(path, -x, -y, 0, 0);
+                                                this_1.renderRepeat(boxs, ctx, pathTs, pattern);
+                                                dataURL = canvas.toDataURL('image/jpeg', 0.8);
+                                                // console.log(dataURL, 'dataURL', image)
+                                                ctx.restore();
+                                                xPt = this_1.pxToPt(boxs.left - this_1.options.x);
+                                                yPt = this_1.pxToPt(boxs.top - this_1.options.y);
+                                                widthPt = this_1.pxToPt(boxs.width);
+                                                heightPt = this_1.pxToPt(boxs.height);
+                                                this_1.addImagePdf(dataURL, 'JPEG', xPt, yPt, widthPt, heightPt);
+                                            }
+                                        }
+                                        return [3 /*break*/, 4];
+                                    case 3:
+                                        e_4 = _k.sent();
+                                        this_1.context.logger.error("Error loading background-image ".concat(url));
+                                        return [3 /*break*/, 4];
+                                    case 4: return [3 /*break*/, 6];
+                                    case 5:
+                                        if ((0, image_1.isLinearGradient)(backgroundImage)) {
+                                            _f = (0, background_1.calculateBackgroundRendering)(container, index, [null, null, null]), path = _f[0], x = _f[1], y = _f[2], width = _f[3], height = _f[4];
+                                            _g = (0, gradient_1.calculateGradientDirection)(backgroundImage.angle, width, height), lineLength = _g[0], x0 = _g[1], x1 = _g[2], y0 = _g[3], y1 = _g[4];
+                                            boxs = (0, box_sizing_1.contentBox)(container);
+                                            canvas = document.createElement('canvas');
+                                            canvas.width = width;
+                                            canvas.height = height;
+                                            ctx = canvas.getContext('2d');
+                                            gradient_2 = ctx.createLinearGradient(x0, y0, x1, y1);
+                                            (0, gradient_1.processColorStops)(backgroundImage.stops, lineLength).forEach(function (colorStop) {
+                                                return gradient_2.addColorStop(colorStop.stop, (0, color_1.asString)(colorStop.color));
+                                            });
+                                            ctx.fillStyle = gradient_2;
+                                            ctx.fillRect(0, 0, width, height);
+                                            if (width > 0 && height > 0) {
+                                                pattern = ctx.createPattern(canvas, 'repeat');
+                                                pathTs = (0, path_1.transformPath)(path, -x, -y, 0, 0);
+                                                this_1.renderRepeat(boxs, ctx, pathTs, pattern);
+                                            }
+                                            dataURL = canvas.toDataURL('image/jpeg', 0.8);
+                                            // console.log(dataURL, 'dataURL', image)
+                                            ctx.restore();
+                                            xPt = this_1.pxToPt(x - this_1.options.x);
+                                            yPt = this_1.pxToPt(y - this_1.options.y);
+                                            widthPt = this_1.pxToPt(width);
+                                            heightPt = this_1.pxToPt(height);
+                                            this_1.addImagePdf(dataURL, 'JPEG', xPt, yPt, widthPt, heightPt);
+                                        }
+                                        else if ((0, image_1.isRadialGradient)(backgroundImage)) {
+                                            _h = (0, background_1.calculateBackgroundRendering)(container, index, [
+                                                null,
+                                                null,
+                                                null
+                                            ]), path = _h[0], left = _h[1], top_1 = _h[2], width = _h[3], height = _h[4];
+                                            position = backgroundImage.position.length === 0 ? [length_percentage_1.FIFTY_PERCENT] : backgroundImage.position;
+                                            x = (0, length_percentage_1.getAbsoluteValue)(position[0], width);
+                                            y = (0, length_percentage_1.getAbsoluteValue)(position[position.length - 1], height);
+                                            _j = (0, gradient_1.calculateRadius)(backgroundImage, x, y, width, height), rx = _j[0], ry = _j[1];
+                                            ownerDocument = (_b = this_1.canvas.ownerDocument) !== null && _b !== void 0 ? _b : document;
+                                            canvas = ownerDocument.createElement('canvas');
+                                            canvas.width = Math.max(1, width);
+                                            canvas.height = Math.max(1, height);
+                                            ctx = canvas.getContext('2d');
+                                            if (rx > 0 && ry > 0) {
+                                                radialGradient_1 = ctx.createRadialGradient(x, y, 0, x, y, rx);
+                                                (0, gradient_1.processColorStops)(backgroundImage.stops, rx * 2).forEach(function (colorStop) {
+                                                    return radialGradient_1.addColorStop(colorStop.stop, (0, color_1.asString)(colorStop.color));
+                                                });
+                                                pathTs = (0, path_1.transformPath)(path, -left, -top_1, 0, 0);
+                                                this_1.path(pathTs, ctx);
+                                                ctx.fillStyle = radialGradient_1;
+                                                if (rx !== ry) {
+                                                    midX = 0 + 0.5 * width;
+                                                    midY = 0 + 0.5 * height;
+                                                    f = ry / rx;
+                                                    invF = 1 / f;
+                                                    ctx.save();
+                                                    ctx.translate(midX, midY);
+                                                    ctx.transform(1, 0, 0, f, 0, 0);
+                                                    ctx.translate(-midX, -midY);
+                                                    ctx.fillRect(0, invF * (0 - midY) + midY, width, height * invF);
+                                                    // ctx.fillRect(left, invF * (top - midY) + midY, width, height * invF);
+                                                    ctx.restore();
+                                                }
+                                                else {
+                                                    ctx.fill();
+                                                }
+                                            }
+                                            dataURL = canvas.toDataURL('image/jpeg', 0.8);
+                                            xPt = this_1.pxToPt(left - this_1.options.x);
+                                            yPt = this_1.pxToPt(top_1 - this_1.options.y);
+                                            widthPt = this_1.pxToPt(width);
+                                            heightPt = this_1.pxToPt(height);
+                                            this_1.addImagePdf(dataURL, 'JPEG', xPt, yPt, widthPt, heightPt);
+                                        }
+                                        _k.label = 6;
+                                    case 6:
+                                        index--;
+                                        return [2 /*return*/];
+                                }
+                            });
+                        };
+                        this_1 = this;
+                        _i = 0, _c = container.styles.backgroundImage.slice(0).reverse();
+                        _d.label = 1;
                     case 1:
-                        if (!(_i < _a.length)) return [3 /*break*/, 8];
-                        backgroundImage = _a[_i];
-                        if (!(backgroundImage.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 6];
-                        image = void 0;
-                        url = backgroundImage.url;
-                        _c.label = 2;
+                        if (!(_i < _c.length)) return [3 /*break*/, 4];
+                        backgroundImage = _c[_i];
+                        return [5 /*yield**/, _loop_1(backgroundImage)];
                     case 2:
-                        _c.trys.push([2, 4, , 5]);
-                        return [4 /*yield*/, this.context.cache.match(url)];
+                        _d.sent();
+                        _d.label = 3;
                     case 3:
-                        image = _c.sent();
-                        return [3 /*break*/, 5];
-                    case 4:
-                        e_4 = _c.sent();
-                        this.context.logger.error("Error loading background-image ".concat(url));
-                        return [3 /*break*/, 5];
-                    case 5:
-                        if (image) {
-                            _b = (0, background_1.calculateBackgroundRendering)(container, index, [
-                                image.width,
-                                image.height,
-                                image.width / image.height
-                            ]), path = _b[0], x = _b[1], y = _b[2], width = _b[3], height = _b[4];
-                            pattern = this.ctx.createPattern(this.resizeImage(image, width, height), 'repeat');
-                            this.renderRepeat(path, pattern, x, y);
-                            xPt = this.pxToPt(x - this.options.x);
-                            yPt = this.pxToPt(y - this.options.y);
-                            widthPt = this.pxToPt(width);
-                            heightPt = this.pxToPt(height);
-                            this.addImagePdf(image, 'JPEG', xPt, yPt, widthPt, heightPt);
-                        }
-                        _c.label = 6;
-                    case 6:
-                        index--;
-                        _c.label = 7;
-                    case 7:
                         _i++;
                         return [3 /*break*/, 1];
-                    case 8: return [2 /*return*/];
+                    case 4: return [2 /*return*/];
                 }
             });
         });
@@ -817,9 +946,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         backgroundPaintingArea = calculateBackgroundCurvedPaintingArea((0, background_1.getBackgroundValueForIndex)(styles.backgroundClip, 0), paint.curves);
                         foreignobjectrendering = paint.container.foreignobjectrendering;
                         if (!(hasBackground || styles.boxShadow.length)) return [3 /*break*/, 2];
-                        if (this.options.fontConfig && this.options.fontConfig.fontFamily) {
-                            this.jspdfCtx.setFont(this.options.fontConfig.fontFamily);
-                        }
+                        // console.log('render getFont', this.jspdfCtx.getFont());
                         if (!foreignobjectrendering) {
                             this.context2dCtx.save();
                             this.path(backgroundPaintingArea);
@@ -833,9 +960,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                     case 1:
                         _a.sent();
                         this.context2dCtx.restore();
-                        if (this.options.fontConfig && this.options.fontConfig.fontFamily) {
-                            this.jspdfCtx.setFont(this.options.fontConfig.fontFamily);
-                        }
+                        this.resetJsPDFFont();
                         _a.label = 2;
                     case 2:
                         side = 0;
@@ -881,7 +1006,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
     };
     CanvasRenderer.prototype.renderDashedDottedBorder = function (color, width, side, curvePoints, style) {
         return __awaiter(this, void 0, void 0, function () {
-            var strokePaths, boxPaths, startX, startY, endX, endY, length, dashLength, spaceLength, useLineDash, multiplier, numberOfDashes, minSpace, maxSpace, path1, path2, x1, y1, x2, y2, path1, path2;
+            var strokePaths, boxPaths, startX, startY, endX, endY, length, dashLength, spaceLength, useLineDash, multiplier, numberOfDashes, minSpace, maxSpace, path1, path2, path1, path2;
             return __generator(this, function (_a) {
                 this.context2dCtx.save();
                 strokePaths = (0, border_1.parsePathForBorderStroke)(curvePoints, side);
@@ -913,7 +1038,6 @@ var CanvasRenderer = /** @class */ (function (_super) {
                     length = Math.abs(startY - endY);
                 }
                 this.context2dCtx.beginPath();
-                this.jspdfCtx.setDrawColor(this.convertColor(color));
                 if (style === 3 /* BORDER_STYLE.DOTTED */) {
                     this.formatPath(strokePaths);
                 }
@@ -946,45 +1070,40 @@ var CanvasRenderer = /** @class */ (function (_super) {
                 }
                 if (useLineDash) {
                     if (style === 3 /* BORDER_STYLE.DOTTED */) {
-                        this.jspdfCtx.setLineDashPattern([0, dashLength + spaceLength], 0);
+                        this.context2dCtx.setLineDash([0, dashLength + spaceLength]);
                     }
                     else {
-                        this.jspdfCtx.setLineDashPattern([dashLength, spaceLength], 0);
+                        this.context2dCtx.setLineDash([dashLength, spaceLength]);
                     }
                 }
                 if (style === 3 /* BORDER_STYLE.DOTTED */) {
-                    this.jspdfCtx.setLineCap('round');
-                    this.jspdfCtx.setLineWidth(width);
+                    this.context2dCtx.lineCap = 'round';
+                    this.context2dCtx.lineWidth = width;
                 }
                 else {
-                    this.jspdfCtx.setLineWidth(width * 2 + 1.1);
+                    this.context2dCtx.lineWidth = width * 2 + 1.1;
                 }
-                this.jspdfCtx.stroke();
-                this.jspdfCtx.setLineDashPattern([], 0);
+                this.context2dCtx.strokeStyle = (0, color_1.asString)(color);
+                this.context2dCtx.stroke();
+                this.context2dCtx.setLineDash([]);
+                // dashed round edge gap
                 if (style === 2 /* BORDER_STYLE.DASHED */) {
                     if ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
                         path1 = boxPaths[3];
                         path2 = boxPaths[0];
-                        x1 = this.pxToPt(path1.end.x);
-                        y1 = this.pxToPt(path1.end.y);
-                        x2 = this.pxToPt(path2.start.x);
-                        y2 = this.pxToPt(path2.start.y);
-                        try {
-                            this.jspdfCtx.line(x1, y1, x2, y2);
-                            this.jspdfCtx.stroke();
-                        }
-                        catch (error) {
-                            console.warn('Failed to draw dashed border:', error);
-                        }
+                        this.context2dCtx.beginPath();
+                        this.formatPath([new vector_1.Vector(path1.end.x, path1.end.y), new vector_1.Vector(path2.start.x, path2.start.y)]);
+                        this.context2dCtx.stroke();
                     }
                     if ((0, bezier_curve_1.isBezierCurve)(boxPaths[1])) {
                         path1 = boxPaths[1];
                         path2 = boxPaths[2];
-                        this.jspdfCtx.lines([[path1.end.x, path1.end.y, path2.start.x, path2.start.y]], path1.end.x, path1.end.y);
-                        this.jspdfCtx.stroke();
+                        this.context2dCtx.beginPath();
+                        this.formatPath([new vector_1.Vector(path1.end.x, path1.end.y), new vector_1.Vector(path2.start.x, path2.start.y)]);
+                        this.context2dCtx.stroke();
                     }
                 }
-                this.jspdfCtx.restoreGraphicsState();
+                this.context2dCtx.restore();
                 return [2 /*return*/];
             });
         });
@@ -1023,22 +1142,32 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         _a.sent();
                         this.applyEffects([]);
                         if (cfg === null || cfg === void 0 ? void 0 : cfg.header) {
-                            headerText = String(cfg.header.content)
-                                .replace('${currentPage}', String(pageNum))
-                                .replace('${totalPages}', String(this.totalPages));
-                            this.jspdfCtx.setFontSize(this.safe(this.pxToPt(cfg.header.contentFontSize), 1));
-                            this.setTextColorFromString(cfg.header.contentColor);
-                            headerPos = this.computeContentPosition(cfg.header.contentPosition, pageW, pageH, cfg.header.height, mt, mb, 'header', cfg.header.padding);
-                            this.textPdf(headerText, headerPos.x, headerPos.y, headerPos.align);
+                            if (typeof cfg.header.content === 'function') {
+                                cfg.header.content(this, String(pageNum));
+                            }
+                            else {
+                                headerText = String(cfg.header.content)
+                                    .replace('${currentPage}', String(pageNum))
+                                    .replace('${totalPages}', String(this.totalPages));
+                                this.jspdfCtx.setFontSize(this.safe(this.pxToPt(cfg.header.contentFontSize), 1));
+                                this.setTextColorFromString(cfg.header.contentColor);
+                                headerPos = this.computeContentPosition(cfg.header.contentPosition, pageW, pageH, cfg.header.height, mt, mb, 'header', cfg.header.padding);
+                                this.textPdf(headerText, headerPos.x, headerPos.y, headerPos.align);
+                            }
                         }
                         if (cfg === null || cfg === void 0 ? void 0 : cfg.footer) {
-                            footerText = String(cfg.footer.content)
-                                .replace('${currentPage}', String(pageNum))
-                                .replace('${totalPages}', String(this.totalPages));
-                            this.jspdfCtx.setFontSize(this.safe(this.pxToPt(cfg.footer.contentFontSize), 1));
-                            this.setTextColorFromString(cfg.footer.contentColor);
-                            footerPos = this.computeContentPosition(cfg.footer.contentPosition, pageW, pageH, cfg.footer.height, mt, mb, 'footer', cfg.footer.padding);
-                            this.textPdf(footerText, footerPos.x, footerPos.y, footerPos.align);
+                            if (typeof cfg.footer.content === 'function') {
+                                cfg.footer.content(this, String(pageNum));
+                            }
+                            else {
+                                footerText = String(cfg.footer.content)
+                                    .replace('${currentPage}', String(pageNum))
+                                    .replace('${totalPages}', String(this.totalPages));
+                                this.jspdfCtx.setFontSize(this.safe(this.pxToPt(cfg.footer.contentFontSize), 1));
+                                this.setTextColorFromString(cfg.footer.contentColor);
+                                footerPos = this.computeContentPosition(cfg.footer.contentPosition, pageW, pageH, cfg.footer.height, mt, mb, 'footer', cfg.footer.padding);
+                                this.textPdf(footerText, footerPos.x, footerPos.y, footerPos.align);
+                            }
                         }
                         return [2 /*return*/];
                 }
@@ -1152,7 +1281,8 @@ var CanvasRenderer = /** @class */ (function (_super) {
         var sy = this.safe(y);
         var sw = Math.max(1, this.safe(w, 1));
         var sh = Math.max(1, this.safe(h, 1));
-        this.jspdfCtx.addImage(img, format, sx, sy, sw, sh);
+        // draw a big image，jsPDF：Error: Invalid image dimensions: width and height must be positive numbers.
+        this.jspdfCtx.addImage(img, format, sx, sy, sw, sh, '', 'FAST');
     };
     CanvasRenderer.prototype.output = function () {
         return __awaiter(this, void 0, void 0, function () {