dompdf.js 1.1.1 → 1.2.0

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

@@ -0,0 +1,1340 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+var input_element_container_1 = require("../../dom/replaced-elements/input-element-container");
+var svg_element_container_1 = require("../../dom/replaced-elements/svg-element-container");
+var background_1 = require("../background");
+var bezier_curve_1 = require("../bezier-curve");
+var border_1 = require("../border");
+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) {
+        var _this = _super.call(this, context, options) || this;
+        _this._activeEffects = [];
+        _this.totalPages = 1;
+        _this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
+        // 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' : 'landscape',
+            unit: 'pt',
+            format: options.pagination && format ? format : [pageHeight, pageWidth],
+            hotfixes: ['px_scaling'],
+            putOnlyUsedFonts: options.putOnlyUsedFonts,
+            compress: options.compress,
+            precision: options.precision,
+            floatPrecision: options.floatPrecision,
+            encryption: options.encryption
+        });
+        _this.context2dCtx = _this.jspdfCtx.context2d;
+        _this.context2dCtx.scale(0.75, 0.75);
+        _this.context2dCtx.translate(-options.x, -options.y);
+        if (options.fontConfig) {
+            try {
+                _this.addFontToJsPDF();
+            }
+            catch (error) {
+                console.warn('Failed to set font:', error);
+                _this.jspdfCtx.setFont('Helvetica');
+            }
+        }
+        if (!options.canvas) {
+            _this.canvas.width = 10;
+            _this.canvas.height = 10;
+            _this.canvas.style.width = "10px";
+            _this.canvas.style.height = "10px";
+        }
+        _this.fontMetrics = new font_metrics_1.FontMetrics(document);
+        _this.context2dCtx.textBaseline = 'bottom';
+        _this._activeEffects = [];
+        _this.context.logger.debug("Canvas renderer initialized (".concat(options.width, "x").concat(options.height, ") with scale ").concat(options.scale));
+        return _this;
+    }
+    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");
+    };
+    // 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);
+            });
+        }
+    };
+    // 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;
+        while (this._activeEffects.length) {
+            this.popEffect();
+        }
+        effects.forEach(function (effect) { return _this.applyEffect(effect); });
+    };
+    CanvasRenderer.prototype.applyEffect = function (effect) {
+        this.context2dCtx.save();
+        if ((0, effects_1.isOpacityEffect)(effect)) {
+            this.context2dCtx.globalAlpha = effect.opacity;
+        }
+        if ((0, effects_1.isTransformEffect)(effect)) {
+            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.context2dCtx.clip();
+        }
+        this._activeEffects.push(effect);
+    };
+    CanvasRenderer.prototype.popEffect = function () {
+        this._activeEffects.pop();
+        this.context2dCtx.restore();
+        this.resetJsPDFFont();
+    };
+    CanvasRenderer.prototype.renderStack = function (stack) {
+        return __awaiter(this, void 0, void 0, function () {
+            var styles;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        styles = stack.element.container.styles;
+                        if (!styles.isVisible()) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.renderStackContent(stack)];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.renderNode = function (paint) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if ((0, bitwise_1.contains)(paint.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
+                            debugger;
+                        }
+                        if (!paint.container.styles.isVisible()) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.renderNodeBackgroundAndBorders(paint)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, this.renderNodeContent(paint)];
+                    case 2:
+                        _a.sent();
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing, baseline) {
+        var _this = this;
+        if (letterSpacing === 0) {
+            this.context2dCtx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
+        }
+        else {
+            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.context2dCtx.measureText(letter);
+                // return left + this.context2dCtx.measureText(letter).width;
+            }, text.bounds.left);
+        }
+    };
+    CanvasRenderer.prototype.createFontStyle = function (styles) {
+        var fontVariant = styles.fontVariant
+            .filter(function (variant) { return variant === 'normal' || variant === 'small-caps'; })
+            .join('');
+        var fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
+        var fontSize = (0, parser_1.isDimensionToken)(styles.fontSize)
+            ? "".concat(styles.fontSize.number).concat(styles.fontSize.unit)
+            : "".concat(styles.fontSize.number, "px");
+        return [
+            [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '),
+            fontFamily,
+            fontSize
+        ];
+    };
+    CanvasRenderer.prototype.convertColor = function (color) {
+        if ((0, color_1.isTransparent)(color)) {
+            return '#FFFFFF';
+        }
+        var r = 0xff & (color >> 24);
+        var g = 0xff & (color >> 16);
+        var b = 0xff & (color >> 8);
+        return "#".concat(r.toString(16).padStart(2, '0')).concat(g.toString(16).padStart(2, '0')).concat(b
+            .toString(16)
+            .padStart(2, '0'));
+        // return asString(color);
+    };
+    CanvasRenderer.prototype.renderTextNode = function (text, styles) {
+        return __awaiter(this, void 0, void 0, function () {
+            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];
+                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);
+                _b = this.fontMetrics.getMetrics(fontFamily, fontSize), baseline = _b.baseline, middle = _b.middle;
+                paintOrder = styles.paintOrder;
+                text.textBounds.forEach(function (textItem) {
+                    paintOrder.forEach(function (paintOrderLayer) {
+                        switch (paintOrderLayer) {
+                            case 0 /* PAINT_ORDER_LAYER.FILL */:
+                                _this.context2dCtx.fillStyle = (0, color_1.asString)(styles.color);
+                                _this.renderTextWithLetterSpacing(textItem, styles.letterSpacing, baseline);
+                                if (styles.textDecorationLine.length) {
+                                    _this.context2dCtx.fillStyle = (0, color_1.asString)(styles.textDecorationColor || styles.color);
+                                    styles.textDecorationLine.forEach(function (textDecorationLine) {
+                                        var x = textItem.bounds.left;
+                                        var width = textItem.bounds.width;
+                                        var y_underline = Math.round(textItem.bounds.top + baseline);
+                                        var y_overline = Math.round(textItem.bounds.top);
+                                        var y_line_through = Math.ceil(textItem.bounds.top + middle);
+                                        var thickness = 1;
+                                        switch (textDecorationLine) {
+                                            case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
+                                                _this.context2dCtx.fillRect(x, y_underline, width, thickness);
+                                                break;
+                                            case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
+                                                _this.context2dCtx.fillRect(x, y_overline, width, thickness);
+                                                break;
+                                            case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
+                                                _this.context2dCtx.fillRect(x, y_line_through, width, thickness);
+                                                break;
+                                        }
+                                    });
+                                }
+                                break;
+                            case 1 /* PAINT_ORDER_LAYER.STROKE */:
+                                if (styles.webkitTextStrokeWidth && textItem.text.trim().length) {
+                                    _this.context2dCtx.strokeStyle = (0, color_1.asString)(styles.webkitTextStrokeColor);
+                                    _this.context2dCtx.lineWidth = styles.webkitTextStrokeWidth;
+                                    _this.context2dCtx.strokeText(textItem.text, textItem.bounds.left, textItem.bounds.top + baseline);
+                                }
+                                _this.context2dCtx.strokeStyle = '';
+                                _this.context2dCtx.lineWidth = 0;
+                                _this.context2dCtx.lineJoin = 'miter';
+                                break;
+                        }
+                    });
+                });
+                return [2 /*return*/];
+            });
+        });
+    };
+    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, 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;
+                        styles = container.styles;
+                        this.resetJsPDFFont();
+                        _i = 0, _a = container.textNodes;
+                        _c.label = 1;
+                    case 1:
+                        if (!(_i < _a.length)) return [3 /*break*/, 4];
+                        child = _a[_i];
+                        return [4 /*yield*/, this.renderTextNode(child, styles)];
+                    case 2:
+                        _c.sent();
+                        _c.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        if (!(container instanceof image_element_container_1.ImageElementContainer)) return [3 /*break*/, 8];
+                        _c.label = 5;
+                    case 5:
+                        _c.trys.push([5, 7, , 8]);
+                        return [4 /*yield*/, this.context.cache.match(container.src)];
+                    case 6:
+                        image = _c.sent();
+                        this.renderReplacedJsPdfImage(container, image);
+                        return [3 /*break*/, 8];
+                    case 7:
+                        e_1 = _c.sent();
+                        this.context.logger.error("Error loading image ".concat(container));
+                        return [3 /*break*/, 8];
+                    case 8:
+                        if (container instanceof canvas_element_container_1.CanvasElementContainer) {
+                            try {
+                                this.renderReplacedJsPdfCanvasImage(container);
+                            }
+                            catch (err) {
+                                this.context.logger.error("Error adding canvas to PDF: ".concat(err));
+                            }
+                        }
+                        if (!(container instanceof svg_element_container_1.SVGElementContainer)) return [3 /*break*/, 12];
+                        _c.label = 9;
+                    case 9:
+                        _c.trys.push([9, 11, , 12]);
+                        return [4 /*yield*/, this.context.cache.match(container.svg)];
+                    case 10:
+                        image = _c.sent();
+                        this.renderReplacedJsPdfSvg(container, image);
+                        return [3 /*break*/, 12];
+                    case 11:
+                        e_2 = _c.sent();
+                        this.context.logger.error("Error loading svg ".concat(e_2));
+                        return [3 /*break*/, 12];
+                    case 12:
+                        if (container instanceof iframe_element_container_1.IFrameElementContainer && container.tree) {
+                        }
+                        if (container instanceof input_element_container_1.InputElementContainer) {
+                            size = Math.min(container.bounds.width, container.bounds.height);
+                            if (container.type === input_element_container_1.CHECKBOX) {
+                                if (container.checked) {
+                                    this.context2dCtx.save();
+                                    this.path([
+                                        new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
+                                        new vector_1.Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549),
+                                        new vector_1.Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071),
+                                        new vector_1.Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649),
+                                        new vector_1.Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23),
+                                        new vector_1.Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
+                                        new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
+                                    ]);
+                                    this.context2dCtx.fillStyle = this.convertColor(input_element_container_1.INPUT_COLOR);
+                                    this.context2dCtx.fill();
+                                    this.context2dCtx.restore();
+                                }
+                            }
+                            else if (container.type === input_element_container_1.RADIO) {
+                                if (container.checked) {
+                                    this.context2dCtx.save();
+                                    this.context2dCtx.beginPath();
+                                    this.context2dCtx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
+                                    this.context2dCtx.fillStyle = this.convertColor(input_element_container_1.INPUT_COLOR);
+                                    this.context2dCtx.fill();
+                                    this.context2dCtx.restore();
+                                }
+                            }
+                        }
+                        if (isTextInputElement(container) && container.value.length) {
+                            _b = this.createFontStyle(styles), fontFamily = _b[0], fontSize = _b[1];
+                            baseline = this.fontMetrics.getMetrics(fontFamily, fontSize).baseline;
+                            this.context2dCtx.fillStyle = this.convertColor(styles.color);
+                            this.context2dCtx.textBaseline = 'alphabetic';
+                            this.context2dCtx.textAlign = canvasTextAlign(container.styles.textAlign);
+                            bounds = (0, box_sizing_1.contentBox)(container);
+                            x = 0;
+                            switch (container.styles.textAlign) {
+                                case 1 /* TEXT_ALIGN.CENTER */:
+                                    x += bounds.width / 2;
+                                    break;
+                                case 2 /* TEXT_ALIGN.RIGHT */:
+                                    x += bounds.width;
+                                    break;
+                            }
+                            textBounds = bounds.add(x, 0, 0, -bounds.height / 2 + 1);
+                            this.context2dCtx.save();
+                            this.path([
+                                new vector_1.Vector(bounds.left, bounds.top),
+                                new vector_1.Vector(bounds.left + bounds.width, bounds.top),
+                                new vector_1.Vector(bounds.left + bounds.width, bounds.top + bounds.height),
+                                new vector_1.Vector(bounds.left, bounds.top + bounds.height)
+                            ]);
+                            this.context2dCtx.clip();
+                            this.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing, baseline);
+                            this.context2dCtx.restore();
+                            this.context2dCtx.textBaseline = 'alphabetic';
+                            this.context2dCtx.textAlign = 'left';
+                        }
+                        if (!(0, bitwise_1.contains)(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) return [3 /*break*/, 18];
+                        if (!(container.styles.listStyleImage !== null)) return [3 /*break*/, 17];
+                        img = container.styles.listStyleImage;
+                        if (!(img.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 16];
+                        image = void 0;
+                        url = img.url;
+                        _c.label = 13;
+                    case 13:
+                        _c.trys.push([13, 15, , 16]);
+                        return [4 /*yield*/, this.context.cache.match(url)];
+                    case 14:
+                        image = _c.sent();
+                        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();
+                        this.context.logger.error("Error loading list-style-image ".concat(url));
+                        return [3 /*break*/, 16];
+                    case 16: return [3 /*break*/, 18];
+                    case 17:
+                        if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
+                            fontFamily = this.createFontStyle(styles)[0];
+                            this.context2dCtx.font = fontFamily;
+                            this.context2dCtx.fillStyle = this.convertColor(styles.color);
+                            this.context2dCtx.textBaseline = 'middle';
+                            this.context2dCtx.textAlign = 'right';
+                            bounds = new bounds_1.Bounds(container.bounds.left, container.bounds.top + (0, length_percentage_1.getAbsoluteValue)(container.styles.paddingTop, container.bounds.width), container.bounds.width, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 1);
+                            this.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 2);
+                            this.context2dCtx.textBaseline = 'bottom';
+                            this.context2dCtx.textAlign = 'left';
+                        }
+                        _c.label = 18;
+                    case 18: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.renderStackContent = function (stack) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _i, _a, child, _b, _c, child, _d, _e, child, _f, _g, child, _h, _j, child, _k, _l, child, _m, _o, child;
+            return __generator(this, function (_p) {
+                switch (_p.label) {
+                    case 0:
+                        if ((0, bitwise_1.contains)(stack.element.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
+                            debugger;
+                        }
+                        return [4 /*yield*/, this.renderNodeBackgroundAndBorders(stack.element)];
+                    case 1:
+                        _p.sent();
+                        _i = 0, _a = stack.negativeZIndex;
+                        _p.label = 2;
+                    case 2:
+                        if (!(_i < _a.length)) return [3 /*break*/, 5];
+                        child = _a[_i];
+                        return [4 /*yield*/, this.renderStack(child)];
+                    case 3:
+                        _p.sent();
+                        _p.label = 4;
+                    case 4:
+                        _i++;
+                        return [3 /*break*/, 2];
+                    case 5: return [4 /*yield*/, this.renderNodeContent(stack.element)];
+                    case 6:
+                        _p.sent();
+                        _b = 0, _c = stack.nonInlineLevel;
+                        _p.label = 7;
+                    case 7:
+                        if (!(_b < _c.length)) return [3 /*break*/, 10];
+                        child = _c[_b];
+                        return [4 /*yield*/, this.renderNode(child)];
+                    case 8:
+                        _p.sent();
+                        _p.label = 9;
+                    case 9:
+                        _b++;
+                        return [3 /*break*/, 7];
+                    case 10:
+                        _d = 0, _e = stack.nonPositionedFloats;
+                        _p.label = 11;
+                    case 11:
+                        if (!(_d < _e.length)) return [3 /*break*/, 14];
+                        child = _e[_d];
+                        return [4 /*yield*/, this.renderStack(child)];
+                    case 12:
+                        _p.sent();
+                        _p.label = 13;
+                    case 13:
+                        _d++;
+                        return [3 /*break*/, 11];
+                    case 14:
+                        _f = 0, _g = stack.nonPositionedInlineLevel;
+                        _p.label = 15;
+                    case 15:
+                        if (!(_f < _g.length)) return [3 /*break*/, 18];
+                        child = _g[_f];
+                        return [4 /*yield*/, this.renderStack(child)];
+                    case 16:
+                        _p.sent();
+                        _p.label = 17;
+                    case 17:
+                        _f++;
+                        return [3 /*break*/, 15];
+                    case 18:
+                        _h = 0, _j = stack.inlineLevel;
+                        _p.label = 19;
+                    case 19:
+                        if (!(_h < _j.length)) return [3 /*break*/, 22];
+                        child = _j[_h];
+                        return [4 /*yield*/, this.renderNode(child)];
+                    case 20:
+                        _p.sent();
+                        _p.label = 21;
+                    case 21:
+                        _h++;
+                        return [3 /*break*/, 19];
+                    case 22:
+                        _k = 0, _l = stack.zeroOrAutoZIndexOrTransformedOrOpacity;
+                        _p.label = 23;
+                    case 23:
+                        if (!(_k < _l.length)) return [3 /*break*/, 26];
+                        child = _l[_k];
+                        return [4 /*yield*/, this.renderStack(child)];
+                    case 24:
+                        _p.sent();
+                        _p.label = 25;
+                    case 25:
+                        _k++;
+                        return [3 /*break*/, 23];
+                    case 26:
+                        _m = 0, _o = stack.positiveZIndex;
+                        _p.label = 27;
+                    case 27:
+                        if (!(_m < _o.length)) return [3 /*break*/, 30];
+                        child = _o[_m];
+                        return [4 /*yield*/, this.renderStack(child)];
+                    case 28:
+                        _p.sent();
+                        _p.label = 29;
+                    case 29:
+                        _m++;
+                        return [3 /*break*/, 27];
+                    case 30: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.mask = function (paths) {
+        this.context2dCtx.beginPath();
+        this.context2dCtx.moveTo(0, 0);
+        this.context2dCtx.lineTo(this.options.width, 0);
+        this.context2dCtx.lineTo(this.options.width, this.options.height);
+        this.context2dCtx.lineTo(0, this.options.height);
+        this.context2dCtx.lineTo(0, 0);
+        this.formatPath(paths.slice(0).reverse());
+        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, 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) {
+                contextCtx.moveTo(start.x, start.y);
+            }
+            else {
+                contextCtx.lineTo(start.x, start.y);
+            }
+            if ((0, bezier_curve_1.isBezierCurve)(point)) {
+                contextCtx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
+            }
+        });
+    };
+    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;
+        if (image.width === width && image.height === height) {
+            return image;
+        }
+        var ownerDocument = (_a = this.canvas.ownerDocument) !== null && _a !== void 0 ? _a : document;
+        var canvas = ownerDocument.createElement('canvas');
+        canvas.width = Math.max(1, width);
+        canvas.height = Math.max(1, height);
+        var ctx = canvas.getContext('2d');
+        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
+        return canvas;
+    };
+    CanvasRenderer.prototype.renderBackgroundImage = function (container) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            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;
+                        _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 < _c.length)) return [3 /*break*/, 4];
+                        backgroundImage = _c[_i];
+                        return [5 /*yield**/, _loop_1(backgroundImage)];
+                    case 2:
+                        _d.sent();
+                        _d.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.renderSolidBorder = function (color, side, curvePoints) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.path((0, border_1.parsePathForBorder)(curvePoints, side));
+                this.context2dCtx.fillStyle = this.convertColor(color);
+                this.jspdfCtx.fill();
+                this.context2dCtx.fill();
+                return [2 /*return*/];
+            });
+        });
+    };
+    CanvasRenderer.prototype.renderDoubleBorder = function (color, width, side, curvePoints) {
+        return __awaiter(this, void 0, void 0, function () {
+            var outerPaths, innerPaths;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(width < 3)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.renderSolidBorder(color, side, curvePoints)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                    case 2:
+                        outerPaths = (0, border_1.parsePathForBorderDoubleOuter)(curvePoints, side);
+                        this.path(outerPaths);
+                        this.context2dCtx.fillStyle = this.convertColor(color);
+                        this.context2dCtx.fill();
+                        innerPaths = (0, border_1.parsePathForBorderDoubleInner)(curvePoints, side);
+                        this.path(innerPaths);
+                        this.context2dCtx.fill();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.renderNodeBackgroundAndBorders = function (paint) {
+        return __awaiter(this, void 0, void 0, function () {
+            var styles, hasBackground, borders, backgroundPaintingArea, foreignobjectrendering, side, _i, borders_1, border;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
+                        styles = paint.container.styles;
+                        hasBackground = !(0, color_1.isTransparent)(styles.backgroundColor) || styles.backgroundImage.length;
+                        borders = [
+                            { style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth },
+                            { style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth },
+                            { style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth },
+                            { style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth }
+                        ];
+                        backgroundPaintingArea = calculateBackgroundCurvedPaintingArea((0, background_1.getBackgroundValueForIndex)(styles.backgroundClip, 0), paint.curves);
+                        foreignobjectrendering = paint.container.foreignobjectrendering;
+                        if (!(hasBackground || styles.boxShadow.length)) return [3 /*break*/, 2];
+                        // console.log('render getFont', this.jspdfCtx.getFont());
+                        if (!foreignobjectrendering) {
+                            this.context2dCtx.save();
+                            this.path(backgroundPaintingArea);
+                            this.context2dCtx.clip();
+                            if (!(0, color_1.isTransparent)(styles.backgroundColor)) {
+                                this.context2dCtx.fillStyle = this.convertColor(styles.backgroundColor);
+                                this.context2dCtx.fill();
+                            }
+                        }
+                        return [4 /*yield*/, this.renderBackgroundImage(paint.container)];
+                    case 1:
+                        _a.sent();
+                        this.context2dCtx.restore();
+                        this.resetJsPDFFont();
+                        _a.label = 2;
+                    case 2:
+                        side = 0;
+                        _i = 0, borders_1 = borders;
+                        _a.label = 3;
+                    case 3:
+                        if (!(_i < borders_1.length)) return [3 /*break*/, 13];
+                        border = borders_1[_i];
+                        if (!(border.style !== 0 /* BORDER_STYLE.NONE */ && !(0, color_1.isTransparent)(border.color) && border.width > 0)) return [3 /*break*/, 11];
+                        if (!(border.style === 2 /* BORDER_STYLE.DASHED */)) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */)];
+                    case 4:
+                        _a.sent();
+                        return [3 /*break*/, 11];
+                    case 5:
+                        if (!(border.style === 3 /* BORDER_STYLE.DOTTED */)) return [3 /*break*/, 7];
+                        return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */)];
+                    case 6:
+                        _a.sent();
+                        return [3 /*break*/, 11];
+                    case 7:
+                        if (!(border.style === 4 /* BORDER_STYLE.DOUBLE */)) return [3 /*break*/, 9];
+                        return [4 /*yield*/, this.renderDoubleBorder(border.color, border.width, side, paint.curves)];
+                    case 8:
+                        _a.sent();
+                        return [3 /*break*/, 11];
+                    case 9:
+                        if (!!foreignobjectrendering) return [3 /*break*/, 11];
+                        return [4 /*yield*/, this.renderSolidBorder(border.color, side, paint.curves)];
+                    case 10:
+                        _a.sent();
+                        _a.label = 11;
+                    case 11:
+                        side++;
+                        _a.label = 12;
+                    case 12:
+                        _i++;
+                        return [3 /*break*/, 3];
+                    case 13: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    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, path1, path2;
+            return __generator(this, function (_a) {
+                this.context2dCtx.save();
+                strokePaths = (0, border_1.parsePathForBorderStroke)(curvePoints, side);
+                boxPaths = (0, border_1.parsePathForBorder)(curvePoints, side);
+                if (style === 2 /* BORDER_STYLE.DASHED */) {
+                    this.path(boxPaths);
+                    this.context2dCtx.clip();
+                }
+                if ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
+                    startX = boxPaths[0].start.x;
+                    startY = boxPaths[0].start.y;
+                }
+                else {
+                    startX = boxPaths[0].x;
+                    startY = boxPaths[0].y;
+                }
+                if ((0, bezier_curve_1.isBezierCurve)(boxPaths[1])) {
+                    endX = boxPaths[1].end.x;
+                    endY = boxPaths[1].end.y;
+                }
+                else {
+                    endX = boxPaths[1].x;
+                    endY = boxPaths[1].y;
+                }
+                if (side === 0 || side === 2) {
+                    length = Math.abs(startX - endX);
+                }
+                else {
+                    length = Math.abs(startY - endY);
+                }
+                this.context2dCtx.beginPath();
+                if (style === 3 /* BORDER_STYLE.DOTTED */) {
+                    this.formatPath(strokePaths);
+                }
+                else {
+                    this.formatPath(boxPaths.slice(0, 2));
+                }
+                dashLength = width < 3 ? width * 3 : width * 2;
+                spaceLength = width < 3 ? width * 2 : width;
+                if (style === 3 /* BORDER_STYLE.DOTTED */) {
+                    dashLength = width;
+                    spaceLength = width;
+                }
+                useLineDash = true;
+                if (length <= dashLength * 2) {
+                    useLineDash = false;
+                }
+                else if (length <= dashLength * 2 + spaceLength) {
+                    multiplier = length / (2 * dashLength + spaceLength);
+                    dashLength *= multiplier;
+                    spaceLength *= multiplier;
+                }
+                else {
+                    numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
+                    minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
+                    maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
+                    spaceLength =
+                        maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
+                            ? minSpace
+                            : maxSpace;
+                }
+                if (useLineDash) {
+                    if (style === 3 /* BORDER_STYLE.DOTTED */) {
+                        this.context2dCtx.setLineDash([0, dashLength + spaceLength]);
+                    }
+                    else {
+                        this.context2dCtx.setLineDash([dashLength, spaceLength]);
+                    }
+                }
+                if (style === 3 /* BORDER_STYLE.DOTTED */) {
+                    this.context2dCtx.lineCap = 'round';
+                    this.context2dCtx.lineWidth = width;
+                }
+                else {
+                    this.context2dCtx.lineWidth = width * 2 + 1.1;
+                }
+                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];
+                        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.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.context2dCtx.restore();
+                return [2 /*return*/];
+            });
+        });
+    };
+    CanvasRenderer.prototype.addPage = function (offsetY) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.context2dCtx.translate(0, -offsetY);
+                this.jspdfCtx.addPage();
+                return [2 /*return*/];
+            });
+        });
+    };
+    CanvasRenderer.prototype.renderPage = function (element, pageNum) {
+        return __awaiter(this, void 0, void 0, function () {
+            var cfg, pageW, pageH, mt, mb, bx, by, bw, bh, stack, headerText, headerPos, footerText, footerPos;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        cfg = this.options.pageConfig;
+                        pageW = this.jspdfCtx.internal.pageSize.getWidth();
+                        pageH = this.jspdfCtx.internal.pageSize.getHeight();
+                        mt = 0;
+                        mb = 0;
+                        if (this.options.backgroundColor) {
+                            this.jspdfCtx.setFillColor(this.convertColor(this.options.backgroundColor));
+                            bx = this.safe(this.options.x);
+                            by = this.safe(this.options.y);
+                            bw = Math.max(1, this.safe(this.options.width, 1));
+                            bh = Math.max(1, this.safe(this.options.height, 1));
+                            this.jspdfCtx.rect(bx, by, bw, bh, 'F');
+                        }
+                        stack = (0, stacking_context_1.parseStackingContexts)(element);
+                        return [4 /*yield*/, this.renderStack(stack)];
+                    case 1:
+                        _a.sent();
+                        this.applyEffects([]);
+                        if (cfg === null || cfg === void 0 ? void 0 : cfg.header) {
+                            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) {
+                            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*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.setTotalPages = function (total) {
+        this.totalPages = total;
+    };
+    CanvasRenderer.prototype.setTextColorFromString = function (color) {
+        var _a;
+        var named = {
+            black: [0, 0, 0],
+            white: [255, 255, 255],
+            red: [255, 0, 0],
+            green: [0, 128, 0],
+            blue: [0, 0, 255],
+            gray: [128, 128, 128]
+        };
+        var r = 0, g = 0, b = 0;
+        var c = (color === null || color === void 0 ? void 0 : color.toLowerCase()) || 'black';
+        if (c in named) {
+            _a = named[c], r = _a[0], g = _a[1], b = _a[2];
+        }
+        else if (c.startsWith('#') && (c.length === 7 || c.length === 4)) {
+            var hex = c.length === 4 ? "#".concat(c[1]).concat(c[1]).concat(c[2]).concat(c[2]).concat(c[3]).concat(c[3]) : c;
+            r = parseInt(hex.slice(1, 3), 16);
+            g = parseInt(hex.slice(3, 5), 16);
+            b = parseInt(hex.slice(5, 7), 16);
+        }
+        this.jspdfCtx.setTextColor(r, g, b);
+    };
+    CanvasRenderer.prototype.safe = function (n, min) {
+        if (min === void 0) { min = 0; }
+        var v = Number(n);
+        return Number.isFinite(v) ? v : min;
+    };
+    CanvasRenderer.prototype.textPdf = function (text, x, y, align) {
+        var sx = this.safe(x);
+        var sy = this.safe(y);
+        this.jspdfCtx.text(String(text), sx, sy, { align: align });
+    };
+    CanvasRenderer.prototype.computeContentPosition = function (pos, pageW, pageH, areaH, mt, mb, area, paddingPx) {
+        var _this = this;
+        var _a = (paddingPx !== null && paddingPx !== void 0 ? paddingPx : [24, 24, 24, 24]).map(function (v) { return _this.pxToPt(v); }), pt = _a[0], pr = _a[1], pb = _a[2], pl = _a[3];
+        var areaHPt = this.pxToPt(areaH);
+        var mtPt = this.pxToPt(mt);
+        var mbPt = this.pxToPt(mb);
+        if (Array.isArray(pos) && pos.length >= 2) {
+            return { x: this.pxToPt(pos[0]), y: this.pxToPt(pos[1]), align: 'left' };
+        }
+        if (area === 'header') {
+            switch (pos) {
+                case 'center':
+                    return {
+                        x: pageW / 2,
+                        y: mtPt + pt + (areaHPt - pt - pb) / 2,
+                        align: 'center'
+                    };
+                case 'centerLeft':
+                    return { x: pl, y: mtPt + pt + (areaHPt - pt - pb) / 2, align: 'left' };
+                case 'centerRight':
+                    return { x: pageW - pr, y: mtPt + pt + (areaHPt - pt - pb) / 2, align: 'right' };
+                case 'centerTop':
+                    return { x: pageW / 2, y: mtPt + pt, align: 'center' };
+                case 'centerBottom':
+                    return { x: pageW / 2, y: mtPt + areaHPt - pb, align: 'center' };
+                case 'leftTop':
+                    return { x: pl, y: mtPt + pt, align: 'left' };
+                case 'leftBottom':
+                    return { x: pl, y: mtPt + areaHPt - pb, align: 'left' };
+                case 'rightTop':
+                    return { x: pageW - pr, y: mtPt + pt, align: 'right' };
+                case 'rightBottom':
+                    return { x: pageW - pr, y: mtPt + areaHPt - pb, align: 'right' };
+                default:
+                    return { x: pl, y: mtPt + pt, align: 'left' };
+            }
+        }
+        else {
+            switch (pos) {
+                case 'center':
+                    return {
+                        x: pageW / 2,
+                        y: pageH - mbPt - areaHPt + pt + (areaHPt - pt - pb) / 2,
+                        align: 'center'
+                    };
+                case 'centerLeft':
+                    return { x: pl, y: pageH - mbPt - areaHPt + pt + (areaHPt - pt - pb) / 2, align: 'left' };
+                case 'centerRight':
+                    return { x: pageW - pr, y: pageH - mbPt - areaHPt + pt + (areaHPt - pt - pb) / 2, align: 'right' };
+                case 'centerTop':
+                    return { x: pageW / 2, y: pageH - mbPt - areaHPt + pt, align: 'center' };
+                case 'centerBottom':
+                    return { x: pageW / 2, y: pageH - mbPt - pb, align: 'center' };
+                case 'leftTop':
+                    return { x: pl, y: pageH - mbPt - areaHPt + pt, align: 'left' };
+                case 'leftBottom':
+                    return { x: pl, y: pageH - mbPt - pb, align: 'left' };
+                case 'rightTop':
+                    return { x: pageW - pr, y: pageH - mbPt - areaHPt + pt, align: 'right' };
+                case 'rightBottom':
+                    return { x: pageW - pr, y: pageH - mbPt - pb, align: 'right' };
+                default:
+                    return { x: pl, y: pageH - mbPt - pb, align: 'left' };
+            }
+        }
+    };
+    CanvasRenderer.prototype.addImagePdf = function (img, format, x, y, w, h) {
+        var sx = this.safe(x);
+        var sy = this.safe(y);
+        var sw = Math.max(1, this.safe(w, 1));
+        var sh = Math.max(1, this.safe(h, 1));
+        // 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 () {
+            var pdfBlob;
+            return __generator(this, function (_a) {
+                pdfBlob = this.jspdfCtx.output('blob');
+                return [2 /*return*/, pdfBlob];
+            });
+        });
+    };
+    return CanvasRenderer;
+}(renderer_1.Renderer));
+exports.CanvasRenderer = CanvasRenderer;
+var isTextInputElement = function (container) {
+    if (container instanceof textarea_element_container_1.TextareaElementContainer) {
+        return true;
+    }
+    else if (container instanceof select_element_container_1.SelectElementContainer) {
+        return true;
+    }
+    else if (container instanceof input_element_container_1.InputElementContainer && container.type !== input_element_container_1.RADIO && container.type !== input_element_container_1.CHECKBOX) {
+        return true;
+    }
+    return false;
+};
+var calculateBackgroundCurvedPaintingArea = function (clip, curves) {
+    switch (clip) {
+        case 0 /* BACKGROUND_CLIP.BORDER_BOX */:
+            return (0, bound_curves_1.calculateBorderBoxPath)(curves);
+        case 2 /* BACKGROUND_CLIP.CONTENT_BOX */:
+            return (0, bound_curves_1.calculateContentBoxPath)(curves);
+        case 1 /* BACKGROUND_CLIP.PADDING_BOX */:
+        default:
+            return (0, bound_curves_1.calculatePaddingBoxPath)(curves);
+    }
+};
+var canvasTextAlign = function (textAlign) {
+    switch (textAlign) {
+        case 1 /* TEXT_ALIGN.CENTER */:
+            return 'center';
+        case 2 /* TEXT_ALIGN.RIGHT */:
+            return 'right';
+        case 0 /* TEXT_ALIGN.LEFT */:
+        default:
+            return 'left';
+    }
+};
+// see https://github.com/niklasvh/html2canvas/pull/2645
+var iOSBrokenFonts = ['-apple-system', 'system-ui'];
+var fixIOSSystemFonts = function (fontFamilies) {
+    return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent)
+        ? fontFamilies.filter(function (fontFamily) { return iOSBrokenFonts.indexOf(fontFamily) === -1; })
+        : fontFamilies;
+};
+//# sourceMappingURL=pdf-renderer.js.map