source: imaps-frontend/node_modules/html2canvas/dist/lib/render/canvas/canvas-renderer.js

main
Last change on this file was 79a0317, checked in by stefan toskovski <stefantoska84@…>, 3 days ago

F4 Finalna Verzija
  • Property mode set to 100644
File size: 56.4 KB
Line 
1"use strict";
2var __extends = (this && this.__extends) || (function () {
3 var extendStatics = function (d, b) {
4 extendStatics = Object.setPrototypeOf ||
5 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6 function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
7 return extendStatics(d, b);
8 };
9 return function (d, b) {
10 if (typeof b !== "function" && b !== null)
11 throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
12 extendStatics(d, b);
13 function __() { this.constructor = d; }
14 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
15 };
16})();
17var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
18 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
19 return new (P || (P = Promise))(function (resolve, reject) {
20 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
21 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
22 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
23 step((generator = generator.apply(thisArg, _arguments || [])).next());
24 });
25};
26var __generator = (this && this.__generator) || function (thisArg, body) {
27 var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
28 return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
29 function verb(n) { return function (v) { return step([n, v]); }; }
30 function step(op) {
31 if (f) throw new TypeError("Generator is already executing.");
32 while (_) try {
33 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;
34 if (y = 0, t) op = [op[0] & 2, t.value];
35 switch (op[0]) {
36 case 0: case 1: t = op; break;
37 case 4: _.label++; return { value: op[1], done: false };
38 case 5: _.label++; y = op[1]; op = [0]; continue;
39 case 7: op = _.ops.pop(); _.trys.pop(); continue;
40 default:
41 if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
42 if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
43 if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
44 if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
45 if (t[2]) _.ops.pop();
46 _.trys.pop(); continue;
47 }
48 op = body.call(thisArg, _);
49 } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
50 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
51 }
52};
53Object.defineProperty(exports, "__esModule", { value: true });
54exports.CanvasRenderer = void 0;
55var stacking_context_1 = require("../stacking-context");
56var color_1 = require("../../css/types/color");
57var path_1 = require("../path");
58var bound_curves_1 = require("../bound-curves");
59var bezier_curve_1 = require("../bezier-curve");
60var vector_1 = require("../vector");
61var image_1 = require("../../css/types/image");
62var border_1 = require("../border");
63var background_1 = require("../background");
64var parser_1 = require("../../css/syntax/parser");
65var text_1 = require("../../css/layout/text");
66var image_element_container_1 = require("../../dom/replaced-elements/image-element-container");
67var box_sizing_1 = require("../box-sizing");
68var canvas_element_container_1 = require("../../dom/replaced-elements/canvas-element-container");
69var svg_element_container_1 = require("../../dom/replaced-elements/svg-element-container");
70var effects_1 = require("../effects");
71var bitwise_1 = require("../../core/bitwise");
72var gradient_1 = require("../../css/types/functions/gradient");
73var length_percentage_1 = require("../../css/types/length-percentage");
74var font_metrics_1 = require("../font-metrics");
75var bounds_1 = require("../../css/layout/bounds");
76var line_height_1 = require("../../css/property-descriptors/line-height");
77var input_element_container_1 = require("../../dom/replaced-elements/input-element-container");
78var textarea_element_container_1 = require("../../dom/elements/textarea-element-container");
79var select_element_container_1 = require("../../dom/elements/select-element-container");
80var iframe_element_container_1 = require("../../dom/replaced-elements/iframe-element-container");
81var renderer_1 = require("../renderer");
82var MASK_OFFSET = 10000;
83var CanvasRenderer = /** @class */ (function (_super) {
84 __extends(CanvasRenderer, _super);
85 function CanvasRenderer(context, options) {
86 var _this = _super.call(this, context, options) || this;
87 _this._activeEffects = [];
88 _this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
89 _this.ctx = _this.canvas.getContext('2d');
90 if (!options.canvas) {
91 _this.canvas.width = Math.floor(options.width * options.scale);
92 _this.canvas.height = Math.floor(options.height * options.scale);
93 _this.canvas.style.width = options.width + "px";
94 _this.canvas.style.height = options.height + "px";
95 }
96 _this.fontMetrics = new font_metrics_1.FontMetrics(document);
97 _this.ctx.scale(_this.options.scale, _this.options.scale);
98 _this.ctx.translate(-options.x, -options.y);
99 _this.ctx.textBaseline = 'bottom';
100 _this._activeEffects = [];
101 _this.context.logger.debug("Canvas renderer initialized (" + options.width + "x" + options.height + ") with scale " + options.scale);
102 return _this;
103 }
104 CanvasRenderer.prototype.applyEffects = function (effects) {
105 var _this = this;
106 while (this._activeEffects.length) {
107 this.popEffect();
108 }
109 effects.forEach(function (effect) { return _this.applyEffect(effect); });
110 };
111 CanvasRenderer.prototype.applyEffect = function (effect) {
112 this.ctx.save();
113 if (effects_1.isOpacityEffect(effect)) {
114 this.ctx.globalAlpha = effect.opacity;
115 }
116 if (effects_1.isTransformEffect(effect)) {
117 this.ctx.translate(effect.offsetX, effect.offsetY);
118 this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
119 this.ctx.translate(-effect.offsetX, -effect.offsetY);
120 }
121 if (effects_1.isClipEffect(effect)) {
122 this.path(effect.path);
123 this.ctx.clip();
124 }
125 this._activeEffects.push(effect);
126 };
127 CanvasRenderer.prototype.popEffect = function () {
128 this._activeEffects.pop();
129 this.ctx.restore();
130 };
131 CanvasRenderer.prototype.renderStack = function (stack) {
132 return __awaiter(this, void 0, void 0, function () {
133 var styles;
134 return __generator(this, function (_a) {
135 switch (_a.label) {
136 case 0:
137 styles = stack.element.container.styles;
138 if (!styles.isVisible()) return [3 /*break*/, 2];
139 return [4 /*yield*/, this.renderStackContent(stack)];
140 case 1:
141 _a.sent();
142 _a.label = 2;
143 case 2: return [2 /*return*/];
144 }
145 });
146 });
147 };
148 CanvasRenderer.prototype.renderNode = function (paint) {
149 return __awaiter(this, void 0, void 0, function () {
150 return __generator(this, function (_a) {
151 switch (_a.label) {
152 case 0:
153 if (bitwise_1.contains(paint.container.flags, 16 /* DEBUG_RENDER */)) {
154 debugger;
155 }
156 if (!paint.container.styles.isVisible()) return [3 /*break*/, 3];
157 return [4 /*yield*/, this.renderNodeBackgroundAndBorders(paint)];
158 case 1:
159 _a.sent();
160 return [4 /*yield*/, this.renderNodeContent(paint)];
161 case 2:
162 _a.sent();
163 _a.label = 3;
164 case 3: return [2 /*return*/];
165 }
166 });
167 });
168 };
169 CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing, baseline) {
170 var _this = this;
171 if (letterSpacing === 0) {
172 this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
173 }
174 else {
175 var letters = text_1.segmentGraphemes(text.text);
176 letters.reduce(function (left, letter) {
177 _this.ctx.fillText(letter, left, text.bounds.top + baseline);
178 return left + _this.ctx.measureText(letter).width;
179 }, text.bounds.left);
180 }
181 };
182 CanvasRenderer.prototype.createFontStyle = function (styles) {
183 var fontVariant = styles.fontVariant
184 .filter(function (variant) { return variant === 'normal' || variant === 'small-caps'; })
185 .join('');
186 var fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
187 var fontSize = parser_1.isDimensionToken(styles.fontSize)
188 ? "" + styles.fontSize.number + styles.fontSize.unit
189 : styles.fontSize.number + "px";
190 return [
191 [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '),
192 fontFamily,
193 fontSize
194 ];
195 };
196 CanvasRenderer.prototype.renderTextNode = function (text, styles) {
197 return __awaiter(this, void 0, void 0, function () {
198 var _a, font, fontFamily, fontSize, _b, baseline, middle, paintOrder;
199 var _this = this;
200 return __generator(this, function (_c) {
201 _a = this.createFontStyle(styles), font = _a[0], fontFamily = _a[1], fontSize = _a[2];
202 this.ctx.font = font;
203 this.ctx.direction = styles.direction === 1 /* RTL */ ? 'rtl' : 'ltr';
204 this.ctx.textAlign = 'left';
205 this.ctx.textBaseline = 'alphabetic';
206 _b = this.fontMetrics.getMetrics(fontFamily, fontSize), baseline = _b.baseline, middle = _b.middle;
207 paintOrder = styles.paintOrder;
208 text.textBounds.forEach(function (text) {
209 paintOrder.forEach(function (paintOrderLayer) {
210 switch (paintOrderLayer) {
211 case 0 /* FILL */:
212 _this.ctx.fillStyle = color_1.asString(styles.color);
213 _this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
214 var textShadows = styles.textShadow;
215 if (textShadows.length && text.text.trim().length) {
216 textShadows
217 .slice(0)
218 .reverse()
219 .forEach(function (textShadow) {
220 _this.ctx.shadowColor = color_1.asString(textShadow.color);
221 _this.ctx.shadowOffsetX = textShadow.offsetX.number * _this.options.scale;
222 _this.ctx.shadowOffsetY = textShadow.offsetY.number * _this.options.scale;
223 _this.ctx.shadowBlur = textShadow.blur.number;
224 _this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
225 });
226 _this.ctx.shadowColor = '';
227 _this.ctx.shadowOffsetX = 0;
228 _this.ctx.shadowOffsetY = 0;
229 _this.ctx.shadowBlur = 0;
230 }
231 if (styles.textDecorationLine.length) {
232 _this.ctx.fillStyle = color_1.asString(styles.textDecorationColor || styles.color);
233 styles.textDecorationLine.forEach(function (textDecorationLine) {
234 switch (textDecorationLine) {
235 case 1 /* UNDERLINE */:
236 // Draws a line at the baseline of the font
237 // TODO As some browsers display the line as more than 1px if the font-size is big,
238 // need to take that into account both in position and size
239 _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top + baseline), text.bounds.width, 1);
240 break;
241 case 2 /* OVERLINE */:
242 _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top), text.bounds.width, 1);
243 break;
244 case 3 /* LINE_THROUGH */:
245 // TODO try and find exact position for line-through
246 _this.ctx.fillRect(text.bounds.left, Math.ceil(text.bounds.top + middle), text.bounds.width, 1);
247 break;
248 }
249 });
250 }
251 break;
252 case 1 /* STROKE */:
253 if (styles.webkitTextStrokeWidth && text.text.trim().length) {
254 _this.ctx.strokeStyle = color_1.asString(styles.webkitTextStrokeColor);
255 _this.ctx.lineWidth = styles.webkitTextStrokeWidth;
256 // eslint-disable-next-line @typescript-eslint/no-explicit-any
257 _this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
258 _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
259 }
260 _this.ctx.strokeStyle = '';
261 _this.ctx.lineWidth = 0;
262 _this.ctx.lineJoin = 'miter';
263 break;
264 }
265 });
266 });
267 return [2 /*return*/];
268 });
269 });
270 };
271 CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) {
272 if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
273 var box = box_sizing_1.contentBox(container);
274 var path = bound_curves_1.calculatePaddingBoxPath(curves);
275 this.path(path);
276 this.ctx.save();
277 this.ctx.clip();
278 this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height);
279 this.ctx.restore();
280 }
281 };
282 CanvasRenderer.prototype.renderNodeContent = function (paint) {
283 return __awaiter(this, void 0, void 0, function () {
284 var container, curves, styles, _i, _a, child, image, e_1, image, e_2, iframeRenderer, canvas, size, _b, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, e_3, fontFamily, bounds;
285 return __generator(this, function (_c) {
286 switch (_c.label) {
287 case 0:
288 this.applyEffects(paint.getEffects(4 /* CONTENT */));
289 container = paint.container;
290 curves = paint.curves;
291 styles = container.styles;
292 _i = 0, _a = container.textNodes;
293 _c.label = 1;
294 case 1:
295 if (!(_i < _a.length)) return [3 /*break*/, 4];
296 child = _a[_i];
297 return [4 /*yield*/, this.renderTextNode(child, styles)];
298 case 2:
299 _c.sent();
300 _c.label = 3;
301 case 3:
302 _i++;
303 return [3 /*break*/, 1];
304 case 4:
305 if (!(container instanceof image_element_container_1.ImageElementContainer)) return [3 /*break*/, 8];
306 _c.label = 5;
307 case 5:
308 _c.trys.push([5, 7, , 8]);
309 return [4 /*yield*/, this.context.cache.match(container.src)];
310 case 6:
311 image = _c.sent();
312 this.renderReplacedElement(container, curves, image);
313 return [3 /*break*/, 8];
314 case 7:
315 e_1 = _c.sent();
316 this.context.logger.error("Error loading image " + container.src);
317 return [3 /*break*/, 8];
318 case 8:
319 if (container instanceof canvas_element_container_1.CanvasElementContainer) {
320 this.renderReplacedElement(container, curves, container.canvas);
321 }
322 if (!(container instanceof svg_element_container_1.SVGElementContainer)) return [3 /*break*/, 12];
323 _c.label = 9;
324 case 9:
325 _c.trys.push([9, 11, , 12]);
326 return [4 /*yield*/, this.context.cache.match(container.svg)];
327 case 10:
328 image = _c.sent();
329 this.renderReplacedElement(container, curves, image);
330 return [3 /*break*/, 12];
331 case 11:
332 e_2 = _c.sent();
333 this.context.logger.error("Error loading svg " + container.svg.substring(0, 255));
334 return [3 /*break*/, 12];
335 case 12:
336 if (!(container instanceof iframe_element_container_1.IFrameElementContainer && container.tree)) return [3 /*break*/, 14];
337 iframeRenderer = new CanvasRenderer(this.context, {
338 scale: this.options.scale,
339 backgroundColor: container.backgroundColor,
340 x: 0,
341 y: 0,
342 width: container.width,
343 height: container.height
344 });
345 return [4 /*yield*/, iframeRenderer.render(container.tree)];
346 case 13:
347 canvas = _c.sent();
348 if (container.width && container.height) {
349 this.ctx.drawImage(canvas, 0, 0, container.width, container.height, container.bounds.left, container.bounds.top, container.bounds.width, container.bounds.height);
350 }
351 _c.label = 14;
352 case 14:
353 if (container instanceof input_element_container_1.InputElementContainer) {
354 size = Math.min(container.bounds.width, container.bounds.height);
355 if (container.type === input_element_container_1.CHECKBOX) {
356 if (container.checked) {
357 this.ctx.save();
358 this.path([
359 new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
360 new vector_1.Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549),
361 new vector_1.Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071),
362 new vector_1.Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649),
363 new vector_1.Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23),
364 new vector_1.Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
365 new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
366 ]);
367 this.ctx.fillStyle = color_1.asString(input_element_container_1.INPUT_COLOR);
368 this.ctx.fill();
369 this.ctx.restore();
370 }
371 }
372 else if (container.type === input_element_container_1.RADIO) {
373 if (container.checked) {
374 this.ctx.save();
375 this.ctx.beginPath();
376 this.ctx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
377 this.ctx.fillStyle = color_1.asString(input_element_container_1.INPUT_COLOR);
378 this.ctx.fill();
379 this.ctx.restore();
380 }
381 }
382 }
383 if (isTextInputElement(container) && container.value.length) {
384 _b = this.createFontStyle(styles), fontFamily = _b[0], fontSize = _b[1];
385 baseline = this.fontMetrics.getMetrics(fontFamily, fontSize).baseline;
386 this.ctx.font = fontFamily;
387 this.ctx.fillStyle = color_1.asString(styles.color);
388 this.ctx.textBaseline = 'alphabetic';
389 this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
390 bounds = box_sizing_1.contentBox(container);
391 x = 0;
392 switch (container.styles.textAlign) {
393 case 1 /* CENTER */:
394 x += bounds.width / 2;
395 break;
396 case 2 /* RIGHT */:
397 x += bounds.width;
398 break;
399 }
400 textBounds = bounds.add(x, 0, 0, -bounds.height / 2 + 1);
401 this.ctx.save();
402 this.path([
403 new vector_1.Vector(bounds.left, bounds.top),
404 new vector_1.Vector(bounds.left + bounds.width, bounds.top),
405 new vector_1.Vector(bounds.left + bounds.width, bounds.top + bounds.height),
406 new vector_1.Vector(bounds.left, bounds.top + bounds.height)
407 ]);
408 this.ctx.clip();
409 this.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing, baseline);
410 this.ctx.restore();
411 this.ctx.textBaseline = 'alphabetic';
412 this.ctx.textAlign = 'left';
413 }
414 if (!bitwise_1.contains(container.styles.display, 2048 /* LIST_ITEM */)) return [3 /*break*/, 20];
415 if (!(container.styles.listStyleImage !== null)) return [3 /*break*/, 19];
416 img = container.styles.listStyleImage;
417 if (!(img.type === 0 /* URL */)) return [3 /*break*/, 18];
418 image = void 0;
419 url = img.url;
420 _c.label = 15;
421 case 15:
422 _c.trys.push([15, 17, , 18]);
423 return [4 /*yield*/, this.context.cache.match(url)];
424 case 16:
425 image = _c.sent();
426 this.ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
427 return [3 /*break*/, 18];
428 case 17:
429 e_3 = _c.sent();
430 this.context.logger.error("Error loading list-style-image " + url);
431 return [3 /*break*/, 18];
432 case 18: return [3 /*break*/, 20];
433 case 19:
434 if (paint.listValue && container.styles.listStyleType !== -1 /* NONE */) {
435 fontFamily = this.createFontStyle(styles)[0];
436 this.ctx.font = fontFamily;
437 this.ctx.fillStyle = color_1.asString(styles.color);
438 this.ctx.textBaseline = 'middle';
439 this.ctx.textAlign = 'right';
440 bounds = new bounds_1.Bounds(container.bounds.left, container.bounds.top + length_percentage_1.getAbsoluteValue(container.styles.paddingTop, container.bounds.width), container.bounds.width, line_height_1.computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1);
441 this.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, line_height_1.computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2);
442 this.ctx.textBaseline = 'bottom';
443 this.ctx.textAlign = 'left';
444 }
445 _c.label = 20;
446 case 20: return [2 /*return*/];
447 }
448 });
449 });
450 };
451 CanvasRenderer.prototype.renderStackContent = function (stack) {
452 return __awaiter(this, void 0, void 0, function () {
453 var _i, _a, child, _b, _c, child, _d, _e, child, _f, _g, child, _h, _j, child, _k, _l, child, _m, _o, child;
454 return __generator(this, function (_p) {
455 switch (_p.label) {
456 case 0:
457 if (bitwise_1.contains(stack.element.container.flags, 16 /* DEBUG_RENDER */)) {
458 debugger;
459 }
460 // https://www.w3.org/TR/css-position-3/#painting-order
461 // 1. the background and borders of the element forming the stacking context.
462 return [4 /*yield*/, this.renderNodeBackgroundAndBorders(stack.element)];
463 case 1:
464 // https://www.w3.org/TR/css-position-3/#painting-order
465 // 1. the background and borders of the element forming the stacking context.
466 _p.sent();
467 _i = 0, _a = stack.negativeZIndex;
468 _p.label = 2;
469 case 2:
470 if (!(_i < _a.length)) return [3 /*break*/, 5];
471 child = _a[_i];
472 return [4 /*yield*/, this.renderStack(child)];
473 case 3:
474 _p.sent();
475 _p.label = 4;
476 case 4:
477 _i++;
478 return [3 /*break*/, 2];
479 case 5:
480 // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
481 return [4 /*yield*/, this.renderNodeContent(stack.element)];
482 case 6:
483 // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
484 _p.sent();
485 _b = 0, _c = stack.nonInlineLevel;
486 _p.label = 7;
487 case 7:
488 if (!(_b < _c.length)) return [3 /*break*/, 10];
489 child = _c[_b];
490 return [4 /*yield*/, this.renderNode(child)];
491 case 8:
492 _p.sent();
493 _p.label = 9;
494 case 9:
495 _b++;
496 return [3 /*break*/, 7];
497 case 10:
498 _d = 0, _e = stack.nonPositionedFloats;
499 _p.label = 11;
500 case 11:
501 if (!(_d < _e.length)) return [3 /*break*/, 14];
502 child = _e[_d];
503 return [4 /*yield*/, this.renderStack(child)];
504 case 12:
505 _p.sent();
506 _p.label = 13;
507 case 13:
508 _d++;
509 return [3 /*break*/, 11];
510 case 14:
511 _f = 0, _g = stack.nonPositionedInlineLevel;
512 _p.label = 15;
513 case 15:
514 if (!(_f < _g.length)) return [3 /*break*/, 18];
515 child = _g[_f];
516 return [4 /*yield*/, this.renderStack(child)];
517 case 16:
518 _p.sent();
519 _p.label = 17;
520 case 17:
521 _f++;
522 return [3 /*break*/, 15];
523 case 18:
524 _h = 0, _j = stack.inlineLevel;
525 _p.label = 19;
526 case 19:
527 if (!(_h < _j.length)) return [3 /*break*/, 22];
528 child = _j[_h];
529 return [4 /*yield*/, this.renderNode(child)];
530 case 20:
531 _p.sent();
532 _p.label = 21;
533 case 21:
534 _h++;
535 return [3 /*break*/, 19];
536 case 22:
537 _k = 0, _l = stack.zeroOrAutoZIndexOrTransformedOrOpacity;
538 _p.label = 23;
539 case 23:
540 if (!(_k < _l.length)) return [3 /*break*/, 26];
541 child = _l[_k];
542 return [4 /*yield*/, this.renderStack(child)];
543 case 24:
544 _p.sent();
545 _p.label = 25;
546 case 25:
547 _k++;
548 return [3 /*break*/, 23];
549 case 26:
550 _m = 0, _o = stack.positiveZIndex;
551 _p.label = 27;
552 case 27:
553 if (!(_m < _o.length)) return [3 /*break*/, 30];
554 child = _o[_m];
555 return [4 /*yield*/, this.renderStack(child)];
556 case 28:
557 _p.sent();
558 _p.label = 29;
559 case 29:
560 _m++;
561 return [3 /*break*/, 27];
562 case 30: return [2 /*return*/];
563 }
564 });
565 });
566 };
567 CanvasRenderer.prototype.mask = function (paths) {
568 this.ctx.beginPath();
569 this.ctx.moveTo(0, 0);
570 this.ctx.lineTo(this.canvas.width, 0);
571 this.ctx.lineTo(this.canvas.width, this.canvas.height);
572 this.ctx.lineTo(0, this.canvas.height);
573 this.ctx.lineTo(0, 0);
574 this.formatPath(paths.slice(0).reverse());
575 this.ctx.closePath();
576 };
577 CanvasRenderer.prototype.path = function (paths) {
578 this.ctx.beginPath();
579 this.formatPath(paths);
580 this.ctx.closePath();
581 };
582 CanvasRenderer.prototype.formatPath = function (paths) {
583 var _this = this;
584 paths.forEach(function (point, index) {
585 var start = bezier_curve_1.isBezierCurve(point) ? point.start : point;
586 if (index === 0) {
587 _this.ctx.moveTo(start.x, start.y);
588 }
589 else {
590 _this.ctx.lineTo(start.x, start.y);
591 }
592 if (bezier_curve_1.isBezierCurve(point)) {
593 _this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
594 }
595 });
596 };
597 CanvasRenderer.prototype.renderRepeat = function (path, pattern, offsetX, offsetY) {
598 this.path(path);
599 this.ctx.fillStyle = pattern;
600 this.ctx.translate(offsetX, offsetY);
601 this.ctx.fill();
602 this.ctx.translate(-offsetX, -offsetY);
603 };
604 CanvasRenderer.prototype.resizeImage = function (image, width, height) {
605 var _a;
606 if (image.width === width && image.height === height) {
607 return image;
608 }
609 var ownerDocument = (_a = this.canvas.ownerDocument) !== null && _a !== void 0 ? _a : document;
610 var canvas = ownerDocument.createElement('canvas');
611 canvas.width = Math.max(1, width);
612 canvas.height = Math.max(1, height);
613 var ctx = canvas.getContext('2d');
614 ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
615 return canvas;
616 };
617 CanvasRenderer.prototype.renderBackgroundImage = function (container) {
618 return __awaiter(this, void 0, void 0, function () {
619 var index, _loop_1, this_1, _i, _a, backgroundImage;
620 return __generator(this, function (_b) {
621 switch (_b.label) {
622 case 0:
623 index = container.styles.backgroundImage.length - 1;
624 _loop_1 = function (backgroundImage) {
625 var image, url, e_4, _c, path, x, y, width, height, pattern, _d, path, x, y, width, height, _e, lineLength, x0, x1, y0, y1, canvas, ctx, gradient_2, pattern, _f, path, left, top_1, width, height, position, x, y, _g, rx, ry, radialGradient_1, midX, midY, f, invF;
626 return __generator(this, function (_h) {
627 switch (_h.label) {
628 case 0:
629 if (!(backgroundImage.type === 0 /* URL */)) return [3 /*break*/, 5];
630 image = void 0;
631 url = backgroundImage.url;
632 _h.label = 1;
633 case 1:
634 _h.trys.push([1, 3, , 4]);
635 return [4 /*yield*/, this_1.context.cache.match(url)];
636 case 2:
637 image = _h.sent();
638 return [3 /*break*/, 4];
639 case 3:
640 e_4 = _h.sent();
641 this_1.context.logger.error("Error loading background-image " + url);
642 return [3 /*break*/, 4];
643 case 4:
644 if (image) {
645 _c = background_1.calculateBackgroundRendering(container, index, [
646 image.width,
647 image.height,
648 image.width / image.height
649 ]), path = _c[0], x = _c[1], y = _c[2], width = _c[3], height = _c[4];
650 pattern = this_1.ctx.createPattern(this_1.resizeImage(image, width, height), 'repeat');
651 this_1.renderRepeat(path, pattern, x, y);
652 }
653 return [3 /*break*/, 6];
654 case 5:
655 if (image_1.isLinearGradient(backgroundImage)) {
656 _d = background_1.calculateBackgroundRendering(container, index, [null, null, null]), path = _d[0], x = _d[1], y = _d[2], width = _d[3], height = _d[4];
657 _e = gradient_1.calculateGradientDirection(backgroundImage.angle, width, height), lineLength = _e[0], x0 = _e[1], x1 = _e[2], y0 = _e[3], y1 = _e[4];
658 canvas = document.createElement('canvas');
659 canvas.width = width;
660 canvas.height = height;
661 ctx = canvas.getContext('2d');
662 gradient_2 = ctx.createLinearGradient(x0, y0, x1, y1);
663 gradient_1.processColorStops(backgroundImage.stops, lineLength).forEach(function (colorStop) {
664 return gradient_2.addColorStop(colorStop.stop, color_1.asString(colorStop.color));
665 });
666 ctx.fillStyle = gradient_2;
667 ctx.fillRect(0, 0, width, height);
668 if (width > 0 && height > 0) {
669 pattern = this_1.ctx.createPattern(canvas, 'repeat');
670 this_1.renderRepeat(path, pattern, x, y);
671 }
672 }
673 else if (image_1.isRadialGradient(backgroundImage)) {
674 _f = background_1.calculateBackgroundRendering(container, index, [
675 null,
676 null,
677 null
678 ]), path = _f[0], left = _f[1], top_1 = _f[2], width = _f[3], height = _f[4];
679 position = backgroundImage.position.length === 0 ? [length_percentage_1.FIFTY_PERCENT] : backgroundImage.position;
680 x = length_percentage_1.getAbsoluteValue(position[0], width);
681 y = length_percentage_1.getAbsoluteValue(position[position.length - 1], height);
682 _g = gradient_1.calculateRadius(backgroundImage, x, y, width, height), rx = _g[0], ry = _g[1];
683 if (rx > 0 && ry > 0) {
684 radialGradient_1 = this_1.ctx.createRadialGradient(left + x, top_1 + y, 0, left + x, top_1 + y, rx);
685 gradient_1.processColorStops(backgroundImage.stops, rx * 2).forEach(function (colorStop) {
686 return radialGradient_1.addColorStop(colorStop.stop, color_1.asString(colorStop.color));
687 });
688 this_1.path(path);
689 this_1.ctx.fillStyle = radialGradient_1;
690 if (rx !== ry) {
691 midX = container.bounds.left + 0.5 * container.bounds.width;
692 midY = container.bounds.top + 0.5 * container.bounds.height;
693 f = ry / rx;
694 invF = 1 / f;
695 this_1.ctx.save();
696 this_1.ctx.translate(midX, midY);
697 this_1.ctx.transform(1, 0, 0, f, 0, 0);
698 this_1.ctx.translate(-midX, -midY);
699 this_1.ctx.fillRect(left, invF * (top_1 - midY) + midY, width, height * invF);
700 this_1.ctx.restore();
701 }
702 else {
703 this_1.ctx.fill();
704 }
705 }
706 }
707 _h.label = 6;
708 case 6:
709 index--;
710 return [2 /*return*/];
711 }
712 });
713 };
714 this_1 = this;
715 _i = 0, _a = container.styles.backgroundImage.slice(0).reverse();
716 _b.label = 1;
717 case 1:
718 if (!(_i < _a.length)) return [3 /*break*/, 4];
719 backgroundImage = _a[_i];
720 return [5 /*yield**/, _loop_1(backgroundImage)];
721 case 2:
722 _b.sent();
723 _b.label = 3;
724 case 3:
725 _i++;
726 return [3 /*break*/, 1];
727 case 4: return [2 /*return*/];
728 }
729 });
730 });
731 };
732 CanvasRenderer.prototype.renderSolidBorder = function (color, side, curvePoints) {
733 return __awaiter(this, void 0, void 0, function () {
734 return __generator(this, function (_a) {
735 this.path(border_1.parsePathForBorder(curvePoints, side));
736 this.ctx.fillStyle = color_1.asString(color);
737 this.ctx.fill();
738 return [2 /*return*/];
739 });
740 });
741 };
742 CanvasRenderer.prototype.renderDoubleBorder = function (color, width, side, curvePoints) {
743 return __awaiter(this, void 0, void 0, function () {
744 var outerPaths, innerPaths;
745 return __generator(this, function (_a) {
746 switch (_a.label) {
747 case 0:
748 if (!(width < 3)) return [3 /*break*/, 2];
749 return [4 /*yield*/, this.renderSolidBorder(color, side, curvePoints)];
750 case 1:
751 _a.sent();
752 return [2 /*return*/];
753 case 2:
754 outerPaths = border_1.parsePathForBorderDoubleOuter(curvePoints, side);
755 this.path(outerPaths);
756 this.ctx.fillStyle = color_1.asString(color);
757 this.ctx.fill();
758 innerPaths = border_1.parsePathForBorderDoubleInner(curvePoints, side);
759 this.path(innerPaths);
760 this.ctx.fill();
761 return [2 /*return*/];
762 }
763 });
764 });
765 };
766 CanvasRenderer.prototype.renderNodeBackgroundAndBorders = function (paint) {
767 return __awaiter(this, void 0, void 0, function () {
768 var styles, hasBackground, borders, backgroundPaintingArea, side, _i, borders_1, border;
769 var _this = this;
770 return __generator(this, function (_a) {
771 switch (_a.label) {
772 case 0:
773 this.applyEffects(paint.getEffects(2 /* BACKGROUND_BORDERS */));
774 styles = paint.container.styles;
775 hasBackground = !color_1.isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
776 borders = [
777 { style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth },
778 { style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth },
779 { style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth },
780 { style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth }
781 ];
782 backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(background_1.getBackgroundValueForIndex(styles.backgroundClip, 0), paint.curves);
783 if (!(hasBackground || styles.boxShadow.length)) return [3 /*break*/, 2];
784 this.ctx.save();
785 this.path(backgroundPaintingArea);
786 this.ctx.clip();
787 if (!color_1.isTransparent(styles.backgroundColor)) {
788 this.ctx.fillStyle = color_1.asString(styles.backgroundColor);
789 this.ctx.fill();
790 }
791 return [4 /*yield*/, this.renderBackgroundImage(paint.container)];
792 case 1:
793 _a.sent();
794 this.ctx.restore();
795 styles.boxShadow
796 .slice(0)
797 .reverse()
798 .forEach(function (shadow) {
799 _this.ctx.save();
800 var borderBoxArea = bound_curves_1.calculateBorderBoxPath(paint.curves);
801 var maskOffset = shadow.inset ? 0 : MASK_OFFSET;
802 var shadowPaintingArea = path_1.transformPath(borderBoxArea, -maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number, (shadow.inset ? 1 : -1) * shadow.spread.number, shadow.spread.number * (shadow.inset ? -2 : 2), shadow.spread.number * (shadow.inset ? -2 : 2));
803 if (shadow.inset) {
804 _this.path(borderBoxArea);
805 _this.ctx.clip();
806 _this.mask(shadowPaintingArea);
807 }
808 else {
809 _this.mask(borderBoxArea);
810 _this.ctx.clip();
811 _this.path(shadowPaintingArea);
812 }
813 _this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
814 _this.ctx.shadowOffsetY = shadow.offsetY.number;
815 _this.ctx.shadowColor = color_1.asString(shadow.color);
816 _this.ctx.shadowBlur = shadow.blur.number;
817 _this.ctx.fillStyle = shadow.inset ? color_1.asString(shadow.color) : 'rgba(0,0,0,1)';
818 _this.ctx.fill();
819 _this.ctx.restore();
820 });
821 _a.label = 2;
822 case 2:
823 side = 0;
824 _i = 0, borders_1 = borders;
825 _a.label = 3;
826 case 3:
827 if (!(_i < borders_1.length)) return [3 /*break*/, 13];
828 border = borders_1[_i];
829 if (!(border.style !== 0 /* NONE */ && !color_1.isTransparent(border.color) && border.width > 0)) return [3 /*break*/, 11];
830 if (!(border.style === 2 /* DASHED */)) return [3 /*break*/, 5];
831 return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* DASHED */)];
832 case 4:
833 _a.sent();
834 return [3 /*break*/, 11];
835 case 5:
836 if (!(border.style === 3 /* DOTTED */)) return [3 /*break*/, 7];
837 return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* DOTTED */)];
838 case 6:
839 _a.sent();
840 return [3 /*break*/, 11];
841 case 7:
842 if (!(border.style === 4 /* DOUBLE */)) return [3 /*break*/, 9];
843 return [4 /*yield*/, this.renderDoubleBorder(border.color, border.width, side, paint.curves)];
844 case 8:
845 _a.sent();
846 return [3 /*break*/, 11];
847 case 9: return [4 /*yield*/, this.renderSolidBorder(border.color, side, paint.curves)];
848 case 10:
849 _a.sent();
850 _a.label = 11;
851 case 11:
852 side++;
853 _a.label = 12;
854 case 12:
855 _i++;
856 return [3 /*break*/, 3];
857 case 13: return [2 /*return*/];
858 }
859 });
860 });
861 };
862 CanvasRenderer.prototype.renderDashedDottedBorder = function (color, width, side, curvePoints, style) {
863 return __awaiter(this, void 0, void 0, function () {
864 var strokePaths, boxPaths, startX, startY, endX, endY, length, dashLength, spaceLength, useLineDash, multiplier, numberOfDashes, minSpace, maxSpace, path1, path2, path1, path2;
865 return __generator(this, function (_a) {
866 this.ctx.save();
867 strokePaths = border_1.parsePathForBorderStroke(curvePoints, side);
868 boxPaths = border_1.parsePathForBorder(curvePoints, side);
869 if (style === 2 /* DASHED */) {
870 this.path(boxPaths);
871 this.ctx.clip();
872 }
873 if (bezier_curve_1.isBezierCurve(boxPaths[0])) {
874 startX = boxPaths[0].start.x;
875 startY = boxPaths[0].start.y;
876 }
877 else {
878 startX = boxPaths[0].x;
879 startY = boxPaths[0].y;
880 }
881 if (bezier_curve_1.isBezierCurve(boxPaths[1])) {
882 endX = boxPaths[1].end.x;
883 endY = boxPaths[1].end.y;
884 }
885 else {
886 endX = boxPaths[1].x;
887 endY = boxPaths[1].y;
888 }
889 if (side === 0 || side === 2) {
890 length = Math.abs(startX - endX);
891 }
892 else {
893 length = Math.abs(startY - endY);
894 }
895 this.ctx.beginPath();
896 if (style === 3 /* DOTTED */) {
897 this.formatPath(strokePaths);
898 }
899 else {
900 this.formatPath(boxPaths.slice(0, 2));
901 }
902 dashLength = width < 3 ? width * 3 : width * 2;
903 spaceLength = width < 3 ? width * 2 : width;
904 if (style === 3 /* DOTTED */) {
905 dashLength = width;
906 spaceLength = width;
907 }
908 useLineDash = true;
909 if (length <= dashLength * 2) {
910 useLineDash = false;
911 }
912 else if (length <= dashLength * 2 + spaceLength) {
913 multiplier = length / (2 * dashLength + spaceLength);
914 dashLength *= multiplier;
915 spaceLength *= multiplier;
916 }
917 else {
918 numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
919 minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
920 maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
921 spaceLength =
922 maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
923 ? minSpace
924 : maxSpace;
925 }
926 if (useLineDash) {
927 if (style === 3 /* DOTTED */) {
928 this.ctx.setLineDash([0, dashLength + spaceLength]);
929 }
930 else {
931 this.ctx.setLineDash([dashLength, spaceLength]);
932 }
933 }
934 if (style === 3 /* DOTTED */) {
935 this.ctx.lineCap = 'round';
936 this.ctx.lineWidth = width;
937 }
938 else {
939 this.ctx.lineWidth = width * 2 + 1.1;
940 }
941 this.ctx.strokeStyle = color_1.asString(color);
942 this.ctx.stroke();
943 this.ctx.setLineDash([]);
944 // dashed round edge gap
945 if (style === 2 /* DASHED */) {
946 if (bezier_curve_1.isBezierCurve(boxPaths[0])) {
947 path1 = boxPaths[3];
948 path2 = boxPaths[0];
949 this.ctx.beginPath();
950 this.formatPath([new vector_1.Vector(path1.end.x, path1.end.y), new vector_1.Vector(path2.start.x, path2.start.y)]);
951 this.ctx.stroke();
952 }
953 if (bezier_curve_1.isBezierCurve(boxPaths[1])) {
954 path1 = boxPaths[1];
955 path2 = boxPaths[2];
956 this.ctx.beginPath();
957 this.formatPath([new vector_1.Vector(path1.end.x, path1.end.y), new vector_1.Vector(path2.start.x, path2.start.y)]);
958 this.ctx.stroke();
959 }
960 }
961 this.ctx.restore();
962 return [2 /*return*/];
963 });
964 });
965 };
966 CanvasRenderer.prototype.render = function (element) {
967 return __awaiter(this, void 0, void 0, function () {
968 var stack;
969 return __generator(this, function (_a) {
970 switch (_a.label) {
971 case 0:
972 if (this.options.backgroundColor) {
973 this.ctx.fillStyle = color_1.asString(this.options.backgroundColor);
974 this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
975 }
976 stack = stacking_context_1.parseStackingContexts(element);
977 return [4 /*yield*/, this.renderStack(stack)];
978 case 1:
979 _a.sent();
980 this.applyEffects([]);
981 return [2 /*return*/, this.canvas];
982 }
983 });
984 });
985 };
986 return CanvasRenderer;
987}(renderer_1.Renderer));
988exports.CanvasRenderer = CanvasRenderer;
989var isTextInputElement = function (container) {
990 if (container instanceof textarea_element_container_1.TextareaElementContainer) {
991 return true;
992 }
993 else if (container instanceof select_element_container_1.SelectElementContainer) {
994 return true;
995 }
996 else if (container instanceof input_element_container_1.InputElementContainer && container.type !== input_element_container_1.RADIO && container.type !== input_element_container_1.CHECKBOX) {
997 return true;
998 }
999 return false;
1000};
1001var calculateBackgroundCurvedPaintingArea = function (clip, curves) {
1002 switch (clip) {
1003 case 0 /* BORDER_BOX */:
1004 return bound_curves_1.calculateBorderBoxPath(curves);
1005 case 2 /* CONTENT_BOX */:
1006 return bound_curves_1.calculateContentBoxPath(curves);
1007 case 1 /* PADDING_BOX */:
1008 default:
1009 return bound_curves_1.calculatePaddingBoxPath(curves);
1010 }
1011};
1012var canvasTextAlign = function (textAlign) {
1013 switch (textAlign) {
1014 case 1 /* CENTER */:
1015 return 'center';
1016 case 2 /* RIGHT */:
1017 return 'right';
1018 case 0 /* LEFT */:
1019 default:
1020 return 'left';
1021 }
1022};
1023// see https://github.com/niklasvh/html2canvas/pull/2645
1024var iOSBrokenFonts = ['-apple-system', 'system-ui'];
1025var fixIOSSystemFonts = function (fontFamilies) {
1026 return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent)
1027 ? fontFamilies.filter(function (fontFamily) { return iOSBrokenFonts.indexOf(fontFamily) === -1; })
1028 : fontFamilies;
1029};
1030//# sourceMappingURL=canvas-renderer.js.map
Note: See TracBrowser for help on using the repository browser.