(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; } } /** * @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 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; } } 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); } 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 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; } } 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 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 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'); if (!(clone instanceof SVGRectElement)) return; ['width', 'height'].forEach(function (attribute) { var value = clone.getAttribute(attribute); if (!value) return; clone.style.setProperty(attribute, value); }); } } } 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; }); } 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 '' + foreignObject + ''; }) .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 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 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 canvasToBlob(canvas) { if (canvas.toBlob) return new Promise(function (resolve) { canvas.toBlob(resolve); }); return toBlob(canvas); } 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 uid() { var index = 0; return function () { return 'u' + fourRandomChars() + index++; function fourRandomChars() { /* see http://stackoverflow.com/a/6248722/2519373 */ return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4); } }; } function makeImage(uri) { return new Promise(function (resolve, reject) { var image = new Image(); image.onload = function () { resolve(image); }; image.onerror = reject; image.src = uri; }); } 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 dataAsUrl(content, type) { return 'data:' + type + ';base64,' + content; } 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 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 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 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 shouldProcess(string) { return string.search(URL_REGEX) !== -1; } 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 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 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 newFontFaces() { return { resolveAll: resolveAll, impl: { readAll: readAll } }; 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 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 { 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 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); 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);