FileMaster

Edit File: dom-to-image.js

/**
 * Dom-To-Image 2.6.0
 * https://github.com/tsayen/dom-to-image
 *
 * Released under the MIT license
 * https://github.com/tsayen/dom-to-image/blob/master/LICENSE
 */

(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( embedFonts )
			.then( function ( node ) {
				return cloneNode( node, options.filter, true );
			} )
			.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 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 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 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 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 readAll() {
			return Promise.resolve( util.asArray( document.styleSheets ) )
				.then( getCssRules )
				.then( selectWebFontRules )
				.then( function ( rules ) {
					return rules.map( newWebFont );
				} );

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 );

Back