take-shot
Version:
Screenshots with JavaScript
457 lines • 21.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.copyCSSStyles = exports.DocumentCloner = void 0;
const node_parser_1 = require("./node-parser");
const parser_1 = require("../css/syntax/parser");
const counter_1 = require("../css/types/functions/counter");
const list_style_type_1 = require("../css/property-descriptors/list-style-type");
const index_1 = require("../css/index");
const quotes_1 = require("../css/property-descriptors/quotes");
const debugger_1 = require("../core/debugger");
const embed_webfonts_1 = require("./extra/embed-webfonts");
const embed_images_1 = require("./extra/embed-images");
const util_1 = require("./extra/util");
const loading_1 = require("../utils/loading");
const IGNORE_ATTRIBUTE = 't-sh-ignore';
const invalidTags = ['SCRIPT', 'META', 'LINK', 'STYLE', 'TITLE', 'PLASMO-CSUI'];
const fakeScroll = (clone, y, x) => {
if (y !== 0 || x !== 0) {
// @ts-ignore
const children = (0, util_1.toArray)(clone.childNodes);
const body = children.find((ch) => ch.nodeName == 'BODY');
if (body)
fakeScroll(body, y, x);
else {
const scrolledNodes = children.filter(
// @ts-ignore
(ch) => ![...invalidTags, '#text'].includes(ch.nodeName) && !['fixed', 'absolute'].includes(ch?.style?.position));
// @ts-ignore
clone.style.position = 'relative';
// @ts-ignore
clone.style.overflow = 'hidden';
if (scrolledNodes.length > 0) {
// @ts-ignore
let right = clone.style.direction === 'rtl' ? `${x}px` : 0;
// @ts-ignore
let left = clone.style.direction === 'ltr' ? `${-x}px` : 0;
const inset = `${-y}px ${right} 0 ${left}`;
if (scrolledNodes.length === 1) {
// @ts-ignore
scrolledNodes[0].style.position = 'absolute';
// @ts-ignore
scrolledNodes[0].style.inset = inset;
}
else {
const section = document.createElement('section');
// @ts-ignore
(0, exports.copyCSSStyles)(clone.style, section);
section.style.inset = inset;
section.style.position = 'absolute';
section.style.inlineSize = 'unset';
section.style.blockSize = 'unset';
section.style.height = 'unset';
section.style.width = 'unset';
scrolledNodes.forEach((ch) => {
section.appendChild(ch.cloneNode(true));
ch.remove();
});
clone.appendChild(section);
}
}
}
}
};
class DocumentCloner {
constructor(context, element, options) {
this.context = context;
this.options = options;
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, false);
// const yourDOCTYPE = "<!DOCTYPE html..."; // your doctype declaration
// const printPreview = window.open('about:blank', 'print_preview');
// const printDocument = printPreview.document;
// printDocument.open();
// printDocument.write(yourDOCTYPE+ this.documentElement.innerHTML);
// printDocument.close()
(0, embed_webfonts_1.injectCssRules)(this.documentElement, options.cssRuleSelector);
}
async embed(filterFontFace, placeholder) {
await (0, embed_webfonts_1.embedWebFonts)(this.documentElement, filterFontFace);
await (0, embed_images_1.embedImages)(this.documentElement, placeholder);
}
createElementClone(node) {
if ((0, debugger_1.isDebugging)(node, 2 /* DebuggerType.CLONE */)) {
debugger;
}
if ((0, node_parser_1.isCanvasElement)(node)) {
return this.createCanvasClone(node);
}
if ((0, node_parser_1.isVideoElement)(node)) {
return this.createVideoClone(node);
}
if ((0, node_parser_1.isStyleElement)(node)) {
return this.createStyleClone(node);
}
const clone = node.cloneNode(false);
if ((0, node_parser_1.isImageElement)(clone)) {
if ((0, 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 ((0, node_parser_1.isCustomElement)(clone)) {
return this.createCustomElementClone(clone);
}
return clone;
}
createCustomElementClone(node) {
const clone = document.createElement('hcanvasercustomelement');
(0, exports.copyCSSStyles)(node.style, clone);
return clone;
}
createStyleClone(node) {
try {
const sheet = node.sheet;
if (sheet && sheet.cssRules) {
const css = [].slice.call(sheet.cssRules, 0).reduce((css, rule) => {
if (rule && typeof rule.cssText === 'string') {
return css + rule.cssText;
}
return css;
}, '');
const style = node.cloneNode(false);
style.textContent = css;
return style;
}
}
catch (e) {
// accessing node.sheet.cssRules throws a DOMException
this.context.logger.error('Unable to access cssRules property', e);
if (e.name !== 'SecurityError') {
throw e;
}
}
return node.cloneNode(false);
}
createCanvasClone(canvas) {
if (this.options.inlineImages && canvas.ownerDocument) {
const 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);
}
}
const clonedCanvas = canvas.cloneNode(false);
try {
clonedCanvas.width = canvas.width;
clonedCanvas.height = canvas.height;
const ctx = canvas.getContext('2d');
const clonedCtx = clonedCanvas.getContext('2d');
if (clonedCtx) {
if (!this.options.allowTaint && ctx) {
clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
}
else {
const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
if (gl) {
const attribs = gl.getContextAttributes();
if (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;
}
createVideoClone(video) {
const canvas = video.ownerDocument.createElement('canvas');
canvas.width = video.offsetWidth;
canvas.height = video.offsetHeight;
const 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);
}
const blankCanvas = video.ownerDocument.createElement('canvas');
blankCanvas.width = video.offsetWidth;
blankCanvas.height = video.offsetHeight;
return blankCanvas;
}
isVisible(style) {
if (style?.display == 'none' || style?.visibility == 'hidden' || style?.opacity == '0')
return false;
return true;
}
appendChildNode(clone, child, copyStyles) {
const isVisibleInViewport = (element) => {
if (!element.style)
return true;
const elementStyle = window.getComputedStyle(element);
//Particular cases when the element is not visible at all
if (elementStyle.height == '0px' ||
elementStyle.display == 'none' ||
elementStyle.opacity == '0' ||
elementStyle.clipPath == 'circle(0px at 50% 50%)' ||
elementStyle.transform == 'scale(0)' ||
element.hasAttribute('hidden')) {
return false;
}
const rect = element.getBoundingClientRect();
//Overlapping strict check
const baseElementLeft = rect.left;
const baseElementTop = rect.top;
const elementFromStartingPoint = document.elementFromPoint(baseElementLeft, baseElementTop);
if (elementFromStartingPoint != null && !element.isSameNode(elementFromStartingPoint)) {
const elementZIndex = elementStyle.zIndex;
const elementOverlappingZIndex = window.getComputedStyle(elementFromStartingPoint).zIndex;
if (Number(elementZIndex) < Number(elementOverlappingZIndex)) {
return false;
}
if (elementZIndex === '' && elementOverlappingZIndex === '') {
/**
If two positioned elements overlap without a z-index specified, the element
positioned last in the HTML code will be shown on top
**/
if (element.compareDocumentPosition(elementFromStartingPoint) & Node.DOCUMENT_POSITION_FOLLOWING) {
return false;
}
}
}
const start = getComputedStyle(element).direction === 'rtl' ? rect.right : rect.left;
const res = (rect.top >= 0 &&
start >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
start <= (window.innerWidth || document.documentElement.clientWidth));
return res;
};
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (!this.isVisible(child.style))
return;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (invalidTags.includes(child.tagName) || child.nodeType == 8 || child.id == loading_1.loadingId)
return;
if (!(0, node_parser_1.isElementNode)(child) ||
(!(0, node_parser_1.isScriptElement)(child) &&
!child.hasAttribute(IGNORE_ATTRIBUTE) &&
(typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child)))) {
if (!(0, node_parser_1.isElementNode)(child) || !(0, node_parser_1.isStyleElement)(child)) {
clone.appendChild(this.cloneNode(child, copyStyles, !isVisibleInViewport(child)));
}
}
}
cloneChildNodes(node, clone, copyStyles) {
for (let child = node.shadowRoot ? node.shadowRoot.firstChild : node.firstChild; child; child = child.nextSibling) {
if ((0, node_parser_1.isElementNode)(child) && (0, node_parser_1.isSlotElement)(child) && typeof child.assignedNodes === 'function') {
const assignedNodes = child.assignedNodes();
if (assignedNodes.length) {
assignedNodes.forEach((assignedNode) => this.appendChildNode(clone, assignedNode, copyStyles));
}
}
else {
this.appendChildNode(clone, child, copyStyles);
}
}
}
cloneNode(node, copyStyles, notAddChildren) {
if ((0, node_parser_1.isTextNode)(node)) {
return document.createTextNode(node.data);
}
if (!node.ownerDocument) {
return node.cloneNode(false);
}
const window = node.ownerDocument.defaultView;
if (window && (0, node_parser_1.isElementNode)(node) && ((0, node_parser_1.isHTMLElementNode)(node) || (0, node_parser_1.isSVGElementNode)(node))) {
const clone = this.createElementClone(node);
clone.style.transitionProperty = 'none';
const style = window.getComputedStyle(node);
const styleBefore = window.getComputedStyle(node, ':before');
const styleAfter = window.getComputedStyle(node, ':after');
if ((0, node_parser_1.isBodyElement)(clone)) {
createPseudoHideStyles(clone);
}
const counters = this.counters.parse(new index_1.CSSParsedCounterDeclaration(this.context, style));
if ((0, node_parser_1.isCustomElement)(node)) {
copyStyles = true;
}
if (!(0, node_parser_1.isVideoElement)(node) && !notAddChildren) {
this.cloneChildNodes(node, clone, copyStyles);
}
const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
if (before && this.isVisible(styleBefore)) {
clone.insertBefore(before, clone.firstChild);
}
const after = this.resolvePseudoContent(node, clone, styleAfter, PseudoElementType.AFTER);
if (after && this.isVisible(styleAfter) && !notAddChildren) {
clone.appendChild(after);
}
this.counters.pop(counters);
if ((style && !(0, node_parser_1.isIFrameElement)(node)) || copyStyles) {
(0, exports.copyCSSStyles)(style, clone);
}
fakeScroll(clone, node.scrollTop, node.scrollLeft);
if (((0, node_parser_1.isTextareaElement)(node) || (0, node_parser_1.isSelectElement)(node)) && ((0, node_parser_1.isTextareaElement)(clone) || (0, node_parser_1.isSelectElement)(clone))) {
clone.value = node.value;
}
return clone;
}
return node.cloneNode(false);
}
resolvePseudoContent(node, clone, style, pseudoElt) {
if (!style) {
return;
}
const value = style.content;
const 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));
const declaration = new index_1.CSSParsedPseudoDeclaration(this.context, style);
const anonymousReplacedElement = document.createElement('t-sh-pseudo-element');
(0, exports.copyCSSStyles)(style, anonymousReplacedElement);
declaration.content.forEach((token) => {
if (token.type === 0 /* TokenType.STRING_TOKEN */) {
anonymousReplacedElement.appendChild(document.createTextNode(token.value));
}
else if (token.type === 22 /* TokenType.URL_TOKEN */) {
const img = document.createElement('img');
img.src = token.value;
img.style.opacity = '1';
anonymousReplacedElement.appendChild(img);
}
else if (token.type === 18 /* TokenType.FUNCTION */) {
if (token.name === 'attr') {
const attr = token.values.filter(parser_1.isIdentToken);
if (attr.length) {
anonymousReplacedElement.appendChild(document.createTextNode(node.getAttribute(attr[0].value) || ''));
}
}
else if (token.name === 'counter') {
const [counter, counterStyle] = token.values.filter(parser_1.nonFunctionArgSeparator);
if (counter && (0, parser_1.isIdentToken)(counter)) {
const counterState = this.counters.getCounterValue(counter.value);
const counterType = counterStyle && (0, parser_1.isIdentToken)(counterStyle)
? list_style_type_1.listStyleType.parse(this.context, counterStyle.value)
: 3 /* LIST_STYLE_TYPE.DECIMAL */;
anonymousReplacedElement.appendChild(document.createTextNode((0, counter_1.createCounterText)(counterState, counterType, false)));
}
}
else if (token.name === 'counters') {
const [counter, delim, counterStyle] = token.values.filter(parser_1.nonFunctionArgSeparator);
if (counter && (0, parser_1.isIdentToken)(counter)) {
const counterStates = this.counters.getCounterValues(counter.value);
const counterType = counterStyle && (0, parser_1.isIdentToken)(counterStyle)
? list_style_type_1.listStyleType.parse(this.context, counterStyle.value)
: 3 /* LIST_STYLE_TYPE.DECIMAL */;
const separator = delim && delim.type === 0 /* TokenType.STRING_TOKEN */ ? delim.value : '';
const text = counterStates.map((value) => (0, counter_1.createCounterText)(value, counterType, false)).join(separator);
anonymousReplacedElement.appendChild(document.createTextNode(text));
}
}
else {
// console.log('FUNCTION_TOKEN', token);
}
}
else if (token.type === 20 /* TokenType.IDENT_TOKEN */) {
switch (token.value) {
case 'open-quote':
anonymousReplacedElement.appendChild(document.createTextNode((0, quotes_1.getQuote)(declaration.quotes, this.quoteDepth++, true)));
break;
case 'close-quote':
anonymousReplacedElement.appendChild(document.createTextNode((0, quotes_1.getQuote)(declaration.quotes, --this.quoteDepth, false)));
break;
default:
// safari doesn't parse string tokens correctly because of lack of quotes
anonymousReplacedElement.appendChild(document.createTextNode(token.value));
}
}
});
anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
const newClassName = pseudoElt === PseudoElementType.BEFORE
? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}`
: ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
if ((0, node_parser_1.isSVGElementNode)(clone)) {
clone.className.baseValue += newClassName;
}
else {
clone.className += newClassName;
}
return anonymousReplacedElement;
}
static destroy(container) {
if (container.parentNode) {
container.parentNode.removeChild(container);
return true;
}
return false;
}
}
exports.DocumentCloner = DocumentCloner;
var PseudoElementType;
(function (PseudoElementType) {
PseudoElementType[PseudoElementType["BEFORE"] = 0] = "BEFORE";
PseudoElementType[PseudoElementType["AFTER"] = 1] = "AFTER";
})(PseudoElementType || (PseudoElementType = {}));
const ignoredStyleProperties = [
'all', // #2476
'd', // #2483
'content' // Safari shows pseudoelements if content is set
];
const copyCSSStyles = (style, target) => {
// Edge does not provide value for cssText
for (let i = style.length - 1; i >= 0; i--) {
const property = style.item(i);
if (ignoredStyleProperties.indexOf(property) === -1) {
target.style.setProperty(property, style.getPropertyValue(property));
}
}
return target;
};
exports.copyCSSStyles = copyCSSStyles;
const PSEUDO_BEFORE = ':before';
const PSEUDO_AFTER = ':after';
const PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = '___take-shot___pseudoelement_before';
const PSEUDO_HIDE_ELEMENT_CLASS_AFTER = '___take-shot___pseudoelement_after';
const PSEUDO_HIDE_ELEMENT_STYLE = `{
content: "" !important;
display: none !important;
}`;
const createPseudoHideStyles = (body) => {
createStyles(body, `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
.${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`);
};
const createStyles = (body, styles) => {
const document = body.ownerDocument;
if (document) {
const style = document.createElement('style');
style.textContent = styles;
body.appendChild(style);
}
};
//# sourceMappingURL=document-cloner.js.map