diff --git a/flow-chart.drawio b/flow-chart.drawio
new file mode 100644
index 00000000..2872fe1d
--- /dev/null
+++ b/flow-chart.drawio
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/dom-to-image.js b/src/dom-to-image.js
index 27201ac9..5967324c 100644
--- a/src/dom-to-image.js
+++ b/src/dom-to-image.js
@@ -1,769 +1,865 @@
(function (global) {
- 'use strict';
-
- var util = newUtil();
- var inliner = newInliner();
- var fontFaces = newFontFaces();
- var images = newImages();
-
- // Default impl options
- var defaultOptions = {
- // Default is to fail on error, no placeholder
- imagePlaceholder: undefined,
- // Default cache bust is false, it will use the cache
- cacheBust: false
- };
-
- var domtoimage = {
- toSvg: toSvg,
- toPng: toPng,
- toJpeg: toJpeg,
- toBlob: toBlob,
- toPixelData: toPixelData,
- impl: {
- fontFaces: fontFaces,
- images: images,
- util: util,
- inliner: inliner,
- options: {}
- }
- };
-
- if (typeof module !== 'undefined')
- module.exports = domtoimage;
- else
- global.domtoimage = domtoimage;
-
-
- /**
- * @param {Node} node - The DOM Node object to render
- * @param {Object} options - Rendering options
- * @param {Function} options.filter - Should return true if passed node should be included in the output
- * (excluding node means excluding it's children as well). Not called on the root node.
- * @param {String} options.bgcolor - color for the background, any valid CSS color value.
- * @param {Number} options.width - width to be applied to node before rendering.
- * @param {Number} options.height - height to be applied to node before rendering.
- * @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
- * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
- defaults to 1.0.
- * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
- * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
- * @return {Promise} - A promise that is fulfilled with a SVG image data URL
- * */
- function toSvg(node, options) {
- options = options || {};
- copyOptions(options);
- return Promise.resolve(node)
- .then(function (node) {
- return cloneNode(node, options.filter, true);
- })
- .then(embedFonts)
- .then(inlineImages)
- .then(applyOptions)
- .then(function (clone) {
- return makeSvgDataUri(clone,
- options.width || util.width(node),
- options.height || util.height(node)
- );
- });
-
- function applyOptions(clone) {
- if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
-
- if (options.width) clone.style.width = options.width + 'px';
- if (options.height) clone.style.height = options.height + 'px';
-
- if (options.style)
- Object.keys(options.style).forEach(function (property) {
- clone.style[property] = options.style[property];
- });
-
- return clone;
- }
+ ('use strict');
+
+ var util = newUtil();
+ var inliner = newInliner();
+ var fontFaces = newFontFaces();
+ var images = newImages();
+
+ // Default impl options
+ var defaultOptions = {
+ // Default is to fail on error, no placeholder
+ imagePlaceholder: undefined,
+ // Default cache bust is false, it will use the cache
+ cacheBust: false,
+ // Use (existing) authentication credentials for external URIs (CORS requests)
+ useCredentials: false,
+ // set resolve timeout
+ httpTimeout: 30000,
+ // 自定义图像缩放比例,
+ scale: window.devicePixelRatio,
+ };
+
+ var domtoimage = {
+ toSvg: toSvg,
+ toPng: toPng,
+ toJpeg: toJpeg,
+ toBlob: toBlob,
+ toPixelData: toPixelData,
+ toCanvas: toCanvas,
+ impl: {
+ fontFaces: fontFaces,
+ images: images,
+ util: util,
+ inliner: inliner,
+ options: {},
+ },
+ };
+
+ if (typeof module !== 'undefined') module.exports = domtoimage;
+ else global = !global ? window : global;
+ global.domtoimage = domtoimage;
+
+ /**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options
+ * @param {Function} options.filter - Should return true if passed node should be included in the output
+ * (excluding node means excluding it's children as well). Not called on the root node.
+ * @param {String} options.bgcolor - color for the background, any valid CSS color value.
+ * @param {Number} options.width - width to be applied to node before rendering.
+ * @param {Number} options.height - height to be applied to node before rendering.
+ * @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
+ * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
+ defaults to 1.0.
+ * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
+ * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
+ * @param {Boolean} options.useCredentials - Use (existing) authentication credentials for external URIs (CORS requests) ,default to false
+ * @param {Number} options.httpTimeout - set request timeout,default to 30000
+ * @param {Number} options.scale - custome image zoom scale
+ * @return {Promise} - A promise that is fulfilled with a SVG image data URL
+ * */
+ function toSvg(node, options) {
+ options = options || {};
+ copyOptions(options);
+ return Promise.resolve(node)
+ .then(function (node) {
+ return cloneNode(node, options.filter, true);
+ })
+ .then(embedFonts)
+ .then(inlineImages)
+ .then(applyOptions)
+ .then(function (clone) {
+ clone.style = '';
+ return makeSvgDataUri(
+ clone,
+ options.width || util.width(node),
+ options.height || util.height(node)
+ );
+ });
+
+ function applyOptions(clone) {
+ if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
+
+ if (options.width) clone.style.width = options.width + 'px';
+ if (options.height) clone.style.height = options.height + 'px';
+
+ if (options.style)
+ Object.keys(options.style).forEach(function (property) {
+ clone.style[property] = options.style[property];
+ });
+
+ return clone;
}
-
- /**
- * @param {Node} node - The DOM Node object to render
- * @param {Object} options - Rendering options, @see {@link toSvg}
- * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
- * */
- function toPixelData(node, options) {
- return draw(node, options || {})
- .then(function (canvas) {
- return canvas.getContext('2d').getImageData(
- 0,
- 0,
- util.width(node),
- util.height(node)
- ).data;
- });
+ }
+
+ /**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
+ * */
+ function toPixelData(node, options) {
+ return draw(node, options || {}).then(function (canvas) {
+ return canvas
+ .getContext('2d')
+ .getImageData(0, 0, util.width(node), util.height(node)).data;
+ });
+ }
+
+ /**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @return {Promise} - A promise that is fulfilled with a PNG image data URL
+ * */
+ function toPng(node, options) {
+ return draw(node, options || {}).then(function (canvas) {
+ return canvas.toDataURL();
+ });
+ }
+
+ /**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
+ * */
+ function toJpeg(node, options) {
+ options = options || {};
+ return draw(node, options).then(function (canvas) {
+ return canvas.toDataURL('image/jpeg', options.quality || 1.0);
+ });
+ }
+
+ /**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @return {Promise} - A promise that is fulfilled with a PNG image blob
+ * */
+ function toBlob(node, options) {
+ return draw(node, options || {}).then(util.canvasToBlob);
+ }
+
+ function toCanvas(node, options) {
+ return draw(node, options || {}).then(function (canvas) {
+ return canvas;
+ });
+ }
+
+ function copyOptions(options) {
+ // Copy options to impl options for use in impl
+ if (typeof options.imagePlaceholder === 'undefined') {
+ domtoimage.impl.options.imagePlaceholder =
+ defaultOptions.imagePlaceholder;
+ } else {
+ domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
}
- /**
- * @param {Node} node - The DOM Node object to render
- * @param {Object} options - Rendering options, @see {@link toSvg}
- * @return {Promise} - A promise that is fulfilled with a PNG image data URL
- * */
- function toPng(node, options) {
- return draw(node, options || {})
- .then(function (canvas) {
- return canvas.toDataURL();
- });
+ if (typeof options.cacheBust === 'undefined') {
+ domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
+ } else {
+ domtoimage.impl.options.cacheBust = options.cacheBust;
}
-
- /**
- * @param {Node} node - The DOM Node object to render
- * @param {Object} options - Rendering options, @see {@link toSvg}
- * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
- * */
- function toJpeg(node, options) {
- options = options || {};
- return draw(node, options)
- .then(function (canvas) {
- return canvas.toDataURL('image/jpeg', options.quality || 1.0);
- });
+ if (typeof options.useCredentials === 'undefined') {
+ domtoimage.impl.options.useCredentials = defaultOptions.useCredentials;
+ } else {
+ domtoimage.impl.options.useCredentials = options.useCredentials;
}
-
- /**
- * @param {Node} node - The DOM Node object to render
- * @param {Object} options - Rendering options, @see {@link toSvg}
- * @return {Promise} - A promise that is fulfilled with a PNG image blob
- * */
- function toBlob(node, options) {
- return draw(node, options || {})
- .then(util.canvasToBlob);
- }
-
- function copyOptions(options) {
- // Copy options to impl options for use in impl
- if(typeof(options.imagePlaceholder) === 'undefined') {
- domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
- } else {
- domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
- }
-
- if(typeof(options.cacheBust) === 'undefined') {
- domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
- } else {
- domtoimage.impl.options.cacheBust = options.cacheBust;
- }
+ if (typeof options.scale === 'undefined') {
+ domtoimage.impl.options.scale = defaultOptions.scale;
+ } else {
+ domtoimage.impl.options.scale = options.scale;
+ }
+ }
+
+ function draw(domNode, options) {
+ return toSvg(domNode, options)
+ .then(util.makeImage)
+ .then(util.delay(100))
+ .then(function (image) {
+ var canvas = newCanvas(domNode);
+ canvas
+ .getContext('2d')
+ .drawImage(image, 0, 0, canvas.width, canvas.height);
+ return canvas;
+ });
+
+ function newCanvas(domNode) {
+ var canvas = document.createElement('canvas');
+
+ canvas.width =
+ (options.width || util.width(domNode)) * domtoimage.impl.options.scale;
+ canvas.height =
+ (options.height || util.height(domNode)) *
+ domtoimage.impl.options.scale;
+ if (options.bgcolor) {
+ var ctx = canvas.getContext('2d');
+ ctx.fillStyle = options.bgcolor;
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ }
+
+ return canvas;
+ }
+ }
+
+ function cloneNode(node, filter, root) {
+ if (!root && filter && !filter(node)) return Promise.resolve();
+
+ return Promise.resolve(node)
+ .then(makeNodeCopy)
+ .then(function (clone) {
+ return cloneChildren(node, clone, filter);
+ })
+ .then(function (clone) {
+ return processClone(node, clone);
+ });
+
+ function makeNodeCopy(node) {
+ if (node instanceof HTMLCanvasElement)
+ return util.makeImage(node.toDataURL());
+ return node.cloneNode(false);
}
- function draw(domNode, options) {
- return toSvg(domNode, options)
- .then(util.makeImage)
- .then(util.delay(100))
- .then(function (image) {
- var canvas = newCanvas(domNode);
- canvas.getContext('2d').drawImage(image, 0, 0);
- return canvas;
- });
-
- function newCanvas(domNode) {
- var canvas = document.createElement('canvas');
- canvas.width = options.width || util.width(domNode);
- canvas.height = options.height || util.height(domNode);
-
- if (options.bgcolor) {
- var ctx = canvas.getContext('2d');
- ctx.fillStyle = options.bgcolor;
- ctx.fillRect(0, 0, canvas.width, canvas.height);
- }
+ function cloneChildren(original, clone, filter) {
+ var children = original.childNodes;
+ if (children.length === 0) return Promise.resolve(clone);
- return canvas;
+ return cloneChildrenInOrder(clone, util.asArray(children), filter).then(
+ function () {
+ return clone;
}
- }
-
- function cloneNode(node, filter, root) {
- if (!root && filter && !filter(node)) return Promise.resolve();
+ );
- return Promise.resolve(node)
- .then(makeNodeCopy)
- .then(function (clone) {
- return cloneChildren(node, clone, filter);
+ function cloneChildrenInOrder(parent, children, filter) {
+ var done = Promise.resolve();
+ children.forEach(function (child) {
+ done = done
+ .then(function () {
+ return cloneNode(child, filter);
})
- .then(function (clone) {
- return processClone(node, clone);
+ .then(function (childClone) {
+ if (childClone) parent.appendChild(childClone);
});
+ });
+ return done;
+ }
+ }
- function makeNodeCopy(node) {
- if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());
- return node.cloneNode(false);
- }
-
- function cloneChildren(original, clone, filter) {
- var children = original.childNodes;
- if (children.length === 0) return Promise.resolve(clone);
-
- return cloneChildrenInOrder(clone, util.asArray(children), filter)
- .then(function () {
- return clone;
- });
-
- function cloneChildrenInOrder(parent, children, filter) {
- var done = Promise.resolve();
- children.forEach(function (child) {
- done = done
- .then(function () {
- return cloneNode(child, filter);
- })
- .then(function (childClone) {
- if (childClone) parent.appendChild(childClone);
- });
- });
- return done;
+ /**
+ * 克隆
+ * @param {Object} original 原对象
+ * @param {Object} clone 克隆对象
+ */
+ function processClone(original, clone) {
+ if (!(clone instanceof Element)) return clone;
+
+ return Promise.resolve()
+ .then(cloneStyle)
+ .then(clonePseudoElements)
+ .then(copyUserInput)
+ .then(fixSvg)
+ .then(function () {
+ return clone;
+ });
+
+ function cloneStyle() {
+ copyStyle(window.getComputedStyle(original), clone.style);
+
+ function copyStyle(source, target) {
+ if (source.cssText) target.cssText = source.cssText;
+ else copyProperties(source, target);
+
+ function copyProperties(source, target) {
+ util.asArray(source).forEach(function (name) {
+ if (source.getPropertyValue(name)) {
+ target.setProperty(
+ name,
+ source.getPropertyValue(name),
+ source.getPropertyPriority(name)
+ );
+ }
+ });
+ }
+ }
+ }
+
+ function clonePseudoElements() {
+ [':before', ':after'].forEach(function (element) {
+ clonePseudoElement(element);
+ });
+
+ function clonePseudoElement(element) {
+ var style = window.getComputedStyle(original, element);
+ var content = style.getPropertyValue('content');
+
+ if (content === '' || content === 'none') return;
+
+ var className = util.uid();
+ clone.className = clone.className + ' ' + className;
+ var styleElement = document.createElement('style');
+ styleElement.appendChild(
+ formatPseudoElementStyle(className, element, style)
+ );
+ clone.appendChild(styleElement);
+
+ function formatPseudoElementStyle(className, element, style) {
+ var selector = '.' + className + ':' + element;
+ var cssText = style.cssText
+ ? formatCssText(style)
+ : formatCssProperties(style);
+ return document.createTextNode(selector + '{' + cssText + '}');
+
+ function formatCssText(style) {
+ var content = style.getPropertyValue('content');
+ return style.cssText + ' content: ' + content + ';';
}
- }
- function processClone(original, clone) {
- if (!(clone instanceof Element)) return clone;
-
- return Promise.resolve()
- .then(cloneStyle)
- .then(clonePseudoElements)
- .then(copyUserInput)
- .then(fixSvg)
- .then(function () {
- return clone;
- });
-
- function cloneStyle() {
- copyStyle(window.getComputedStyle(original), clone.style);
-
- function copyStyle(source, target) {
- if (source.cssText) target.cssText = source.cssText;
- else copyProperties(source, target);
-
- function copyProperties(source, target) {
- util.asArray(source).forEach(function (name) {
- target.setProperty(
- name,
- source.getPropertyValue(name),
- source.getPropertyPriority(name)
- );
- });
- }
- }
- }
+ function formatCssProperties(style) {
+ return util.asArray(style).map(formatProperty).join('; ') + ';';
- function clonePseudoElements() {
- [':before', ':after'].forEach(function (element) {
- clonePseudoElement(element);
- });
-
- function clonePseudoElement(element) {
- var style = window.getComputedStyle(original, element);
- var content = style.getPropertyValue('content');
-
- if (content === '' || content === 'none') return;
-
- var className = util.uid();
- clone.className = clone.className + ' ' + className;
- var styleElement = document.createElement('style');
- styleElement.appendChild(formatPseudoElementStyle(className, element, style));
- clone.appendChild(styleElement);
-
- function formatPseudoElementStyle(className, element, style) {
- var selector = '.' + className + ':' + element;
- var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
- return document.createTextNode(selector + '{' + cssText + '}');
-
- function formatCssText(style) {
- var content = style.getPropertyValue('content');
- return style.cssText + ' content: ' + content + ';';
- }
-
- function formatCssProperties(style) {
-
- return util.asArray(style)
- .map(formatProperty)
- .join('; ') + ';';
-
- function formatProperty(name) {
- return name + ': ' +
- style.getPropertyValue(name) +
- (style.getPropertyPriority(name) ? ' !important' : '');
- }
- }
- }
- }
+ function formatProperty(name) {
+ return (
+ name +
+ ': ' +
+ style.getPropertyValue(name) +
+ (style.getPropertyPriority(name) ? ' !important' : '')
+ );
+ }
}
+ }
+ }
+ }
- function copyUserInput() {
- if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;
- if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);
- }
+ function copyUserInput() {
+ if (original instanceof HTMLTextAreaElement)
+ clone.innerHTML = original.value;
+ if (original instanceof HTMLInputElement)
+ clone.setAttribute('value', original.value);
+ }
- function fixSvg() {
- if (!(clone instanceof SVGElement)) return;
- clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+ function fixSvg() {
+ if (!(clone instanceof SVGElement)) return;
+ clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
- if (!(clone instanceof SVGRectElement)) return;
- ['width', 'height'].forEach(function (attribute) {
- var value = clone.getAttribute(attribute);
- if (!value) return;
+ if (!(clone instanceof SVGRectElement)) return;
+ ['width', 'height'].forEach(function (attribute) {
+ var value = clone.getAttribute(attribute);
+ if (!value) return;
- clone.style.setProperty(attribute, value);
- });
- }
- }
+ clone.style.setProperty(attribute, value);
+ });
+ }
}
+ }
+
+ /**
+ * 嵌入字体,生成style
+ * @param {Object} node
+ */
+ function embedFonts(node) {
+ return fontFaces.resolveAll().then(function (cssText) {
+ var styleNode = document.createElement('style');
+ node.appendChild(styleNode);
+ styleNode.appendChild(document.createTextNode(cssText));
+ return node;
+ });
+ }
+
+ function inlineImages(node) {
+ return images.inlineAll(node).then(function () {
+ return node;
+ });
+ }
+ /**
+ * 生成 SVG，base64
+ * @param {Object} node
+ * @param {Object} width
+ * @param {Object} height
+ */
+ function makeSvgDataUri(node, width, height) {
+ return Promise.resolve(node)
+ .then(function (node) {
+ node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+ return new XMLSerializer().serializeToString(node);
+ })
+ .then(util.escapeXhtml)
+ .then(function (xhtml) {
+ return (
+ '' +
+ xhtml +
+ ''
+ );
+ })
+ .then(function (foreignObject) {
+ return (
+ ''
+ );
+ })
+ .then(function (svg) {
+ return 'data:image/svg+xml;charset=utf-8,' + svg;
+ });
+ }
+
+ function newUtil() {
+ return {
+ escape: escape,
+ parseExtension: parseExtension,
+ mimeType: mimeType,
+ dataAsUrl: dataAsUrl,
+ isDataUrl: isDataUrl,
+ canvasToBlob: canvasToBlob,
+ resolveUrl: resolveUrl,
+ getAndEncode: getAndEncode,
+ uid: uid(),
+ delay: delay,
+ asArray: asArray,
+ escapeXhtml: escapeXhtml,
+ makeImage: makeImage,
+ width: width,
+ height: height,
+ };
- function embedFonts(node) {
- return fontFaces.resolveAll()
- .then(function (cssText) {
- var styleNode = document.createElement('style');
- node.appendChild(styleNode);
- styleNode.appendChild(document.createTextNode(cssText));
- return node;
- });
+ function mimes() {
+ /*
+ * Only WOFF and EOT mime types for fonts are 'real'
+ * see http://www.iana.org/assignments/media-types/media-types.xhtml
+ */
+ var WOFF = 'application/font-woff';
+ var JPEG = 'image/jpeg';
+
+ return {
+ woff: WOFF,
+ woff2: WOFF,
+ ttf: 'application/font-truetype',
+ eot: 'application/vnd.ms-fontobject',
+ png: 'image/png',
+ jpg: JPEG,
+ jpeg: JPEG,
+ gif: 'image/gif',
+ tiff: 'image/tiff',
+ svg: 'image/svg+xml',
+ };
}
- function inlineImages(node) {
- return images.inlineAll(node)
- .then(function () {
- return node;
- });
+ function parseExtension(url) {
+ var match = /\.([^\.\/]*?)$/g.exec(url);
+ if (match) return match[1];
+ else return '';
}
- function makeSvgDataUri(node, width, height) {
- return Promise.resolve(node)
- .then(function (node) {
- node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
- return new XMLSerializer().serializeToString(node);
- })
- .then(util.escapeXhtml)
- .then(function (xhtml) {
- return '' + xhtml + '';
- })
- .then(function (foreignObject) {
- return '';
- })
- .then(function (svg) {
- return 'data:image/svg+xml;charset=utf-8,' + svg;
- });
+ function mimeType(url) {
+ var extension = parseExtension(url).toLowerCase();
+ return mimes()[extension] || '';
}
- function newUtil() {
- return {
- escape: escape,
- parseExtension: parseExtension,
- mimeType: mimeType,
- dataAsUrl: dataAsUrl,
- isDataUrl: isDataUrl,
- canvasToBlob: canvasToBlob,
- resolveUrl: resolveUrl,
- getAndEncode: getAndEncode,
- uid: uid(),
- delay: delay,
- asArray: asArray,
- escapeXhtml: escapeXhtml,
- makeImage: makeImage,
- width: width,
- height: height
- };
-
- function mimes() {
- /*
- * Only WOFF and EOT mime types for fonts are 'real'
- * see http://www.iana.org/assignments/media-types/media-types.xhtml
- */
- var WOFF = 'application/font-woff';
- var JPEG = 'image/jpeg';
-
- return {
- 'woff': WOFF,
- 'woff2': WOFF,
- 'ttf': 'application/font-truetype',
- 'eot': 'application/vnd.ms-fontobject',
- 'png': 'image/png',
- 'jpg': JPEG,
- 'jpeg': JPEG,
- 'gif': 'image/gif',
- 'tiff': 'image/tiff',
- 'svg': 'image/svg+xml'
- };
- }
-
- function parseExtension(url) {
- var match = /\.([^\.\/]*?)$/g.exec(url);
- if (match) return match[1];
- else return '';
- }
-
- function mimeType(url) {
- var extension = parseExtension(url).toLowerCase();
- return mimes()[extension] || '';
- }
+ function isDataUrl(url) {
+ return url.search(/^(data:)/) !== -1;
+ }
- function isDataUrl(url) {
- return url.search(/^(data:)/) !== -1;
- }
+ function toBlob(canvas) {
+ return new Promise(function (resolve) {
+ var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
+ var length = binaryString.length;
+ var binaryArray = new Uint8Array(length);
+
+ for (var i = 0; i < length; i++)
+ binaryArray[i] = binaryString.charCodeAt(i);
+
+ resolve(
+ new Blob([binaryArray], {
+ type: 'image/png',
+ })
+ );
+ });
+ }
- function toBlob(canvas) {
- return new Promise(function (resolve) {
- var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
- var length = binaryString.length;
- var binaryArray = new Uint8Array(length);
+ function canvasToBlob(canvas) {
+ if (canvas.toBlob)
+ return new Promise(function (resolve) {
+ canvas.toBlob(resolve);
+ });
- for (var i = 0; i < length; i++)
- binaryArray[i] = binaryString.charCodeAt(i);
+ return toBlob(canvas);
+ }
- resolve(new Blob([binaryArray], {
- type: 'image/png'
- }));
- });
- }
+ function resolveUrl(url, baseUrl) {
+ var doc = document.implementation.createHTMLDocument();
+ var base = doc.createElement('base');
+ doc.head.appendChild(base);
+ var a = doc.createElement('a');
+ doc.body.appendChild(a);
+ base.href = baseUrl;
+ a.href = url;
+ console.log(url);
+ return a.href;
+ }
- function canvasToBlob(canvas) {
- if (canvas.toBlob)
- return new Promise(function (resolve) {
- canvas.toBlob(resolve);
- });
+ function uid() {
+ var index = 0;
- return toBlob(canvas);
- }
+ return function () {
+ return 'u' + fourRandomChars() + index++;
- function resolveUrl(url, baseUrl) {
- var doc = document.implementation.createHTMLDocument();
- var base = doc.createElement('base');
- doc.head.appendChild(base);
- var a = doc.createElement('a');
- doc.body.appendChild(a);
- base.href = baseUrl;
- a.href = url;
- return a.href;
+ function fourRandomChars() {
+ /* see http://stackoverflow.com/a/6248722/2519373 */
+ return (
+ '0000' + ((Math.random() * Math.pow(36, 4)) << 0).toString(36)
+ ).slice(-4);
}
+ };
+ }
+ /**
+ * 生成图片
+ * @param {Object} uri
+ */
+ function makeImage(uri) {
+ if (uri === 'data:,') return Promise.resolve();
+ return new Promise(function (resolve, reject) {
+ var image = new Image();
+ // 处理跨域图片
+ image.crossOrigin = 'anonymous';
+ if (domtoimage.impl.options.useCredentials) {
+ image.crossOrigin = 'use-credentials';
+ }
+ image.onload = function () {
+ resolve(image);
+ };
+ image.onerror = reject;
+ image.src = uri;
+ });
+ }
- function uid() {
- var index = 0;
-
- return function () {
- return 'u' + fourRandomChars() + index++;
+ function getAndEncode(url) {
+ var TIMEOUT = domtoimage.impl.options.httpTimeout;
+ if (domtoimage.impl.options.cacheBust) {
+ // Cache bypass so we dont have CORS issues with cached images
+ // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
+ url += (/\?/.test(url) ? '&' : '?') + new Date().getTime();
+ }
+
+ return new Promise(function (resolve) {
+ var request = new XMLHttpRequest();
+
+ request.onreadystatechange = done;
+ request.ontimeout = timeout;
+ request.responseType = 'blob';
+ request.timeout = TIMEOUT;
+ if (domtoimage.impl.options.useCredentials) {
+ request.withCredentials = true;
+ }
+ request.open('GET', url, true);
+ request.send();
+
+ var placeholder;
+ if (domtoimage.impl.options.imagePlaceholder) {
+ var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
+ if (split && split[1]) {
+ placeholder = split[1];
+ }
+ }
+
+ function done() {
+ if (request.readyState !== 4) return;
+
+ if (request.status !== 200) {
+ if (placeholder) {
+ resolve(placeholder);
+ } else {
+ fail(
+ 'cannot fetch resource: ' + url + ', status: ' + request.status
+ );
+ }
- function fourRandomChars() {
- /* see http://stackoverflow.com/a/6248722/2519373 */
- return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
- }
- };
- }
+ return;
+ }
- function makeImage(uri) {
- return new Promise(function (resolve, reject) {
- var image = new Image();
- image.onload = function () {
- resolve(image);
- };
- image.onerror = reject;
- image.src = uri;
- });
+ var encoder = new FileReader();
+ encoder.onloadend = function () {
+ var content = encoder.result.split(/,/)[1];
+ resolve(content);
+ };
+ encoder.readAsDataURL(request.response);
}
- function getAndEncode(url) {
- var TIMEOUT = 30000;
- if(domtoimage.impl.options.cacheBust) {
- // Cache bypass so we dont have CORS issues with cached images
- // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
- url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
- }
-
- return new Promise(function (resolve) {
- var request = new XMLHttpRequest();
-
- request.onreadystatechange = done;
- request.ontimeout = timeout;
- request.responseType = 'blob';
- request.timeout = TIMEOUT;
- request.open('GET', url, true);
- request.send();
-
- var placeholder;
- if(domtoimage.impl.options.imagePlaceholder) {
- var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
- if(split && split[1]) {
- placeholder = split[1];
- }
- }
-
- function done() {
- if (request.readyState !== 4) return;
-
- if (request.status !== 200) {
- if(placeholder) {
- resolve(placeholder);
- } else {
- fail('cannot fetch resource: ' + url + ', status: ' + request.status);
- }
-
- return;
- }
-
- var encoder = new FileReader();
- encoder.onloadend = function () {
- var content = encoder.result.split(/,/)[1];
- resolve(content);
- };
- encoder.readAsDataURL(request.response);
- }
-
- function timeout() {
- if(placeholder) {
- resolve(placeholder);
- } else {
- fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url);
- }
- }
-
- function fail(message) {
- console.error(message);
- resolve('');
- }
- });
+ function timeout() {
+ if (placeholder) {
+ resolve(placeholder);
+ } else {
+ fail(
+ 'timeout of ' +
+ TIMEOUT +
+ 'ms occured while fetching resource: ' +
+ url
+ );
+ }
}
- function dataAsUrl(content, type) {
- return 'data:' + type + ';base64,' + content;
+ function fail(message) {
+ console.error(message);
+ resolve('');
}
+ });
+ }
+ /**
+ * 转换 base64
+ * @param {Object} content 要转换内容
+ * @param {Object} type 类型：svg,jpeg,png,canvas
+ */
+ function dataAsUrl(content, type) {
+ return 'data:' + type + ';base64,' + content;
+ }
- function escape(string) {
- return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
- }
+ function escape(string) {
+ return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
+ }
- function delay(ms) {
- return function (arg) {
- return new Promise(function (resolve) {
- setTimeout(function () {
- resolve(arg);
- }, ms);
- });
- };
- }
+ function delay(ms) {
+ return function (arg) {
+ return new Promise(function (resolve) {
+ setTimeout(function () {
+ resolve(arg);
+ }, ms);
+ });
+ };
+ }
- function asArray(arrayLike) {
- var array = [];
- var length = arrayLike.length;
- for (var i = 0; i < length; i++) array.push(arrayLike[i]);
- return array;
- }
+ function asArray(arrayLike) {
+ var array = [];
+ var length = arrayLike.length;
+ for (var i = 0; i < length; i++) array.push(arrayLike[i]);
+ return array;
+ }
- function escapeXhtml(string) {
- return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
- }
+ function escapeXhtml(string) {
+ return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
+ }
- function width(node) {
- var leftBorder = px(node, 'border-left-width');
- var rightBorder = px(node, 'border-right-width');
- return node.scrollWidth + leftBorder + rightBorder;
- }
+ function width(node) {
+ var leftBorder = px(node, 'border-left-width');
+ var rightBorder = px(node, 'border-right-width');
+ return node.scrollWidth + leftBorder + rightBorder;
+ }
- function height(node) {
- var topBorder = px(node, 'border-top-width');
- var bottomBorder = px(node, 'border-bottom-width');
- return node.scrollHeight + topBorder + bottomBorder;
- }
+ function height(node) {
+ var topBorder = px(node, 'border-top-width');
+ var bottomBorder = px(node, 'border-bottom-width');
+ return node.scrollHeight + topBorder + bottomBorder;
+ }
- function px(node, styleProperty) {
- var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
- return parseFloat(value.replace('px', ''));
- }
+ function px(node, styleProperty) {
+ var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
+ return parseFloat(value.replace('px', ''));
}
+ }
+
+ /**
+ * 外联资源转内联
+ */
+ function newInliner() {
+ var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
+
+ return {
+ inlineAll: inlineAll,
+ shouldProcess: shouldProcess,
+ impl: {
+ readUrls: readUrls,
+ inline: inline,
+ },
+ };
- function newInliner() {
- var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
+ function shouldProcess(string) {
+ return string.search(URL_REGEX) !== -1;
+ }
- return {
- inlineAll: inlineAll,
- shouldProcess: shouldProcess,
- impl: {
- readUrls: readUrls,
- inline: inline
- }
- };
+ function readUrls(string) {
+ var result = [];
+ var match;
+ while ((match = URL_REGEX.exec(string)) !== null) {
+ result.push(match[1]);
+ }
+ return result.filter(function (url) {
+ return !util.isDataUrl(url);
+ });
+ }
- function shouldProcess(string) {
- return string.search(URL_REGEX) !== -1;
- }
+ function inline(string, url, baseUrl, get) {
+ return Promise.resolve(url)
+ .then(function (url) {
+ return baseUrl ? util.resolveUrl(url, baseUrl) : url;
+ })
+ .then(get || util.getAndEncode)
+ .then(function (data) {
+ return util.dataAsUrl(data, util.mimeType(url));
+ })
+ .then(function (dataUrl) {
+ return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
+ });
+
+ function urlAsRegex(url) {
+ return new RegExp(
+ '(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))',
+ 'g'
+ );
+ }
+ }
- function readUrls(string) {
- var result = [];
- var match;
- while ((match = URL_REGEX.exec(string)) !== null) {
- result.push(match[1]);
- }
- return result.filter(function (url) {
- return !util.isDataUrl(url);
+ function inlineAll(string, baseUrl, get) {
+ if (nothingToInline()) return Promise.resolve(string);
+ console.log(string, baseUrl);
+ return Promise.resolve(string)
+ .then(readUrls)
+ .then(function (urls) {
+ var done = Promise.resolve(string);
+ urls.forEach(function (url) {
+ done = done.then(function (string) {
+ return inline(string, url, baseUrl, get);
});
- }
+ });
+ return done;
+ });
- function inline(string, url, baseUrl, get) {
- return Promise.resolve(url)
- .then(function (url) {
- return baseUrl ? util.resolveUrl(url, baseUrl) : url;
- })
- .then(get || util.getAndEncode)
- .then(function (data) {
- return util.dataAsUrl(data, util.mimeType(url));
- })
- .then(function (dataUrl) {
- return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
- });
-
- function urlAsRegex(url) {
- return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');
- }
- }
+ function nothingToInline() {
+ return !shouldProcess(string);
+ }
+ }
+ }
+
+ function newFontFaces() {
+ return {
+ resolveAll: resolveAll,
+ impl: {
+ readAll: readAll,
+ },
+ };
- function inlineAll(string, baseUrl, get) {
- if (nothingToInline()) return Promise.resolve(string);
-
- return Promise.resolve(string)
- .then(readUrls)
- .then(function (urls) {
- var done = Promise.resolve(string);
- urls.forEach(function (url) {
- done = done.then(function (string) {
- return inline(string, url, baseUrl, get);
- });
- });
- return done;
- });
-
- function nothingToInline() {
- return !shouldProcess(string);
- }
- }
+ function resolveAll() {
+ return readAll(document)
+ .then(function (webFonts) {
+ return Promise.all(
+ webFonts.map(function (webFont) {
+ return webFont.resolve();
+ })
+ );
+ })
+ .then(function (cssStrings) {
+ return cssStrings.join('\n');
+ });
}
- function newFontFaces() {
+ function readAll() {
+ return Promise.resolve(util.asArray(document.styleSheets))
+ .then(getCssRules)
+ .then(selectWebFontRules)
+ .then(function (rules) {
+ return rules.map(newWebFont);
+ });
+
+ function selectWebFontRules(cssRules) {
+ return cssRules
+ .filter(function (rule) {
+ return rule.type === CSSRule.FONT_FACE_RULE;
+ })
+ .filter(function (rule) {
+ return inliner.shouldProcess(rule.style.getPropertyValue('src'));
+ });
+ }
+
+ function getCssRules(styleSheets) {
+ var cssRules = [];
+ styleSheets.forEach(function (sheet) {
+ try {
+ util
+ .asArray(sheet.cssRules || [])
+ .forEach(cssRules.push.bind(cssRules));
+ } catch (e) {
+ console.log(
+ 'Error while reading CSS rules from ' + sheet.href,
+ e.toString()
+ );
+ }
+ });
+ return cssRules;
+ }
+
+ function newWebFont(webFontRule) {
return {
- resolveAll: resolveAll,
- impl: {
- readAll: readAll
- }
+ resolve: function resolve() {
+ var baseUrl = (webFontRule.parentStyleSheet || {}).href;
+ return inliner.inlineAll(webFontRule.cssText, baseUrl);
+ },
+ src: function () {
+ return webFontRule.style.getPropertyValue('src');
+ },
};
+ }
+ }
+ }
+
+ function newImages() {
+ return {
+ inlineAll: inlineAll,
+ impl: {
+ newImage: newImage,
+ },
+ };
- function resolveAll() {
- return readAll(document)
- .then(function (webFonts) {
- return Promise.all(
- webFonts.map(function (webFont) {
- return webFont.resolve();
- })
- );
- })
- .then(function (cssStrings) {
- return cssStrings.join('\n');
- });
- }
-
- function readAll() {
- return Promise.resolve(util.asArray(document.styleSheets))
- .then(getCssRules)
- .then(selectWebFontRules)
- .then(function (rules) {
- return rules.map(newWebFont);
- });
-
- function selectWebFontRules(cssRules) {
- return cssRules
- .filter(function (rule) {
- return rule.type === CSSRule.FONT_FACE_RULE;
- })
- .filter(function (rule) {
- return inliner.shouldProcess(rule.style.getPropertyValue('src'));
- });
- }
+ function newImage(element) {
+ return {
+ inline: inline,
+ };
- function getCssRules(styleSheets) {
- var cssRules = [];
- styleSheets.forEach(function (sheet) {
- try {
- util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
- } catch (e) {
- console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
- }
- });
- return cssRules;
- }
+ function inline(get) {
+ if (util.isDataUrl(element.src)) return Promise.resolve();
- function newWebFont(webFontRule) {
- return {
- resolve: function resolve() {
- var baseUrl = (webFontRule.parentStyleSheet || {}).href;
- return inliner.inlineAll(webFontRule.cssText, baseUrl);
- },
- src: function () {
- return webFontRule.style.getPropertyValue('src');
- }
- };
- }
- }
+ return Promise.resolve(element.src)
+ .then(get || util.getAndEncode)
+ .then(function (data) {
+ return util.dataAsUrl(data, util.mimeType(element.src));
+ })
+ .then(function (dataUrl) {
+ return new Promise(function (resolve, reject) {
+ element.onload = resolve;
+ element.onerror = reject;
+ element.src = dataUrl;
+ });
+ });
+ }
}
- function newImages() {
- return {
- inlineAll: inlineAll,
- impl: {
- newImage: newImage
- }
- };
-
- function newImage(element) {
- return {
- inline: inline
- };
-
- function inline(get) {
- if (util.isDataUrl(element.src)) return Promise.resolve();
-
- return Promise.resolve(element.src)
- .then(get || util.getAndEncode)
- .then(function (data) {
- return util.dataAsUrl(data, util.mimeType(element.src));
- })
- .then(function (dataUrl) {
- return new Promise(function (resolve, reject) {
- element.onload = resolve;
- element.onerror = reject;
- element.src = dataUrl;
- });
- });
- }
- }
+ function inlineAll(node) {
+ if (!(node instanceof Element)) return Promise.resolve(node);
- function inlineAll(node) {
- if (!(node instanceof Element)) return Promise.resolve(node);
-
- return inlineBackground(node)
- .then(function () {
- if (node instanceof HTMLImageElement)
- return newImage(node).inline();
- else
- return Promise.all(
- util.asArray(node.childNodes).map(function (child) {
- return inlineAll(child);
- })
- );
- });
-
- function inlineBackground(node) {
- var background = node.style.getPropertyValue('background');
-
- if (!background) return Promise.resolve(node);
-
- return inliner.inlineAll(background)
- .then(function (inlined) {
- node.style.setProperty(
- 'background',
- inlined,
- node.style.getPropertyPriority('background')
- );
- })
- .then(function () {
- return node;
- });
- }
- }
+ return inlineBackground(node).then(function () {
+ if (node instanceof HTMLImageElement) return newImage(node).inline();
+ else
+ return Promise.all(
+ util.asArray(node.childNodes).map(function (child) {
+ return inlineAll(child);
+ })
+ );
+ });
+
+ function inlineBackground(node) {
+ var background = node.style.getPropertyValue('background');
+
+ if (!background) return Promise.resolve(node);
+
+ return inliner
+ .inlineAll(background)
+ .then(function (inlined) {
+ node.style.setProperty(
+ 'background',
+ inlined,
+ node.style.getPropertyPriority('background')
+ );
+ })
+ .then(function () {
+ return node;
+ });
+ }
}
+ }
})(this);
diff --git a/zh.md b/zh.md
new file mode 100644
index 00000000..c0ad80d9
--- /dev/null
+++ b/zh.md
@@ -0,0 +1,144 @@
+# 从DOM到图像
+[](https://travis-ci.org/tsayen/dom-to-image)
+## 简介
+dom-to-image 是一个用 JavaScript 编写的库，它可以将任意的 DOM 节点转换为矢量(SVG)或栅格(PNG 或 JPEG)图像。它基于 Paul Bakaus 的 [domvas](https://github.com/pbakaus/domvas)，已经被完全重写，修复了一些 bug，增加了一些新功能(比如 Web 字体和图像支持)。
+
+# 安装
+**NPM**
+
+> npm install dom-to-image
+
+Then load
+```js
+/* in ES 6 */
+import domtoimage from 'dom-to-image';
+/* in ES 5 */
+var domtoimage = require('dom-to-image');
+```
+
+**Bower**
+> bower install dom-to-image
+
+在页面中包含 src/dom-to-image. js 或 dist/dom-to-image. min.js，它将使 domtoimage 变量在全局范围内可用。
+
+```html
+
+
+```
+# 用法
+
+所有顶级函数都接受 DOM 节点和呈现选项并返回 promise，这些 promise 通过相应的数据 URL 来实现。获取 PNG 图像 base64编码的数据 URL 并立即显示:
+
+```js
+var node = document.getElementById('my-node');
+
+domtoimage.toPng(node)
+ .then(function (dataUrl) {
+ var img = new Image();
+ img.src = dataUrl;
+ document.body.appendChild(img);
+ })
+ .catch(function (error) {
+ console.error('oops, something went wrong!', error);
+ });
+```
+获取一个 PNG 图像块并下载它(例如，使用 FileSaver) :
+```js
+domtoimage.toBlob(document.getElementById('my-node'))
+ .then(function (blob) {
+ window.saveAs(blob, 'my-node.png');
+ });
+```
+保存并下载一个压缩的 JPEG 图片:
+```js
+domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
+ .then(function (dataUrl) {
+ var link = document.createElement('a');
+ link.download = 'my-image-name.jpeg';
+ link.href = dataUrl;
+ link.click();
+ });
+```
+获取一个 SVG 数据 URL，但过滤掉所有 < i > 元素:
+```js
+function filter (node) {
+ return (node.tagName !== 'i');
+}
+
+domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
+ .then(function (dataUrl) {
+ /* do something */
+ });
+```
+以 Uint8Array 的形式获取原始像素数据，每4个数组元素表示一个像素的 RGBA 数据:
+```js
+var node = document.getElementById('my-node');
+
+domtoimage.toPixelData(node)
+ .then(function (pixels) {
+ for (var y = 0; y < node.scrollHeight; ++y) {
+ for (var x = 0; x < node.scrollWidth; ++x) {
+ pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
+ /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
+ pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
+ }
+ }
+ });
+```
+Impl 下的所有函数都不是公共 API，只是为了单元测试而公开。
+
+# options 渲染选项
+
+
+| 属性 | 类型 | 默认值 | 说明
+| --- | --- | --- | --- |
+| filter | function | -- |一个以 DOM 节点为参数的函数。如果传递的节点应该包含在输出中，那么应该返回 true (排除节点意味着也排除它的子节点)。未在根节点上调用|
+| bgcolor | string | -- |设置背景色，CSS 颜色值 |
+| width | number | -- |呈现前应用于节点的高度和宽度(以像素为单位)|
+| height | number | -- |呈现前应用于节点的高度和宽度(以像素为单位)|
+| style | object | -- | 样式属性对象 |
+| quality | number | 1.0 | 一个介于0和1之间的数字，表示 JPEG 图像的图像质量(例如0.92 = > 92%) |
+| imagePlaceholder | string | -- |占位符图像的数据 URL，在获取图像失败时将使用该 URL。默认值为未定义，并将对失败的映像抛出错误|
+| cacheBust | boolean | false |设置为 true 可将当前时间作为查询字符串追加到 URL 请求以启用缓存崩溃 |
+| useCredentials | boolean | false | 对外部 URI（CORS 请求）使用（现有）身份验证凭据 |
+| httpTimeout | number | 30000 | 设置 resolve 超时时间，单位单位秒 |
+| useCredentials | boolean | false | 对外部 URI（CORS 请求）使用（现有）身份验证凭据 |
+| scale | number | window.devicePixelRatio | 自定义图像缩放比例 |
+
+# 依赖性
+
+ 当前只是使用标准库，但要确保浏览器支持：
+ - Promise
+ - SVG tag
+
+ # Tests 测试
+重点是，测试取决于：
+- js-imagediff,用于比较渲染图像和控制图像
+- ocard.js，对于无法比较图像（由于浏览器呈现差异）的部分，只需要测试文本是否呈现
+
+# 主要工作流程
+也许将来会有一个简单的标准的方法可以导出 HTML 的部分图像，单目前还没有找到。
+
+这个库使用了 SVG 的一个特性，允许在标记中包含任意的 HTML 内容。因此，为了能够呈现 DOM 节点，需要执行以下步骤：
+
+- 递归地克隆原始 DOM节点
+- 计算节点和每个子节点的样式，并将其复制到对应的克隆节点，另外由于伪元素不会以任何方式被克隆，所以需要重新创建伪元素。
+- 嵌入式网页字体
+ - 找到所有可能代表 web 字体的@font-face声明
+ - 解析文件 URL，下载相应文件
+ - base64-将内容和内联内容编码为数据:URLs
+ - 将所有处理的 css 规则链接起来，并将他们放到一个