html2canvas/component---src-pages-index-js-ac7dfc2c623f77e8734c.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{"0j/6":function(n,a,t){},RXBc:function(n,a,t){"use strict";t.r(a),function(n){t("q1tI");var e=t("+ZDr"),s=t.n(e),c=t("jL6k"),i=t.n(c),l=t("Bl7J"),p=t("W/9C"),o=t("W6KX"),r={backgroundColor:"#7cb342",textShadow:"0 1px 0 rgba(23, 31, 35, 0.5)",color:"#fff",padding:"8px 16px",borderRadius:"3px",width:"100%",whiteSpace:"pre-wrap"},u={padding:"4px 8px",margin:"10px",border:"2px solid #fff",color:"#fff"};a.default=function(a){var t=a.data;return n.createElement(l.a,null,n.createElement("div",{css:{background:"#558b2f",backgroundImage:"linear-gradient(0deg, #558b2f, #7cb342)",minHeight:"100vh",display:"flex",flexDirection:"column"}},n.createElement("div",{css:{display:"flex",flexGrow:1}},n.createElement("div",{css:{maxWidth:960,color:"#fff",margin:"0 auto",textAlign:"center",alignSelf:"center"}},n.createElement("div",{css:{display:"flex",alignItems:"center",justifyContent:"center"}},n.createElement("img",{src:i.a,alt:"html2canvas"}),n.createElement("h1",null,"html2canvas")),n.createElement("h4",{css:{color:"rgba(255, 255, 255, 0.6)",fontWeight:300}},"Screenshots with JavaScript"),n.createElement("div",{css:{display:"flex",justifyContent:"center",flexDirection:"column","@media(min-width: 1000px)":{flexDirection:"row"}}},n.createElement("div",{css:{display:"none","@media(min-width: 1000px)":{display:"block"}}},n.createElement("h4",null,"HTML"),n.createElement("div",{css:{marginRight:"5px"},dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight">\n      <pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>\n</code></pre>\n      </div>'}})),n.createElement("div",{css:{display:"none","@media(min-width: 1000px)":{display:"block"}}},n.createElement("h4",null,"JavaScript"),n.createElement("div",{css:{marginLeft:"5px"},dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight">\n      <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">=&gt;</span> <span class="token punctuation">{</span>\n    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>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre>\n      </div>'}}))),n.createElement("div",{css:{margin:"20px"}},n.createElement("a",{href:"/documentation",css:u,onClick:function(n){n.preventDefault(),document.querySelector("#tryhtml2canvas").click()}},"Try it out"),n.createElement(s.a,{to:"/documentation",css:u},"Documentation")),n.createElement("div",{css:{display:"flex",flexDirection:"column","@media(min-width: 1000px)":{flexDirection:"row"}}},n.createElement("div",{css:{flex:1,backgroundColor:"#558b2f",padding:"10px 20px",borderRadius:"10px",marginBottom:"10px","@media(min-width: 1000px)":{marginRight:"5px"}}},n.createElement(o.a,null)),n.createElement("div",{css:{flex:1,backgroundColor:"#558b2f",padding:"10px 20px",borderRadius:"10px",textAlign:"left",marginBottom:"10px","@media(min-width: 1000px)":{marginLeft:"5px",marginRight:"5px"}}},n.createElement("h6",null,"Install NPM"),n.createElement("code",{css:r},"npm install --save html2canvas"),n.createElement("h6",null,"Install Yarn"),n.createElement("code",{css:r},"yarn add html2canvas"),n.createElement("div",{css:{marginTop:"25px"}},n.createElement("a",{href:"/dist/html2canvas.js",css:u},"html2canvas.js"),n.createElement("a",{href:"/dist/html2canvas.min.js",css:u},"html2canvas.min.js")),n.createElement("div",{css:{textAlign:"center",marginTop:"10px"}},Math.round(t.site.siteMetadata.packageSize/1024),"kb gzipped")),n.createElement("div",{css:{flex:1,backgroundColor:"#558b2f",padding:"10px 20px",borderRadius:"10px",textAlign:"left",marginBottom:"10px","@media(min-width: 1000px)":{marginLeft:"5px"}}},n.createElement("h5",null,"Connect"),n.createElement("div",{css:{height:"35px"}},n.createElement("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"})),n.createElement("div",null,n.createElement("a",{className:"twitter-follow-button",href:"https://twitter.com/niklasvh","data-show-screen-name":"false","data-size":"large"},"Follow @niklasvh")))))),n.createElement(p.a,null)))}}.call(this,t("iMUK"))},"W/9C":function(n,a,t){"use strict";(function(n){t("q1tI");a.a=function(){return n.createElement("footer",{css:{backgroundColor:"#558b2f",color:"rgba(255,255,255, 0.8)",fontWeight:300,minHeight:"50px",lineHeight:"50px",padding:"10px 0px"}},n.createElement("div",{css:{margin:"0 auto",fontSize:"10.5px",textAlign:"center","@media(min-width: 1000px)":{textAlign:"left",width:"85%",fontSize:"14.5px"}}},"Created by"," ",n.createElement("a",{href:"https://hertzen.com",css:{color:"#fff",fontWeight:"bold"}},"Niklas von Hertzen"),". Licensed under the MIT License."))}}).call(this,t("iMUK"))},W6KX:function(n,a,t){"use strict";(function(n){t.d(a,"a",(function(){return i}));var e=t("wx14"),s=t("dI71"),c=t("q1tI"),i=(t("0j/6"),function(a){function t(){return a.apply(this,arguments)||this}Object(s.a)(t,a);var c=t.prototype;return c.componentDidMount=function(){if(this.container){var n=document.createElement("script");n.src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html2canvashertzencom",n.async=!0,n.id="_carbonads_js",this.container.appendChild(n)}},c.render=function(){var a=this;return n.createElement("div",Object(e.a)({},this.props,{ref:function(n){a.container=n}}))},t}(c.Component))}).call(this,t("iMUK"))},jL6k:function(n,a){n.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNTZweCIgaGVpZ2h0PSI1NnB4IiB2aWV3Qm94PSIwIDAgNTYgNTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iUHJvcG9zYWwtLS1TdWtodW12aXQtU2V0IiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00LDEyIEw0LDQ2IEwzNy4wMjMyNTU4LDQ2IEwzNy4wMjMyNTU4LDEyIEw0LDEyIFogTTIsOCBMMzkuMDIzMjU1OCw4IEM0MC4xMjc4MjUzLDggNDEuMDIzMjU1OCw4Ljg5NTQzMDUgNDEuMDIzMjU1OCwxMCBMNDEuMDIzMjU1OCw0OCBDNDEuMDIzMjU1OCw0OS4xMDQ1Njk1IDQwLjEyNzgyNTMsNTAgMzkuMDIzMjU1OCw1MCBMMiw1MCBDMC44OTU0MzA1LDUwIDEuMzUyNzA3NWUtMTYsNDkuMTA0NTY5NSAtMS4yMzI1OTUxNmUtMzEsNDggTC0yLjIyMDQ0NjA1ZS0xNiwxMCBDLTMuNTczMTUzNTVlLTE2LDguODk1NDMwNSAwLjg5NTQzMDUsOCAyLDggWiIgaWQ9IlJlY3RhbmdsZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMiw0IEwxMiwzOCBMNDYsMzggTDQ2LDQgTDEyLDQgWiBNMTAsMCBMNDgsMCBDNDkuMTA0NTY5NSwtMi4wMjkwNjEyNWUtMTYgNTAsMC44OTU0MzA1IDUwLDIgTDUwLDQwIEM1MCw0MS4xMDQ1Njk1IDQ5LjEwNDU2OTUsNDIgNDgsNDIgTDEwLDQyIEM4Ljg5NTQzMDUsNDIgOCw0MS4xMDQ1Njk1IDgsNDAgTDgsMiBDOCwwLjg5NTQzMDUgOC44OTU0MzA1LDIuMDI5MDYxMjVlLTE2IDEwLDAgWiIgaWQ9IlJlY3RhbmdsZS1Db3B5Ij48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo="}}]);
//# sourceMappingURL=component---src-pages-index-js-ac7dfc2c623f77e8734c.js.map