html2image.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).htmlToImage={})}(this,function(t){"use strict";function d(t,c,u,a){return new(u=u||Promise)(function(n,e){function r(t){try{o(a.next(t))}catch(t){e(t)}}function i(t){try{o(a.throw(t))}catch(t){e(t)}}function o(t){var e;t.done?n(t.value):((e=t.value)instanceof u?e:new u(function(t){t(e)})).then(r,i)}o((a=a.apply(t,c||[])).next())})}function v(r,i){var o,c,u,a={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]},s={next:t(0),throw:t(1),return:t(2)};return"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function t(n){return function(t){var e=[n,t];if(o)throw new TypeError("Generator is already executing.");for(;s&&(e[s=0]&&(a=0)),a;)try{if(o=1,c&&(u=2&e[0]?c.return:e[0]?c.throw||((u=c.return)&&u.call(c),0):c.next)&&!(u=u.call(c,e[1])).done)return u;switch(c=0,(e=u?[2&e[0],u.value]:e)[0]){case 0:case 1:u=e;break;case 4:return a.label++,{value:e[1],done:!1};case 5:a.label++,c=e[1],e=[0];continue;case 7:e=a.ops.pop(),a.trys.pop();continue;default:if(!((u=0<(u=a.trys).length&&u[u.length-1])||6!==e[0]&&2!==e[0])){a=0;continue}if(3===e[0]&&(!u||e[1]>u[0]&&e[1]<u[3])){a.label=e[1];break}if(6===e[0]&&a.label<u[1]){a.label=u[1],u=e;break}if(u&&a.label<u[2]){a.label=u[2],a.ops.push(e);break}u[2]&&a.ops.pop(),a.trys.pop();continue}e=i.call(r,a)}catch(t){e=[6,t],c=0}finally{o=u=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}}}var a;a=0;function l(t){for(var e=[],n=0,r=t.length;n<r;n++)e.push(t[n]);return e}function o(t,e){t=(t.ownerDocument.defaultView||window).getComputedStyle(t).getPropertyValue(e);return t?parseFloat(t.replace("px","")):0}function f(t,e){var n,r,i;return{width:(e=void 0===e?{}:e).width||(r=o(n=t,"border-left-width"),i=o(n,"border-right-width"),n.clientWidth+r+i),height:e.height||(r=o(n=t,"border-top-width"),i=o(n,"border-bottom-width"),n.clientHeight+r+i)}}var g=16384;function p(r){return new Promise(function(t,e){var n=new Image;n.decode=function(){return t(n)},n.onload=function(){return t(n)},n.onerror=e,n.crossOrigin="anonymous",n.decoding="async",n.src=r})}function s(r,i,o){return d(this,void 0,void 0,function(){var e,n;return v(this,function(t){return n="http://www.w3.org/2000/svg",e=document.createElementNS(n,"svg"),n=document.createElementNS(n,"foreignObject"),e.setAttribute("width","".concat(i)),e.setAttribute("height","".concat(o)),e.setAttribute("viewBox","0 0 ".concat(i," ").concat(o)),n.setAttribute("width","100%"),n.setAttribute("height","100%"),n.setAttribute("x","0"),n.setAttribute("y","0"),n.setAttribute("externalResourcesRequired","true"),e.appendChild(n),n.appendChild(r),[2,function(e){return d(this,void 0,void 0,function(){return v(this,function(t){return[2,Promise.resolve().then(function(){return(new XMLSerializer).serializeToString(e)}).then(encodeURIComponent).then(function(t){return"data:image/svg+xml;charset=utf-8,".concat(t)})]})})}(e)]})})}var h=function(t,e){if(t instanceof e)return!0;t=Object.getPrototypeOf(t);return null!==t&&(t.constructor.name===e.name||h(t,e))};function m(t,e,n){var r,i,o=window.getComputedStyle(t,n),c=o.getPropertyValue("content");if(""!==c&&"none"!==c){a+=1;var c="u".concat("0000".concat((Math.random()*Math.pow(36,4)<<0).toString(36)).slice(-4)).concat(a);try{e.className="".concat(e.className," ").concat(c)}catch(t){return}var u=document.createElement("style");u.appendChild((n=n,o=o,c=".".concat(c=c,":").concat(n),n=o.cssText?(i=(n=o).getPropertyValue("content"),"".concat(n.cssText," content: '").concat(i.replace(/'|"/g,""),"';")):l(r=o).map(function(t){var e=r.getPropertyValue(t),n=r.getPropertyPriority(t);return"".concat(t,": ").concat(e).concat(n?" !important":"",";")}).join(" "),document.createTextNode("".concat(c,"{").concat(n,"}")))),e.appendChild(u)}}var e="application/font-woff",n="image/jpeg",r={woff:e,woff2:e,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:n,jpeg:n,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml",webp:"image/webp"};function w(t){t=((t=/\.([^./]*?)$/g.exec(t))?t[1]:"").toLowerCase();return r[t]||""}function b(t){return-1!==t.search(/^(data:)/)}function y(t,e){return"data:".concat(e,";base64,").concat(t)}function x(e,n,o){return d(this,void 0,void 0,function(){var r,i;return v(this,function(t){switch(t.label){case 0:return[4,fetch(e,n)];case 1:if(404===(r=t.sent()).status)throw new Error('Resource "'.concat(r.url,'" not found'));return[4,r.blob()];case 2:return i=t.sent(),[2,new Promise(function(t,e){var n=new FileReader;n.onerror=e,n.onloadend=function(){try{t(o({res:r,result:n.result}))}catch(t){e(t)}},n.readAsDataURL(i)})]}})})}var S={};function E(s,l,h){return d(this,void 0,void 0,function(){var o,c,u,a;return v(this,function(t){switch(t.label){case 0:if(e=s,n=l,r=h.includeQueryParams,i=e.replace(/\?.*/,""),/ttf|otf|eot|woff2?/i.test(i=r?e:i)&&(i=i.replace(/.*\//,"")),o=n?"[".concat(n,"]").concat(i):i,null!=S[o])return[2,S[o]];h.cacheBust&&(s+=(/\?/.test(s)?"&":"?")+(new Date).getTime()),t.label=1;case 1:return t.trys.push([1,3,,4]),[4,x(s,h.fetchRequestInit,function(t){var e=t.res,t=t.result;return l=l||(e.headers.get("Content-Type")||""),t.split(/,/)[1]})];case 2:return c=t.sent(),c=y(c,l),[3,4];case 3:return u=t.sent(),c=h.imagePlaceholder||"",a="Failed to fetch resource: ".concat(s),(a=u?"string"==typeof u?u:u.message:a)&&console.warn(a),[3,4];case 4:return[2,S[o]=c]}var e,n,r,i})})}function C(s,e,n){return d(this,void 0,void 0,function(){return v(this,function(t){return n||!e.filter||e.filter(s)?[2,Promise.resolve(s).then(function(t){return function(e,n){return d(this,void 0,void 0,function(){return v(this,function(t){return h(e,HTMLCanvasElement)?[2,function(n){return d(this,void 0,void 0,function(){var e;return v(this,function(t){return"data:,"===(e=n.toDataURL())?[2,n.cloneNode(!1)]:[2,p(e)]})})}(e)]:h(e,HTMLVideoElement)?[2,function(r,i){return d(this,void 0,void 0,function(){var e,n;return v(this,function(t){switch(t.label){case 0:return r.currentSrc?(n=document.createElement("canvas"),e=n.getContext("2d"),n.width=r.clientWidth,n.height=r.clientHeight,null!=e&&e.drawImage(r,0,0,n.width,n.height),[2,p(n.toDataURL())]):(e=r.poster,n=w(e),[4,E(e,n,i)]);case 1:return[2,p(t.sent())]}})})}(e,n)]:h(e,HTMLIFrameElement)?[2,function(e){var n;return d(this,void 0,void 0,function(){return v(this,function(t){switch(t.label){case 0:return t.trys.push([0,3,,4]),null!=(n=null==e?void 0:e.contentDocument)&&n.body?[4,C(e.contentDocument.body,{},!0)]:[3,2];case 1:return[2,t.sent()];case 2:return[3,4];case 3:return t.sent(),[3,4];case 4:return[2,e.cloneNode(!1)]}})})}(e)]:[2,e.cloneNode(!1)]})})}(t,e)}).then(function(t){return function(n,r,i){var o;return d(this,void 0,void 0,function(){var e;return v(this,function(t){switch(t.label){case 0:return e=[],0===(e=null!=n.tagName&&"SLOT"===n.tagName.toUpperCase()&&n.assignedNodes?l(n.assignedNodes()):h(n,HTMLIFrameElement)&&null!=(o=n.contentDocument)&&o.body?l(n.contentDocument.body.childNodes):l((null!=(o=n.shadowRoot)?o:n).childNodes)).length||h(n,HTMLVideoElement)?[2,r]:[4,e.reduce(function(t,e){return t.then(function(){return C(e,i)}).then(function(t){t&&r.appendChild(t)})},Promise.resolve())];case 1:return t.sent(),[2,r]}})})}(s,t,e)}).then(function(t){return e=s,h(t=t,Element)&&(o=e,(a=(c=t).style)&&((u=window.getComputedStyle(o)).cssText?(a.cssText=u.cssText,a.transformOrigin=u.transformOrigin):l(u).forEach(function(t){var e,n=u.getPropertyValue(t);"font-size"===t&&n.endsWith("px")&&(e=Math.floor(parseFloat(n.substring(0,n.length-2)))-.1,n="".concat(e,"px")),h(o,HTMLIFrameElement)&&"display"===t&&"inline"===n&&(n="block"),"d"===t&&c.getAttribute("d")&&(n="path(".concat(c.getAttribute("d"),")")),a.setProperty(t,n,u.getPropertyPriority(t))})),m(r=e,i=t,":before"),m(r,i,":after"),r=t,h(i=e,HTMLTextAreaElement)&&(r.innerHTML=i.value),h(i,HTMLInputElement)&&r.setAttribute("value",i.value),r=t,h(n=e,HTMLSelectElement)&&(r=Array.from(r.children).find(function(t){return n.value===t.getAttribute("value")}))&&r.setAttribute("selected","")),t;var e,n,r,i,o,c,u,a}).then(function(t){return function(h,f){return d(this,void 0,void 0,function(){var e,n,r,i,o,c,u,a,s,l;return v(this,function(t){switch(t.label){case 0:if(0===(e=h.querySelectorAll?h.querySelectorAll("use"):[]).length)return[2,h];n={},l=0,t.label=1;case 1:return l<e.length?(a=e[l],(a=a.getAttribute("xlink:href"))?(u=h.querySelector(a),r=document.querySelector(a),u||!r||n[a]?[3,3]:(i=n,o=a,[4,C(r,f,!0)])):[3,3]):[3,4];case 2:i[o]=t.sent(),t.label=3;case 3:return l++,[3,1];case 4:if((c=Object.values(n)).length){for(u="http://www.w3.org/1999/xhtml",(a=document.createElementNS(u,"svg")).setAttribute("xmlns",u),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.display="none",s=document.createElementNS(u,"defs"),a.appendChild(s),l=0;l<c.length;l++)s.appendChild(c[l]);h.appendChild(a)}return[2,h]}})})}(t,e)})]:[2,null]})})}var P=/url\((['"]?)([^'"]+?)\1\)/g,R=/url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g,T=/src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;function A(t){return-1!==t.search(P)}function c(o,c,u){return d(this,void 0,void 0,function(){var n;return v(this,function(t){return A(o)?(e=o,i=u.preferredFontFormat,n=i?e.replace(T,function(t){for(;;){var e=R.exec(t)||[],n=e[0],e=e[2];if(!e)return"";if(e===i)return"src: ".concat(n,";")}}):e,r=[],n.replace(P,function(t,e,n){return r.push(n),t}),[2,r.filter(function(t){return!b(t)}).reduce(function(t,e){return t.then(function(t){return function(c,u,a,s,l){return d(this,void 0,void 0,function(){var n,r,i,o;return v(this,function(t){switch(t.label){case 0:return t.trys.push([0,5,,6]),n=a?function(t,e){if(t.match(/^[a-z]+:\/\//i))return t;if(t.match(/^\/\//))return window.location.protocol+t;if(t.match(/^[a-z]+:/i))return t;var n=document.implementation.createHTMLDocument(),r=n.createElement("base"),i=n.createElement("a");return n.head.appendChild(r),n.body.appendChild(i),e&&(r.href=e),i.href=t,i.href}(u,a):u,r=w(u),i=void 0,l?[4,l(n)]:[3,2];case 1:return o=t.sent(),i=y(o,r),[3,4];case 2:return[4,E(n,r,s)];case 3:i=t.sent(),t.label=4;case 4:return[2,c.replace((e=u.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1"),new RegExp("(url\\(['\"]?)(".concat(e,")(['\"]?\\))"),"g")),"$1".concat(i,"$3"))];case 5:return t.sent(),[3,6];case 6:return[2,c]}var e})})}(t,e,c,u)})},Promise.resolve(n))]):[2,o];var r,e,i})})}function i(n,r,i){var o;return d(this,void 0,void 0,function(){var e;return v(this,function(t){switch(t.label){case 0:return(e=null==(o=r.style)?void 0:o.getPropertyValue(n))?[4,c(e,null,i)]:[3,2];case 1:return e=t.sent(),r.style.setProperty(n,e,r.style.getPropertyPriority(n)),[2,!0];case 2:return[2,!1]}})})}function L(e,n){return d(this,void 0,void 0,function(){return v(this,function(t){switch(t.label){case 0:return h(e,Element)?[4,function(e,n){return d(this,void 0,void 0,function(){return v(this,function(t){switch(t.label){case 0:return[4,i("background",e,n)];case 1:return t.sent()?[3,3]:[4,i("background-image",e,n)];case 2:t.sent(),t.label=3;case 3:return[4,i("mask",e,n)];case 4:return t.sent()?[3,6]:[4,i("mask-image",e,n)];case 5:t.sent(),t.label=6;case 6:return[2]}})})}(e,n)]:[3,4];case 1:return t.sent(),[4,function(i,o){return d(this,void 0,void 0,function(){var n,e,r;return v(this,function(t){switch(t.label){case 0:return(n=h(i,HTMLImageElement))&&!b(i.src)||h(i,SVGImageElement)&&!b(i.href.baseVal)?[4,E(e=n?i.src:i.href.baseVal,w(e),o)]:[2];case 1:return r=t.sent(),[4,new Promise(function(t,e){i.onload=t,i.onerror=e;e=i;e.decode&&(e.decode=t),"lazy"===e.loading&&(e.loading="eager"),n?(i.srcset="",i.src=r):i.href.baseVal=r})];case 2:return t.sent(),[2]}})})}(e,n)];case 2:return t.sent(),[4,function(n,r){return d(this,void 0,void 0,function(){var e;return v(this,function(t){switch(t.label){case 0:return e=l(n.childNodes),e=e.map(function(t){return L(t,r)}),[4,Promise.all(e).then(function(){return n})];case 1:return t.sent(),[2]}})})}(e,n)];case 3:t.sent(),t.label=4;case 4:return[2]}})})}var u={};function N(r){return d(this,void 0,void 0,function(){var e,n;return v(this,function(t){switch(t.label){case 0:return null!=(e=u[r])?[2,e]:[4,fetch(r)];case 1:return[4,t.sent().text()];case 2:return n=t.sent(),e={url:r,cssText:n},[2,u[r]=e]}})})}function k(c,u){return d(this,void 0,void 0,function(){var r,i,e,o=this;return v(this,function(t){return r=c.cssText,i=/url\(["']?([^"')]+)["']?\)/g,e=r.match(/url\([^)]+\)/g)||[],e=e.map(function(n){return d(o,void 0,void 0,function(){var e;return v(this,function(t){return[2,x(e=(e=n.replace(i,"$1")).startsWith("https://")?e:new URL(e,c.url).href,u.fetchRequestInit,function(t){t=t.result;return r=r.replace(n,"url(".concat(t,")")),[n,t]})]})})}),[2,Promise.all(e).then(function(){return r})]})})}function I(t){if(null==t)return[];for(var e=[],n=t.replace(/(\/\*[\s\S]*?\*\/)/gi,""),r=new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})","gi");null!==(i=r.exec(n));)e.push(i[0]);for(var i,n=n.replace(r,""),o=/@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi,c=new RegExp("((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})","gi");;){if(null===(i=o.exec(n))){if(null===(i=c.exec(n)))break;o.lastIndex=c.lastIndex}else c.lastIndex=o.lastIndex;e.push(i[0])}return e}function V(e,n){return d(this,void 0,void 0,function(){return v(this,function(t){switch(t.label){case 0:if(null==e.ownerDocument)throw new Error("Provided element is not within a Document");return[4,function(o,c){return d(this,void 0,void 0,function(){var n,i;return v(this,function(t){return n=[],i=[],o.forEach(function(r){if("cssRules"in r)try{l(r.cssRules||[]).forEach(function(t,e){var n;t.type===CSSRule.IMPORT_RULE&&(n=e+1,e=N(t.href).then(function(t){return k(t,c)}).then(function(t){return I(t).forEach(function(e){try{r.insertRule(e,e.startsWith("@import")?n+=1:r.cssRules.length)}catch(t){console.error("Error inserting rule from remote css",{rule:e,error:t})}})}).catch(function(t){console.error("Error loading remote css",t.toString())}),i.push(e))})}catch(t){var e=o.find(function(t){return null==t.href})||document.styleSheets[0];null!=r.href&&i.push(N(r.href).then(function(t){return k(t,c)}).then(function(t){return I(t).forEach(function(t){e.insertRule(t,r.cssRules.length)})}).catch(function(t){console.error("Error loading remote stylesheet",t)})),console.error("Error inlining remote css file",t)}}),[2,Promise.all(i).then(function(){return o.forEach(function(e){if("cssRules"in e)try{l(e.cssRules||[]).forEach(function(t){n.push(t)})}catch(t){console.error("Error while reading CSS rules from ".concat(e.href),t)}}),n})]})})}(l(e.ownerDocument.styleSheets),n)];case 1:return[2,t.sent().filter(function(t){return t.type===CSSRule.FONT_FACE_RULE}).filter(function(t){return A(t.style.getPropertyValue("src"))})]}})})}function D(n,r){return d(this,void 0,void 0,function(){var e;return v(this,function(t){switch(t.label){case 0:return[4,V(n,r)];case 1:return e=t.sent(),[4,Promise.all(e.map(function(t){var e=t.parentStyleSheet?t.parentStyleSheet.href:null;return c(t.cssText,e,r)}))];case 2:return[2,t.sent().join("\n")]}})})}function M(u,a){return void 0===a&&(a={}),d(this,void 0,void 0,function(){var i,o,c;return v(this,function(t){switch(t.label){case 0:return o=f(u,a),i=o.width,o=o.height,[4,C(u,a,!0)];case 1:return[4,function(o,c){return d(this,void 0,void 0,function(){var e,n,r,i;return v(this,function(t){switch(t.label){case 0:return null==c.fontEmbedCSS?[3,1]:(e=c.fontEmbedCSS,[3,5]);case 1:return c.skipFonts?(n=null,[3,4]):[3,2];case 2:return[4,D(o,c)];case 3:n=t.sent(),t.label=4;case 4:e=n,t.label=5;case 5:return(i=e)&&(r=document.createElement("style"),i=document.createTextNode(i),r.appendChild(i),o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r)),[2]}})})}(c=t.sent(),a)];case 2:return t.sent(),[4,L(c,a)];case 3:return t.sent(),e=a,n=c.style,e.backgroundColor&&(n.backgroundColor=e.backgroundColor),e.width&&(n.width="".concat(e.width,"px")),e.height&&(n.height="".concat(e.height,"px")),null!=(r=e.style)&&Object.keys(r).forEach(function(t){n[t]=r[t]}),[4,s(c,i,o)];case 4:return[2,t.sent()]}var e,n,r})})}function H(l,h){return void 0===h&&(h={}),d(this,void 0,void 0,function(){var n,r,i,o,c,u,a,s;return v(this,function(t){switch(t.label){case 0:return r=f(l,h),n=r.width,r=r.height,[4,M(l,h)];case 1:return[4,p(t.sent())];case 2:return i=t.sent(),o=document.createElement("canvas"),c=o.getContext("2d"),u=h.pixelRatio||function(){var t;try{e=process}catch(t){}var e=e&&e.env?e.env.devicePixelRatio:null;return e&&(t=parseInt(e,10),Number.isNaN(t)&&(t=1)),t||window.devicePixelRatio||1}(),a=h.canvasWidth||n,s=h.canvasHeight||r,o.width=a*u,o.height=s*u,h.skipAutoScale||((e=o).width>g||e.height>g)&&(e.width>g&&e.height>g?e.width>e.height?(e.height*=g/e.width,e.width=g):(e.width*=g/e.height,e.height=g):e.width>g?(e.height*=g/e.width,e.width=g):(e.width*=g/e.height,e.height=g)),o.style.width="".concat(a),o.style.height="".concat(s),h.backgroundColor&&(c.fillStyle=h.backgroundColor,c.fillRect(0,0,o.width,o.height)),c.drawImage(i,0,0,o.width,o.height),[2,o]}var e})})}t.getFontEmbedCSS=function(e,n){return void 0===n&&(n={}),d(this,void 0,void 0,function(){return v(this,function(t){return[2,D(e,n)]})})},t.toBlob=function(e,n){return void 0===n&&(n={}),d(this,void 0,void 0,function(){return v(this,function(t){switch(t.label){case 0:return[4,H(e,n)];case 1:return[4,(o=t.sent(),void 0===c&&(c={}),o.toBlob?new Promise(function(t){o.toBlob(t,c.type||"image/png",c.quality||1)}):new Promise(function(t){for(var e=window.atob(o.toDataURL(c.type||void 0,c.quality||void 0).split(",")[1]),n=e.length,r=new Uint8Array(n),i=0;i<n;i+=1)r[i]=e.charCodeAt(i);t(new Blob([r],{type:c.type||"image/png"}))}))];case 2:return[2,t.sent()]}var o,c})})},t.toCanvas=H,t.toJpeg=function(e,n){return void 0===n&&(n={}),d(this,void 0,void 0,function(){return v(this,function(t){switch(t.label){case 0:return[4,H(e,n)];case 1:return[2,t.sent().toDataURL("image/jpeg",n.quality||1)]}})})},t.toPixelData=function(r,i){return void 0===i&&(i={}),d(this,void 0,void 0,function(){var e,n;return v(this,function(t){switch(t.label){case 0:return n=f(r,i),e=n.width,n=n.height,[4,H(r,i)];case 1:return[2,t.sent().getContext("2d").getImageData(0,0,e,n).data]}})})},t.toPng=function(e,n){return void 0===n&&(n={}),d(this,void 0,void 0,function(){return v(this,function(t){switch(t.label){case 0:return[4,H(e,n)];case 1:return[2,t.sent().toDataURL()]}})})},t.toSvg=M});