mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
48 lines
35 KiB
HTML
48 lines
35 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
|
||
|
|
// <![CDATA[
|
||
|
|
window._glamor = ["1mdmqlq","jik5x9","mfy564","lrzdxy","siw9z7","1nogye6","cbkqt8","yum1y8","h9p8w5","rdwjmh","400b8p","v6w6l5","186n67x","17jr04x","13ng9m2","1wiofhw","mskeex","1d74qiv","d6pqy","u69ppf","pjwtby","ubgfn1","13t5ecd","1bgbwga","1xamfmm","ghzv10","j9z7vu","13mo65m","1vokce0","1f0dz3x","101ncaf"]
|
||
|
|
// ]]>
|
||
|
|
</script><title data-react-helmet="true">About - html2canvas</title><meta data-react-helmet="true" name="description" content="Learn about html2canvas, how it works and some of its limitations"/><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-templates-docs-js-95b487188feee354982e.js"/><link as="fetch" rel="preload" href="/page-data/documentation/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-u69ppf"><div class="css-mskeex"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik0zIDE4aDE4di0ySDN2MnptMC01aDE4di0ySDN2MnptMC03djJoMThWNkgzeiIvPgo8L3N2Zz4K" alt="Menu" class="css-13ng9m2"/><a href="/"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzkycHgiIGhlaWdodD0iNTZweCIgdmlld0JveD0iMCAwIDM5MiA1NiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJQcm9wb3NhbC0tLVN1a2h1bXZpdC1TZXQiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQsMTIgTDQsNDYgTDM3LjAyMzI1NTgsNDYgTDM3LjAyMzI1NTgsMTIgTDQsMTIgWiBNMiw4IEwzOS4wMjMyNTU4LDggQzQwLjEyNzgyNTMsOCA0MS4wMjMyNTU4LDguODk1NDMwNSA0MS4wMjMyNTU4LDEwIEw0MS4wMjMyNTU4LDQ4IEM0MS4wMjMyNTU4LDQ5LjEwNDU2OTUgNDAuMTI3ODI1Myw1MCAzOS4wMjMyNTU4LDUwIEwyLDUwIEMwLjg5NTQzMDUsNTAgMS4zNTI3MDc1ZS0xNiw0OS4xMDQ1Njk1IC0xLjIzMjU5NTE2ZS0zMSw0OCBMLTIuMjIwNDQ2MDVlLTE2LDEwIEMtMy41NzMxNTM1NWUtMTYsOC44OTU0MzA1IDAuODk1NDMwNSw4IDIsOCBaIiBpZD0iUmVjdGFuZ2xlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLDQgTDEyLDM4IEw0NiwzOCBMNDYsNCBMMTIsNCBaIE0xMCwwIEw0OCwwIEM0OS4xMDQ1Njk1LC0yLjAyOTA2MTI1ZS0xNiA1MCwwLjg5NTQzMDUgNTAsMiBMNTAsNDAgQzUwLDQxLjEwNDU2OTUgNDkuMTA0NTY5NSw0MiA0OCw0MiBMMTAsNDIgQzguODk1NDMwNSw0MiA4LDQxLjEwNDU2OTUgOCw0MCBMOCwyIEM4LDAuODk1NDMwNSA4Ljg5NTQzMDUsMi4wMjkwNjEyNWUtMTYgMTAsMCBaIiBpZD0iUmVjdGFuZ2xlLUNvcHkiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04MS4wNSwyNi42IEw2NC42NSwyNi42IEw2NC42NSw0MiBMNjAuMzUsNDIgTDYwLjM1LDguMyBMNjQuNjUsOC4zIEw2NC42NSwyMi42IEw4MS4wNSwyMi42IEw4MS4wNSw4LjMgTDg1LjM1LDguMyBMODUuMzUsNDIgTDgxLjA1LDQyIEw4MS4wNSwyNi42IFogTTEwNC4zNSwxMi4yNSBMMTA0LjM1LDQyIEwxMDAuMDUsNDIgTDEwMC4wNSwxMi4yNSBMODkuODUsMTIuMyBMODkuODUsOC4zIEwxMTQuNTUsOC4zIEwxMTQuNTUsMTIuMyBMMTA0LjM1LDEyLjI1IFogTTEzMi41NSwzNi41NSBMMTI1LjM1LDIwLjQgQzEyNC45NDk5OTgsMTkuNDk5OTk1NSAxMjQuNTU4MzM1LDE4LjU4MzMzOCAxMjQuMTc1LDE3LjY1IEMxMjMuNzkxNjY1LDE2LjcxNjY2MiAxMjMuNDE2NjY4LDE1LjYzMzMzOTUgMTIzLjA1LDE0LjQgTDEyMi45NSwxNC40IEMxMjMuMTE2NjY4LDE1LjkwMDAwNzUgMTIzLjIyNSwxNy4yODMzMjcgMTIzLjI3NSwxOC41NSBDMTIzLjMyNSwxOS44MTY2NzMgMTIzLjM1LDIwLjc5OTk5NjUgMTIzLjM1LDIxLjUgTDEyMy4zNSw0MiBMMTE5LjA1LDQyIEwxMTkuMDUsOC4zIEwxMjQuMjUsOC4zIEwxMzIuMiwyNi4yNSBDMTMyLjg2NjY3LDI3LjY4MzM0MDUgMTMzLjM5OTk5OCwyOC45MjQ5OTQ3IDEzMy44LDI5Ljk3NSBDMTM0LjIwMDAwMiwzMS4wMjUwMDUyIDEzNC41MzMzMzIsMzEuODgzMzM
|
||
|
|
script and some of its limitations.</p>
|
||
|
|
<h2>Introduction</h2>
|
||
|
|
<p>The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.
|
||
|
|
The screenshot is based on the DOM and as such may not be 100% accurate to the real representation
|
||
|
|
as it does not make an actual screenshot, but builds the screenshot based on the information
|
||
|
|
available on the page.</p>
|
||
|
|
<h2>How it works</h2>
|
||
|
|
<p>The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements
|
||
|
|
there, which it then uses to build a representation of the page. In other words, it does not actually take a
|
||
|
|
screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.</p>
|
||
|
|
<p>As a result, it is only able to render correctly properties that it understands, meaning there are many
|
||
|
|
CSS properties which do not work. For a full list of supported CSS properties, check out the
|
||
|
|
<a href="/features/">supported features</a> page.</p>
|
||
|
|
<h2>Limitations</h2>
|
||
|
|
<p>All the images that the script uses need to reside under the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">same origin</a>
|
||
|
|
for it to be able to read them without the assistance of a <a href="/proxy/">proxy</a>. Similarly, if you have other <code class="language-text">canvas</code>
|
||
|
|
elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.</p>
|
||
|
|
<p>The script doesn't render plugin content such as Flash or Java applets.</p>
|
||
|
|
<h2>Browser compatibility</h2>
|
||
|
|
<p>The library should work fine on the following browsers (with <code class="language-text">Promise</code> polyfill):</p>
|
||
|
|
<ul>
|
||
|
|
<li>Firefox 3.5+</li>
|
||
|
|
<li>Google Chrome</li>
|
||
|
|
<li>Opera 12+</li>
|
||
|
|
<li>IE9+</li>
|
||
|
|
<li>Edge</li>
|
||
|
|
<li>Safari 6+</li>
|
||
|
|
</ul></div></div><div class="css-186n67x"><div class="css-v6w6l5"><a class="css-400b8p" href="/getting-started"><div><span class="css-h9p8w5">Next</span><div class="css-rdwjmh">Getting Started</div></div><div class="css-yum1y8"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik0xMiA0bC0xLjQxIDEuNDFMMTYuMTcgMTFINHYyaDEyLjE3bC01LjU4IDUuNTlMMTIgMjBsOC04eiIvPgo8L3N2Zz4K" alt=""/></div></a></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="/documentation/";/*]]>*/</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-templates-docs-js-95b487188feee354982e.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>
|