HTML Screen Capture JS
npm install html-screen-capture-jssh
capture([outputType], [htmlDocument], [options]);
`
$3
#### outputType
An optional enum-type parameter, specifying the desired output. If not specified (falsey) - output will be returned as an object.
- Valid values: 'object' | 'string'
#### htmlDocument
An optional object-type parameter, specifying the HTML document to capture. If not specified (falsey) - window.document is used.
#### options
An optional object-type parameter. You can change any default option value by defining a similarly
named property within the object. If not specified (falsey), or specified but defining only some of
the properties, default values are used for all non-defined properties.
##### rulesToAddToDocStyle
- Type: Array of strings
- Default: [ ] //an empty array
- CSS rules to add to the newly created HTML document.
#### cssSelectorsOfIgnoredElements
- Type: Array of strings
- Default: [ 'script', 'link', 'style' ]
- Elements matching any of these CSS-style selectors will not be cloned to the newly created HTML document.
##### computedStyleKeyValuePairsOfIgnoredElements
- Type: Object
- Default: { display: 'none' }
- Each property name is a css style property, and its value is a css style value. Elements with these definitions in their computed style will not be cloned to the newly created HTML document.
##### tagsOfSkippedElementsForChildTreeCssHandling
- Type: Array of strings
- Default: [ 'svg' ]
- Children of elements with these tag names will not undergo CSS class/style manipulations.
##### attrKeyForSavingElementOrigClass
- Type: String
- Default: '_class'
- A non-existing HTML attribute name for saving the original element classes.
##### attrKeyForSavingElementOrigStyle
- Type: String
- Default: '_style'
- A non-existing HTML attribute name for saving the original element style.
##### prefixForNewGeneratedClasses
- Type: String
- Default: 'c'
- The prefix to use for all newly created classes - the suffix is a number.
##### prefixForNewGeneratedPseudoClasses
- Type: String
- Default: 'p'
- The prefix to use for all newly created pseudo classes - the suffix is a number.
##### imageFormatForDataUrl
- Type: String
- Default: 'image/png'
- The image format to use when images are replaced with base64 data. A valid value is any type supported by canvas.toDataURL().
##### imageQualityForDataUrl
- Type: Number
- Default: 0.92
- The image quality to use when images are replaced with base64 data; relevant only for some image formats.
A valid value is any number between 0 and 1.
##### logLevel
- Type: String
- Default: 'warn'
- Valid values: 'debug' | 'info' | 'warn' | 'error' | 'fatal' | 'off'
$3
The returned value is a static HTML document in the format specified by the OutputType
parameter supplied to the function. Valid options are below:
- "htmlScreenCaptureJs.OutputType.OBJECT"; the return value is an object. (Default)
- "htmlScreenCaptureJs.OutputType.STRING"; the return value is a string.
$3
#### By import
`sh
import { capture, OutputType } from 'html-screen-capture-js';
...
const str = capture(
OutputType.STRING,
window.document,
{}
);
`
$3
`sh
import {capture, OutputType} from 'html-screen-capture-js';
...
// capture the webpage
const htmlDocStr = capture(
OutputType.STRING,
window.document,
{
rulesToAddToDocStyle: [
'@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap")'
],
cssSelectorsOfIgnoredElements: [
'.modal-dialog-backdrop',
'.modal-dialog--error'
]
}
);
// zip and convert
const jsZip = new JSZip();
jsZip.file('screen-capture.html', htmlDocStr);
const screenCaptureZipFile = await jsZip.generateAsync({type: 'blob', compression: 'DEFLATE'});
const screenCaptureZipFileBase64 = await this.convertBlobToBase64(screenCaptureZipFile);
// post to the server
$.ajax({
type: 'POST',
url: url,
headers: headers,
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({screenshot: screenCaptureZipFileBase64}),
});
`
#### By global variable (for ES5)
`sh
var str = htmlScreenCaptureJs.capture(
'string',
window.document,
{}
);
`
$3
If the library is missing a feature you need, you can help yourself:
`sh
// Set the output type parameter to OutputType.OBJECT (instead of the more common OutputType.STRING).
const htmlDocObj = capture(OutputType.OBJECT, ..., ...);
// Since the function now returns a DOM document object, you can further manipulate it via js.
...
...
...
// Once done, convert to a string.
const htmlDocStr = htmlDocObj.outerHTML;
// Continue as usual (sending the string to a server, etc.)
...
...
...
``