mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
30 lines
27 KiB
HTML
30 lines
27 KiB
HTML
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style id="typography.js">html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font:90.625%/1.5 'Roboto',sans-serif;box-sizing:border-box;overflow-y:scroll;}*{box-sizing:inherit;}*:before{box-sizing:inherit;}*:after{box-sizing:inherit;}body{color:hsla(0,0%,0%,0.8);font-family:'Roboto',sans-serif;font-weight:normal;word-wrap:break-word;font-kerning:normal;-moz-font-feature-settings:"kern", "liga", "clig", "calt";-ms-font-feature-settings:"kern", "liga", "clig", "calt";-webkit-font-feature-settings:"kern", "liga", "clig", "calt";font-feature-settings:"kern", "liga", "clig", "calt";}img{max-width:100%;margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}h1{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:inherit;font-family:'Roboto',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:1.93103rem;line-height:1.1;}h2{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:inherit;font-family:'Roboto',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:1.46345rem;line-height:1.1;}h3{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:inherit;font-family:'Roboto',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:1.27401rem;line-height:1.1;}h4{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:inherit;font-family:'Roboto',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:0.96552rem;line-height:1.1;}h5{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:inherit;font-family:'Roboto',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:0.84053rem;line-height:1.1;}h6{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:inherit;font-family:'Roboto',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:0.78424rem;line-height:1.1;}hgroup{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}ul{margin-left:1.5rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;list-style-position:outside;list-style-image:none;}ol{margin-left:1.5rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;list-style-position:outside;list-style-image:none;}dl{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}dd{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}p{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}figure{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}pre{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;font-size:0.85rem;line-height:1.5rem;}table{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;font-size:1rem;line-height:1.5rem;border-collapse:collapse;width:100%;}fieldset{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}blockquote{margin-left:1.5rem;margin-right:1.5rem;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}form{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}noscript{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}iframe{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}hr{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:calc(1.5rem - 1px);background:hsla(0,0%,0%,0.2);border:none;height:1px;}address{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}b{font-weight:bold;}strong{font-weight:bold;}dt{font-weight:bold;}th{font-weight:bold;}li{margin-bottom:calc(1.5rem / 2);}ol li{padding-left:0;}ul li{padding-left:0;}li > ol{margin-left:1.5rem;margin-bottom:calc(1.5rem / 2);margin-top:calc(1.5rem / 2);}li > ul{margin-left:1.5rem;margin-bottom:calc(1.5rem / 2);margin-top:calc(1.5rem / 2);}blockquote *:last-child{margin-bottom:0;}li *:last-child{margin-bottom:0;}p *:last-child{margin-bottom:0;}li > p{margin-bottom:calc(1.5rem / 2);}code{font-size:0.85rem;line-height:1.5rem;}kbd{font-size:0.85rem;line-height:1.5rem;}samp{font-size:0.85rem;line-height:1.5rem;}abbr{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;}acronym{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;}abbr[title]{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;text-decoration:none;}thead{text-align:left;}td,th{text-align:left;border-bottom:1px solid hsla(0,0%,0%,0.12);font-feature-settings:"tnum";-moz-font-feature-settings:"tnum";-ms-font-feature-settings:"tnum";-webkit-font-feature-settings:"tnum";padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:calc(0.75rem - 1px);}th:first-child,td:first-child{padding-left:0;}th:last-child,td:last-child{padding-right:0;}</style><style data-href="/styles.4b4386a30907411d203f.css" id="gatsby-global-css">p{color:rgba(0,0,0,.71);-webkit-font-smoothing:antialiased}h1,p{padding:0}h1{font-weight:300;font-size:4.2rem}h4{font-size:2.28rem}h4,h5{line-height:110%;margin:1.14rem 0 .912rem}h5{font-size:1.28rem}h6{line-height:110%;margin:1.14rem 0 .912rem}a{color:#7cb342;text-decoration:none}table{border:1px solid #ddd}table tr:nth-child(odd){background-color:#f9f9f9}th{border:solid #ddd;border-width:1px 1px 2px}td,th{padding:8px}td:first-child,th:first-child{padding-left:8px}:not(pre)>code{padding:.1em .25em;border:1px solid rgba(51,51,51,.12);background:#f5f2f0;border-radius:.3em;color:#000;font-family:Inconsolata,Monaco,Consolas,Andale Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.4}blockquote{white-space:pre-wrap;padding:0 20px;margin:20px 0;border-radius:3px;border:1px solid #eee;border-left:5px solid #558b2f}blockquote p{padding:0}*{box-sizing:border-box}code[class*=language-],pre[class*=language-]{color:#657b83;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{background:#073642}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background-color:#fdf6e3}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#93a1a1}.token.punctuation{color:#586e75}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#268bd2}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string,.token.url{color:#2aa198}.token.entity{color:#657b83;background:#eee8d5}.token.atrule,.token.attr-value,.token.keyword{color:#859900}.token.class-name,.token.function{color:#b58900}.token.important,.token.regex,.token.variable{color:#cb4b16}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}#carbonads{text-align:center;font-size:14px;line-height:1.5}#carbonads,#carbonads span{display:block;overflow:hidden}.carbon-img,.carbon-text{display:block}.carbon-text{margin-bottom:.5em}.carbon-poweredby{display:block;color:hsla(0,0%,100%,.6);font-size:9px}#carbonads a{color:#fff}</style><meta name="generator" content="Gatsby 2.32.13"/><style id="glamor-styles">.css-pjwtby,[data-css-pjwtby]{color:#fff;font-weight:bold;}.css-ubgfn1,[data-css-ubgfn1]{margin:0 auto;font-size:10.5px;text-align:center;}@media(min-width: 1000px){.css-ubgfn1,[data-css-ubgfn1]{text-align:left;width:85%;font-size:14.5px;}}.css-13t5ecd,[data-css-13t5ecd]{background-color:#558b2f;color:rgba(255,255,255, 0.8);font-weight:300;min-height:50px;line-height:50px;padding:10px 0px;}.css-1bgbwga,[data-css-1bgbwga]{width:30px;height:30px;flex:1;margin:0;-webkit-flex:1;}.css-1xamfmm,[data-css-1xamfmm]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;justify-content:center;align-items:center;width:56px;height:56px;background-color:#33691e;position:absolute;left:50%;top:50%;cursor:pointer;transform:translate(-50%, -50%);border-radius:50%;visibility:visible;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);-webkit-box-pack:center;-webkit-justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-webkit-transform:translate(-50%, -50%);}.css-ghzv10,[data-css-ghzv10]{position:absolute;top:344px;left:344px;width:112px;height:112px;border-radius:50%;z-index:100001;}.css-ghzv10:before,[data-css-ghzv10]:before{content:" ";background-color:#fff;border-radius:50%;position:absolute;width:100%;height:100%;opacity:0;transition:transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);transform:scale(0);-webkit-transition:transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);-moz-transition:transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);-webkit-transform:scale(0);}.css-j9z7vu,[data-css-j9z7vu]{color:#fff;}.css-13mo65m,[data-css-13mo65m]{padding:4px 8px;margin:10px;border:2px solid #fff;color:#fff;display:inline-block;cursor:pointer;}.css-1vokce0,[data-css-1vokce0]{width:456px;height:600px;right:56px;bottom:56px;padding:56px;position:fixed;left:0;color:#fff;}.css-1f0dz3x,[data-css-1f0dz3x]{background-color:#33691e;border-radius:50%;opacity:0;transition:transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);transform:scale(0);position:absolute;width:100%;height:100%;z-index:100000;-webkit-transition:transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);-moz-transition:transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);-webkit-transform:scale(0);}.css-101ncaf,[data-css-101ncaf]{width:800px;height:800px;position:fixed;z-index:1000;right:-348.4px;bottom:-327.2px;visibility:hidden;transition:visibility 0.3s cubic-bezier(0.42, 0, 0.58, 1);-webkit-transition:visibility 0.3s cubic-bezier(0.42, 0, 0.58, 1);-moz-transition:visibility 0.3s cubic-bezier(0.42, 0, 0.58, 1);}.css-1ugxpw4,[data-css-1ugxpw4]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;}.css-5c16li,[data-css-5c16li]{color:rgba(255, 255, 255, 0.6);font-weight:300;}.css-do1ttf,[data-css-do1ttf]{margin-right:5px;}.css-x4qlt9,[data-css-x4qlt9]{display:none;}@media(min-width: 1000px){.css-x4qlt9,[data-css-x4qlt9]{display:block;}}.css-1bc80tr,[data-css-1bc80tr]{margin-left:5px;}.css-snorl5,[data-css-snorl5]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;justify-content:center;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;}@media(min-width: 1000px){.css-snorl5,[data-css-snorl5]{flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;}}.css-1iye334,[data-css-1iye334]{padding:4px 8px;margin:10px;border:2px solid #fff;color:#fff;}.css-1a7f6ea,[data-css-1a7f6ea]{margin:20px;}.css-eooitl,[data-css-eooitl]{flex:1;background-color:#558b2f;padding:10px 20px;border-radius:10px;margin-bottom:10px;-webkit-flex:1;}@media(min-width: 1000px){.css-eooitl,[data-css-eooitl]{margin-right:5px;}}.css-1cdtjgq,[data-css-1cdtjgq]{background-color:#7cb342;text-shadow:0 1px 0 rgba(23, 31, 35, 0.5);color:#fff;padding:8px 16px;border-radius:3px;width:100%;white-space:pre-wrap;}.css-a3bf9n,[data-css-a3bf9n]{margin-top:25px;}.css-tcdoe0,[data-css-tcdoe0]{text-align:center;margin-top:10px;}.css-1g5c9n4,[data-css-1g5c9n4]{flex:1;background-color:#558b2f;padding:10px 20px;border-radius:10px;text-align:left;margin-bottom:10px;-webkit-flex:1;}@media(min-width: 1000px){.css-1g5c9n4,[data-css-1g5c9n4]{margin-left:5px;margin-right:5px;}}.css-wf67nj,[data-css-wf67nj]{height:35px;}.css-6ewp77,[data-css-6ewp77]{flex:1;background-color:#558b2f;padding:10px 20px;border-radius:10px;text-align:left;margin-bottom:10px;-webkit-flex:1;}@media(min-width: 1000px){.css-6ewp77,[data-css-6ewp77]{margin-left:5px;}}.css-1ph8tsc,[data-css-1ph8tsc]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;}@media(min-width: 1000px){.css-1ph8tsc,[data-css-1ph8tsc]{flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;}}.css-j1h831,[data-css-j1h831]{max-width:960px;color:#fff;margin:0 auto;text-align:center;align-self:center;-webkit-align-self:center;}.css-m01zzr,[data-css-m01zzr]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-grow:1;-webkit-flex-grow:1;}.css-1b3u4ec,[data-css-1b3u4ec]{background:#558b2f;background-image:-webkit-linear-gradient(0deg, #558b2f, #7cb342); background-image: -moz-linear-gradient(0deg, #558b2f, #7cb342); background-image: linear-gradient(0deg, #558b2f, #7cb342);min-height:100vh;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;}</style><script id="glamor-ids">
|
|
// <![CDATA[
|
|
window._glamor = ["pjwtby","ubgfn1","13t5ecd","1bgbwga","1xamfmm","ghzv10","j9z7vu","13mo65m","1vokce0","1f0dz3x","101ncaf","1ugxpw4","5c16li","do1ttf","x4qlt9","1bc80tr","snorl5","1iye334","1a7f6ea","eooitl","1cdtjgq","a3bf9n","tcdoe0","1g5c9n4","wf67nj","6ewp77","1ph8tsc","j1h831","m01zzr","1b3u4ec"]
|
|
// ]]>
|
|
</script><title data-react-helmet="true">html2canvas - Screenshots with JavaScript</title><link href="//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" type="text/css"/><link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"/><link as="script" rel="preload" href="/webpack-runtime-8c7ceb5394accec04fba.js"/><link as="script" rel="preload" href="/framework-74adaf5887ce1f16aa36.js"/><link as="script" rel="preload" href="/app-532b4c1a6df06237bd2e.js"/><link as="script" rel="preload" href="/styles-7d4153d260c0197f0043.js"/><link as="script" rel="preload" href="/85a5d5dc-c34a5c2643b8b79df2f6.js"/><link as="script" rel="preload" href="/commons-715ad6f0da92704b0fb1.js"/><link as="script" rel="preload" href="/component---src-pages-index-js-ac7dfc2c623f77e8734c.js"/><link as="fetch" rel="preload" href="/page-data/index/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="css-1b3u4ec"><div class="css-m01zzr"><div class="css-j1h831"><div class="css-1ugxpw4"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNTZweCIgaGVpZ2h0PSI1NnB4IiB2aWV3Qm94PSIwIDAgNTYgNTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iUHJvcG9zYWwtLS1TdWtodW12aXQtU2V0IiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00LDEyIEw0LDQ2IEwzNy4wMjMyNTU4LDQ2IEwzNy4wMjMyNTU4LDEyIEw0LDEyIFogTTIsOCBMMzkuMDIzMjU1OCw4IEM0MC4xMjc4MjUzLDggNDEuMDIzMjU1OCw4Ljg5NTQzMDUgNDEuMDIzMjU1OCwxMCBMNDEuMDIzMjU1OCw0OCBDNDEuMDIzMjU1OCw0OS4xMDQ1Njk1IDQwLjEyNzgyNTMsNTAgMzkuMDIzMjU1OCw1MCBMMiw1MCBDMC44OTU0MzA1LDUwIDEuMzUyNzA3NWUtMTYsNDkuMTA0NTY5NSAtMS4yMzI1OTUxNmUtMzEsNDggTC0yLjIyMDQ0NjA1ZS0xNiwxMCBDLTMuNTczMTUzNTVlLTE2LDguODk1NDMwNSAwLjg5NTQzMDUsOCAyLDggWiIgaWQ9IlJlY3RhbmdsZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMiw0IEwxMiwzOCBMNDYsMzggTDQ2LDQgTDEyLDQgWiBNMTAsMCBMNDgsMCBDNDkuMTA0NTY5NSwtMi4wMjkwNjEyNWUtMTYgNTAsMC44OTU0MzA1IDUwLDIgTDUwLDQwIEM1MCw0MS4xMDQ1Njk1IDQ5LjEwNDU2OTUsNDIgNDgsNDIgTDEwLDQyIEM4Ljg5NTQzMDUsNDIgOCw0MS4xMDQ1Njk1IDgsNDAgTDgsMiBDOCwwLjg5NTQzMDUgOC44OTU0MzA1LDIuMDI5MDYxMjVlLTE2IDEwLDAgWiIgaWQ9IlJlY3RhbmdsZS1Db3B5Ij48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=" alt="html2canvas"/><h1>html2canvas</h1></div><h4 class="css-5c16li">Screenshots with JavaScript</h4><div class="css-snorl5"><div class="css-x4qlt9"><h4>HTML</h4><div class="css-do1ttf"><div class="gatsby-highlight">
|
|
<pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>capture<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #f5da55</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> </span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
</code></pre>
|
|
</div></div></div><div class="css-x4qlt9"><h4>JavaScript</h4><div class="css-1bc80tr"><div class="gatsby-highlight">
|
|
<pre class="language-javascript"><code><span class="token function">html2canvas</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#capture"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>canvas <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>canvas<span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre>
|
|
</div></div></div></div><div class="css-1a7f6ea"><a href="/documentation" class="css-1iye334">Try it out</a><a class="css-1iye334" href="/documentation">Documentation</a></div><div class="css-1ph8tsc"><div class="css-eooitl"><div></div></div><div class="css-1g5c9n4"><h6>Install NPM</h6><code class="css-1cdtjgq">npm install --save html2canvas</code><h6>Install Yarn</h6><code class="css-1cdtjgq">yarn add html2canvas</code><div class="css-a3bf9n"><a href="/dist/html2canvas.js" class="css-1iye334">html2canvas.js</a><a href="/dist/html2canvas.min.js" class="css-1iye334">html2canvas.min.js</a></div><div class="css-tcdoe0">45<!-- -->kb gzipped</div></div><div class="css-6ewp77"><h5>Connect</h5><div class="css-wf67nj"><iframe title="Github" src="https://ghbtns.com/github-btn.html?user=niklasvh&repo=html2canvas&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="160px" height="30px"></iframe></div><div><a class="twitter-follow-button" href="https://twitter.com/niklasvh" data-show-screen-name="false" data-size="large">Follow @niklasvh</a></div></div></div></div></div><footer class="css-13t5ecd"><div class="css-ubgfn1">Created by<!-- --> <a href="https://hertzen.com" class="css-pjwtby">Niklas von Hertzen</a>. Licensed under the MIT License.</div></footer></div><div data-html2canvas-ignore="true"><div class="css-101ncaf"><div class="css-ghzv10"><div id="tryhtml2canvas" class="css-1xamfmm"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMuMiIvPgogICAgPHBhdGggZD0iTTkgMkw3LjE3IDRINGMtMS4xIDAtMiAuOS0yIDJ2MTJjMCAxLjEuOSAyIDIgMmgxNmMxLjEgMCAyLS45IDItMlY2YzAtMS4xLS45LTItMi0yaC0zLjE3TDE1IDJIOXptMyAxNWMtMi43NiAwLTUtMi4yNC01LTVzMi4yNC01IDUtNSA1IDIuMjQgNSA1LTIuMjQgNS01IDV6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=" alt="Try html2canvas" class="css-1bgbwga"/></div></div><div class="css-1f0dz3x"><div class="css-1vokce0"><h4>Try out html2canvas</h4><p class="css-j9z7vu">Test out html2canvas by rendering the viewport from the current page.</p><div class="css-13mo65m">Capture</div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
|
|
|
|
|
|
if(true) {
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
}
|
|
if (typeof ga === "function") {
|
|
ga('create', 'UA-188600-10', 'auto', {});
|
|
|
|
|
|
|
|
}
|
|
</script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-4f949977b89e47e8576f.js"],"app":["/app-532b4c1a6df06237bd2e.js"],"component---src-pages-404-js":["/component---src-pages-404-js-0c4f1c878dc0fb27bca7.js"],"component---src-pages-index-js":["/component---src-pages-index-js-ac7dfc2c623f77e8734c.js"],"component---src-templates-docs-js":["/component---src-templates-docs-js-95b487188feee354982e.js"]};/*]]>*/</script><script src="/polyfill-4f949977b89e47e8576f.js" nomodule=""></script><script src="/component---src-pages-index-js-ac7dfc2c623f77e8734c.js" async=""></script><script src="/commons-715ad6f0da92704b0fb1.js" async=""></script><script src="/85a5d5dc-c34a5c2643b8b79df2f6.js" async=""></script><script src="/styles-7d4153d260c0197f0043.js" async=""></script><script src="/app-532b4c1a6df06237bd2e.js" async=""></script><script src="/framework-74adaf5887ce1f16aa36.js" async=""></script><script src="/webpack-runtime-8c7ceb5394accec04fba.js" async=""></script></body></html> |