| "use strict"; |
| 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 (_) 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.copyCSSStyles = exports.DocumentCloner = void 0; |
| var node_parser_1 = require("./node-parser"); |
| var parser_1 = require("../css/syntax/parser"); |
| var counter_1 = require("../css/types/functions/counter"); |
| var list_style_type_1 = require("../css/property-descriptors/list-style-type"); |
| var index_1 = require("../css/index"); |
| var quotes_1 = require("../css/property-descriptors/quotes"); |
| var debugger_1 = require("../core/debugger"); |
| var IGNORE_ATTRIBUTE = 'data-html2canvas-ignore'; |
| var DocumentCloner = (function () { |
| function DocumentCloner(context, element, options) { |
| this.context = context; |
| this.options = options; |
| this.scrolledElements = []; |
| this.referenceElement = element; |
| this.counters = new counter_1.CounterState(); |
| this.quoteDepth = 0; |
| if (!element.ownerDocument) { |
| throw new Error('Cloned element does not have an owner document'); |
| } |
| this.documentElement = this.cloneNode(element.ownerDocument.documentElement, false); |
| } |
| DocumentCloner.prototype.toIFrame = function (ownerDocument, windowSize) { |
| var _this = this; |
| var iframe = createIFrameContainer(ownerDocument, windowSize); |
| if (!iframe.contentWindow) { |
| return Promise.reject("Unable to find iframe window"); |
| } |
| var scrollX = ownerDocument.defaultView.pageXOffset; |
| var scrollY = ownerDocument.defaultView.pageYOffset; |
| var cloneWindow = iframe.contentWindow; |
| var documentClone = cloneWindow.document; |
| |
| |
| |
| var iframeLoad = iframeLoader(iframe).then(function () { return __awaiter(_this, void 0, void 0, function () { |
| var onclone, referenceElement; |
| return __generator(this, function (_a) { |
| switch (_a.label) { |
| case 0: |
| this.scrolledElements.forEach(restoreNodeScroll); |
| if (cloneWindow) { |
| cloneWindow.scrollTo(windowSize.left, windowSize.top); |
| if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent) && |
| (cloneWindow.scrollY !== windowSize.top || cloneWindow.scrollX !== windowSize.left)) { |
| this.context.logger.warn('Unable to restore scroll position for cloned document'); |
| this.context.windowBounds = this.context.windowBounds.add(cloneWindow.scrollX - windowSize.left, cloneWindow.scrollY - windowSize.top, 0, 0); |
| } |
| } |
| onclone = this.options.onclone; |
| referenceElement = this.clonedReferenceElement; |
| if (typeof referenceElement === 'undefined') { |
| return [2 , Promise.reject("Error finding the " + this.referenceElement.nodeName + " in the cloned document")]; |
| } |
| if (!(documentClone.fonts && documentClone.fonts.ready)) return [3 , 2]; |
| return [4 , documentClone.fonts.ready]; |
| case 1: |
| _a.sent(); |
| _a.label = 2; |
| case 2: |
| if (!/(AppleWebKit)/g.test(navigator.userAgent)) return [3 , 4]; |
| return [4 , imagesReady(documentClone)]; |
| case 3: |
| _a.sent(); |
| _a.label = 4; |
| case 4: |
| if (typeof onclone === 'function') { |
| return [2 , Promise.resolve() |
| .then(function () { return onclone(documentClone, referenceElement); }) |
| .then(function () { return iframe; })]; |
| } |
| return [2 , iframe]; |
| } |
| }); |
| }); }); |
| documentClone.open(); |
| documentClone.write(serializeDoctype(document.doctype) + "<html></html>"); |
| |
| restoreOwnerScroll(this.referenceElement.ownerDocument, scrollX, scrollY); |
| documentClone.replaceChild(documentClone.adoptNode(this.documentElement), documentClone.documentElement); |
| documentClone.close(); |
| return iframeLoad; |
| }; |
| DocumentCloner.prototype.createElementClone = function (node) { |
| if (debugger_1.isDebugging(node, 2 )) { |
| debugger; |
| } |
| if (node_parser_1.isCanvasElement(node)) { |
| return this.createCanvasClone(node); |
| } |
| if (node_parser_1.isVideoElement(node)) { |
| return this.createVideoClone(node); |
| } |
| if (node_parser_1.isStyleElement(node)) { |
| return this.createStyleClone(node); |
| } |
| var clone = node.cloneNode(false); |
| if (node_parser_1.isImageElement(clone)) { |
| if (node_parser_1.isImageElement(node) && node.currentSrc && node.currentSrc !== node.src) { |
| clone.src = node.currentSrc; |
| clone.srcset = ''; |
| } |
| if (clone.loading === 'lazy') { |
| clone.loading = 'eager'; |
| } |
| } |
| if (node_parser_1.isCustomElement(clone)) { |
| return this.createCustomElementClone(clone); |
| } |
| return clone; |
| }; |
| DocumentCloner.prototype.createCustomElementClone = function (node) { |
| var clone = document.createElement('html2canvascustomelement'); |
| exports.copyCSSStyles(node.style, clone); |
| return clone; |
| }; |
| DocumentCloner.prototype.createStyleClone = function (node) { |
| try { |
| var sheet = node.sheet; |
| if (sheet && sheet.cssRules) { |
| var css = [].slice.call(sheet.cssRules, 0).reduce(function (css, rule) { |
| if (rule && typeof rule.cssText === 'string') { |
| return css + rule.cssText; |
| } |
| return css; |
| }, ''); |
| var style = node.cloneNode(false); |
| style.textContent = css; |
| return style; |
| } |
| } |
| catch (e) { |
| |
| this.context.logger.error('Unable to access cssRules property', e); |
| if (e.name !== 'SecurityError') { |
| throw e; |
| } |
| } |
| return node.cloneNode(false); |
| }; |
| DocumentCloner.prototype.createCanvasClone = function (canvas) { |
| var _a; |
| if (this.options.inlineImages && canvas.ownerDocument) { |
| var img = canvas.ownerDocument.createElement('img'); |
| try { |
| img.src = canvas.toDataURL(); |
| return img; |
| } |
| catch (e) { |
| this.context.logger.info("Unable to inline canvas contents, canvas is tainted", canvas); |
| } |
| } |
| var clonedCanvas = canvas.cloneNode(false); |
| try { |
| clonedCanvas.width = canvas.width; |
| clonedCanvas.height = canvas.height; |
| var ctx = canvas.getContext('2d'); |
| var clonedCtx = clonedCanvas.getContext('2d'); |
| if (clonedCtx) { |
| if (!this.options.allowTaint && ctx) { |
| clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0); |
| } |
| else { |
| var gl = (_a = canvas.getContext('webgl2')) !== null && _a !== void 0 ? _a : canvas.getContext('webgl'); |
| if (gl) { |
| var attribs = gl.getContextAttributes(); |
| if ((attribs === null || attribs === void 0 ? void 0 : attribs.preserveDrawingBuffer) === false) { |
| this.context.logger.warn('Unable to clone WebGL context as it has preserveDrawingBuffer=false', canvas); |
| } |
| } |
| clonedCtx.drawImage(canvas, 0, 0); |
| } |
| } |
| return clonedCanvas; |
| } |
| catch (e) { |
| this.context.logger.info("Unable to clone canvas as it is tainted", canvas); |
| } |
| return clonedCanvas; |
| }; |
| DocumentCloner.prototype.createVideoClone = function (video) { |
| var canvas = video.ownerDocument.createElement('canvas'); |
| canvas.width = video.offsetWidth; |
| canvas.height = video.offsetHeight; |
| var ctx = canvas.getContext('2d'); |
| try { |
| if (ctx) { |
| ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
| if (!this.options.allowTaint) { |
| ctx.getImageData(0, 0, canvas.width, canvas.height); |
| } |
| } |
| return canvas; |
| } |
| catch (e) { |
| this.context.logger.info("Unable to clone video as it is tainted", video); |
| } |
| var blankCanvas = video.ownerDocument.createElement('canvas'); |
| blankCanvas.width = video.offsetWidth; |
| blankCanvas.height = video.offsetHeight; |
| return blankCanvas; |
| }; |
| DocumentCloner.prototype.appendChildNode = function (clone, child, copyStyles) { |
| if (!node_parser_1.isElementNode(child) || |
| (!node_parser_1.isScriptElement(child) && |
| !child.hasAttribute(IGNORE_ATTRIBUTE) && |
| (typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child)))) { |
| if (!this.options.copyStyles || !node_parser_1.isElementNode(child) || !node_parser_1.isStyleElement(child)) { |
| clone.appendChild(this.cloneNode(child, copyStyles)); |
| } |
| } |
| }; |
| DocumentCloner.prototype.cloneChildNodes = function (node, clone, copyStyles) { |
| var _this = this; |
| for (var child = node.shadowRoot ? node.shadowRoot.firstChild : node.firstChild; child; child = child.nextSibling) { |
| if (node_parser_1.isElementNode(child) && node_parser_1.isSlotElement(child) && typeof child.assignedNodes === 'function') { |
| var assignedNodes = child.assignedNodes(); |
| if (assignedNodes.length) { |
| assignedNodes.forEach(function (assignedNode) { return _this.appendChildNode(clone, assignedNode, copyStyles); }); |
| } |
| } |
| else { |
| this.appendChildNode(clone, child, copyStyles); |
| } |
| } |
| }; |
| DocumentCloner.prototype.cloneNode = function (node, copyStyles) { |
| if (node_parser_1.isTextNode(node)) { |
| return document.createTextNode(node.data); |
| } |
| if (!node.ownerDocument) { |
| return node.cloneNode(false); |
| } |
| var window = node.ownerDocument.defaultView; |
| if (window && node_parser_1.isElementNode(node) && (node_parser_1.isHTMLElementNode(node) || node_parser_1.isSVGElementNode(node))) { |
| var clone = this.createElementClone(node); |
| clone.style.transitionProperty = 'none'; |
| var style = window.getComputedStyle(node); |
| var styleBefore = window.getComputedStyle(node, ':before'); |
| var styleAfter = window.getComputedStyle(node, ':after'); |
| if (this.referenceElement === node && node_parser_1.isHTMLElementNode(clone)) { |
| this.clonedReferenceElement = clone; |
| } |
| if (node_parser_1.isBodyElement(clone)) { |
| createPseudoHideStyles(clone); |
| } |
| var counters = this.counters.parse(new index_1.CSSParsedCounterDeclaration(this.context, style)); |
| var before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE); |
| if (node_parser_1.isCustomElement(node)) { |
| copyStyles = true; |
| } |
| if (!node_parser_1.isVideoElement(node)) { |
| this.cloneChildNodes(node, clone, copyStyles); |
| } |
| if (before) { |
| clone.insertBefore(before, clone.firstChild); |
| } |
| var after = this.resolvePseudoContent(node, clone, styleAfter, PseudoElementType.AFTER); |
| if (after) { |
| clone.appendChild(after); |
| } |
| this.counters.pop(counters); |
| if ((style && (this.options.copyStyles || node_parser_1.isSVGElementNode(node)) && !node_parser_1.isIFrameElement(node)) || |
| copyStyles) { |
| exports.copyCSSStyles(style, clone); |
| } |
| if (node.scrollTop !== 0 || node.scrollLeft !== 0) { |
| this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]); |
| } |
| if ((node_parser_1.isTextareaElement(node) || node_parser_1.isSelectElement(node)) && |
| (node_parser_1.isTextareaElement(clone) || node_parser_1.isSelectElement(clone))) { |
| clone.value = node.value; |
| } |
| return clone; |
| } |
| return node.cloneNode(false); |
| }; |
| DocumentCloner.prototype.resolvePseudoContent = function (node, clone, style, pseudoElt) { |
| var _this = this; |
| if (!style) { |
| return; |
| } |
| var value = style.content; |
| var document = clone.ownerDocument; |
| if (!document || !value || value === 'none' || value === '-moz-alt-content' || style.display === 'none') { |
| return; |
| } |
| this.counters.parse(new index_1.CSSParsedCounterDeclaration(this.context, style)); |
| var declaration = new index_1.CSSParsedPseudoDeclaration(this.context, style); |
| var anonymousReplacedElement = document.createElement('html2canvaspseudoelement'); |
| exports.copyCSSStyles(style, anonymousReplacedElement); |
| declaration.content.forEach(function (token) { |
| if (token.type === 0 ) { |
| anonymousReplacedElement.appendChild(document.createTextNode(token.value)); |
| } |
| else if (token.type === 22 ) { |
| var img = document.createElement('img'); |
| img.src = token.value; |
| img.style.opacity = '1'; |
| anonymousReplacedElement.appendChild(img); |
| } |
| else if (token.type === 18 ) { |
| if (token.name === 'attr') { |
| var attr = token.values.filter(parser_1.isIdentToken); |
| if (attr.length) { |
| anonymousReplacedElement.appendChild(document.createTextNode(node.getAttribute(attr[0].value) || '')); |
| } |
| } |
| else if (token.name === 'counter') { |
| var _a = token.values.filter(parser_1.nonFunctionArgSeparator), counter = _a[0], counterStyle = _a[1]; |
| if (counter && parser_1.isIdentToken(counter)) { |
| var counterState = _this.counters.getCounterValue(counter.value); |
| var counterType = counterStyle && parser_1.isIdentToken(counterStyle) |
| ? list_style_type_1.listStyleType.parse(_this.context, counterStyle.value) |
| : 3 ; |
| anonymousReplacedElement.appendChild(document.createTextNode(counter_1.createCounterText(counterState, counterType, false))); |
| } |
| } |
| else if (token.name === 'counters') { |
| var _b = token.values.filter(parser_1.nonFunctionArgSeparator), counter = _b[0], delim = _b[1], counterStyle = _b[2]; |
| if (counter && parser_1.isIdentToken(counter)) { |
| var counterStates = _this.counters.getCounterValues(counter.value); |
| var counterType_1 = counterStyle && parser_1.isIdentToken(counterStyle) |
| ? list_style_type_1.listStyleType.parse(_this.context, counterStyle.value) |
| : 3 ; |
| var separator = delim && delim.type === 0 ? delim.value : ''; |
| var text = counterStates |
| .map(function (value) { return counter_1.createCounterText(value, counterType_1, false); }) |
| .join(separator); |
| anonymousReplacedElement.appendChild(document.createTextNode(text)); |
| } |
| } |
| else { |
| |
| } |
| } |
| else if (token.type === 20 ) { |
| switch (token.value) { |
| case 'open-quote': |
| anonymousReplacedElement.appendChild(document.createTextNode(quotes_1.getQuote(declaration.quotes, _this.quoteDepth++, true))); |
| break; |
| case 'close-quote': |
| anonymousReplacedElement.appendChild(document.createTextNode(quotes_1.getQuote(declaration.quotes, --_this.quoteDepth, false))); |
| break; |
| default: |
| |
| anonymousReplacedElement.appendChild(document.createTextNode(token.value)); |
| } |
| } |
| }); |
| anonymousReplacedElement.className = PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + " " + PSEUDO_HIDE_ELEMENT_CLASS_AFTER; |
| var newClassName = pseudoElt === PseudoElementType.BEFORE |
| ? " " + PSEUDO_HIDE_ELEMENT_CLASS_BEFORE |
| : " " + PSEUDO_HIDE_ELEMENT_CLASS_AFTER; |
| if (node_parser_1.isSVGElementNode(clone)) { |
| clone.className.baseValue += newClassName; |
| } |
| else { |
| clone.className += newClassName; |
| } |
| return anonymousReplacedElement; |
| }; |
| DocumentCloner.destroy = function (container) { |
| if (container.parentNode) { |
| container.parentNode.removeChild(container); |
| return true; |
| } |
| return false; |
| }; |
| return DocumentCloner; |
| }()); |
| exports.DocumentCloner = DocumentCloner; |
| var PseudoElementType; |
| (function (PseudoElementType) { |
| PseudoElementType[PseudoElementType["BEFORE"] = 0] = "BEFORE"; |
| PseudoElementType[PseudoElementType["AFTER"] = 1] = "AFTER"; |
| })(PseudoElementType || (PseudoElementType = {})); |
| var createIFrameContainer = function (ownerDocument, bounds) { |
| var cloneIframeContainer = ownerDocument.createElement('iframe'); |
| cloneIframeContainer.className = 'html2canvas-container'; |
| cloneIframeContainer.style.visibility = 'hidden'; |
| cloneIframeContainer.style.position = 'fixed'; |
| cloneIframeContainer.style.left = '-10000px'; |
| cloneIframeContainer.style.top = '0px'; |
| cloneIframeContainer.style.border = '0'; |
| cloneIframeContainer.width = bounds.width.toString(); |
| cloneIframeContainer.height = bounds.height.toString(); |
| cloneIframeContainer.scrolling = 'no'; |
| cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, 'true'); |
| ownerDocument.body.appendChild(cloneIframeContainer); |
| return cloneIframeContainer; |
| }; |
| var imageReady = function (img) { |
| return new Promise(function (resolve) { |
| if (img.complete) { |
| resolve(); |
| return; |
| } |
| if (!img.src) { |
| resolve(); |
| return; |
| } |
| img.onload = resolve; |
| img.onerror = resolve; |
| }); |
| }; |
| var imagesReady = function (document) { |
| return Promise.all([].slice.call(document.images, 0).map(imageReady)); |
| }; |
| var iframeLoader = function (iframe) { |
| return new Promise(function (resolve, reject) { |
| var cloneWindow = iframe.contentWindow; |
| if (!cloneWindow) { |
| return reject("No window assigned for iframe"); |
| } |
| var documentClone = cloneWindow.document; |
| cloneWindow.onload = iframe.onload = function () { |
| cloneWindow.onload = iframe.onload = null; |
| var interval = setInterval(function () { |
| if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') { |
| clearInterval(interval); |
| resolve(iframe); |
| } |
| }, 50); |
| }; |
| }); |
| }; |
| var ignoredStyleProperties = [ |
| 'all', |
| 'd', |
| 'content' |
| ]; |
| var copyCSSStyles = function (style, target) { |
| |
| for (var i = style.length - 1; i >= 0; i--) { |
| var property = style.item(i); |
| if (ignoredStyleProperties.indexOf(property) === -1) { |
| target.style.setProperty(property, style.getPropertyValue(property)); |
| } |
| } |
| return target; |
| }; |
| exports.copyCSSStyles = copyCSSStyles; |
| var serializeDoctype = function (doctype) { |
| var str = ''; |
| if (doctype) { |
| str += '<!DOCTYPE '; |
| if (doctype.name) { |
| str += doctype.name; |
| } |
| if (doctype.internalSubset) { |
| str += doctype.internalSubset; |
| } |
| if (doctype.publicId) { |
| str += "\"" + doctype.publicId + "\""; |
| } |
| if (doctype.systemId) { |
| str += "\"" + doctype.systemId + "\""; |
| } |
| str += '>'; |
| } |
| return str; |
| }; |
| var restoreOwnerScroll = function (ownerDocument, x, y) { |
| if (ownerDocument && |
| ownerDocument.defaultView && |
| (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) { |
| ownerDocument.defaultView.scrollTo(x, y); |
| } |
| }; |
| var restoreNodeScroll = function (_a) { |
| var element = _a[0], x = _a[1], y = _a[2]; |
| element.scrollLeft = x; |
| element.scrollTop = y; |
| }; |
| var PSEUDO_BEFORE = ':before'; |
| var PSEUDO_AFTER = ':after'; |
| var PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = '___html2canvas___pseudoelement_before'; |
| var PSEUDO_HIDE_ELEMENT_CLASS_AFTER = '___html2canvas___pseudoelement_after'; |
| var PSEUDO_HIDE_ELEMENT_STYLE = "{\n content: \"\" !important;\n display: none !important;\n}"; |
| var createPseudoHideStyles = function (body) { |
| createStyles(body, "." + PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + PSEUDO_BEFORE + PSEUDO_HIDE_ELEMENT_STYLE + "\n ." + PSEUDO_HIDE_ELEMENT_CLASS_AFTER + PSEUDO_AFTER + PSEUDO_HIDE_ELEMENT_STYLE); |
| }; |
| var createStyles = function (body, styles) { |
| var document = body.ownerDocument; |
| if (document) { |
| var style = document.createElement('style'); |
| style.textContent = styles; |
| body.appendChild(style); |
| } |
| }; |
| |