html2canvas/configuration/index.html

132 lines
38 KiB
HTML
Raw Normal View History

<!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","vqxx84","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">Options - html2canvas</title><meta data-react-helmet="true" name="description" content="Explore the different configuration options available for html2canvas"/><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/configuration/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+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLDQgTDEyLDM4IEw0NiwzOCBMNDYsNCBMMTIsNCBaIE0xMCwwIEw0OCwwIEM0OS4xMDQ1Njk1LC0yLjAyOTA2MTI1ZS0xNiA1MCwwLjg5NTQzMDUgNTAsMiBMNTAsNDAgQzUwLDQxLjEwNDU2OTUgNDkuMTA0NTY5NSw0MiA0OCw0MiBMMTAsNDIgQzguODk1NDMwNSw0MiA4LDQxLjEwNDU2OTUgOCw0MCBMOCwyIEM4LDAuODk1NDMwNSA4Ljg5NTQzMDUsMi4wMjkwNjEyNWUtMTYgMTAsMCBaIiBpZD0iUmVjdGFuZ2xlLUNvcHkiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04MS4wNSwyNi42IEw2NC42NSwyNi42IEw2NC42NSw0MiBMNjAuMzUsNDIgTDYwLjM1LDguMyBMNjQuNjUsOC4zIEw2NC42NSwyMi42IEw4MS4wNSwyMi42IEw4MS4wNSw4LjMgTDg1LjM1LDguMyBMODUuMzUsNDIgTDgxLjA1LDQyIEw4MS4wNSwyNi42IFogTTEwNC4zNSwxMi4yNSBMMTA0LjM1LDQyIEwxMDAuMDUsNDIgTDEwMC4wNSwxMi4yNSBMODkuODUsMTIuMyBMODkuODUsOC4zIEwxMTQuNTUsOC4zIEwxMTQuNTUsMTIuMyBMMTA0LjM1LDEyLjI1IFogTTEzMi41NSwzNi41NSBMMTI1LjM1LDIwLjQgQzEyNC45NDk5OTgsMTkuNDk5OTk1NSAxMjQuNTU4MzM1LDE4LjU4MzMzOCAxMjQuMTc1LDE3LjY1IEMxMjMuNzkxNjY1LDE2LjcxNjY2MiAxMjMuNDE2NjY4LDE1LjYzMzMzOTUgMTIzLjA1LDE0LjQgTDEyMi45NSwxNC40IEMxMjMuMTE2NjY4LDE1LjkwMDAwNzUgMTIzLjIyNSwxNy4yODMzMjcgMTIzLjI3NSwxOC41NSBDMTIzLjMyNSwxOS44MTY2NzMgMTIzLjM1LDIwLjc5OTk5NjUgMTIzLjM1LDIxLjUgTDEyMy4zNSw0MiBMMTE5LjA1LDQyIEwxMTkuMDUsOC4zIEwxMjQuMjUsOC4zIEwxMzIuMiwyNi4yNSBDMTMyLjg2NjY3LDI3LjY4MzM0MDUgMTMzLjM5OTk5OCwyOC45MjQ5OTQ3IDEzMy44LDI5Ljk3NSBDMTM0LjIwMDAwMiwzMS4wMjUwMDUyIDEzNC41MzMzMzIsMzEuO
<table>
<thead>
<tr>
<th>Name</th>
<th align="center">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>allowTaint</td>
<td align="center"><code class="language-text">false</code></td>
<td>Whether to allow cross-origin images to taint the canvas</td>
</tr>
<tr>
<td>backgroundColor</td>
<td align="center"><code class="language-text">#ffffff</code></td>
<td>Canvas background color, if none is specified in DOM. Set <code class="language-text">null</code> for transparent</td>
</tr>
<tr>
<td>canvas</td>
<td align="center"><code class="language-text">null</code></td>
<td>Existing <code class="language-text">canvas</code> element to use as a base for drawing on</td>
</tr>
<tr>
<td>foreignObjectRendering</td>
<td align="center"><code class="language-text">false</code></td>
<td>Whether to use ForeignObject rendering if the browser supports it</td>
</tr>
<tr>
<td>imageTimeout</td>
<td align="center"><code class="language-text">15000</code></td>
<td>Timeout for loading an image (in milliseconds). Set to <code class="language-text">0</code> to disable timeout.</td>
</tr>
<tr>
<td>ignoreElements</td>
<td align="center"><code class="language-text">(element) =&gt; false</code></td>
<td>Predicate function which removes the matching elements from the render.</td>
</tr>
<tr>
<td>logging</td>
<td align="center"><code class="language-text">true</code></td>
<td>Enable logging for debug purposes</td>
</tr>
<tr>
<td>onclone</td>
<td align="center"><code class="language-text">null</code></td>
<td>Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.</td>
</tr>
<tr>
<td>proxy</td>
<td align="center"><code class="language-text">null</code></td>
<td>Url to the <a href="/proxy/">proxy</a> which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.</td>
</tr>
<tr>
<td>removeContainer</td>
<td align="center"><code class="language-text">true</code></td>
<td>Whether to cleanup the cloned DOM elements html2canvas creates temporarily</td>
</tr>
<tr>
<td>scale</td>
<td align="center"><code class="language-text">window.devicePixelRatio</code></td>
<td>The scale to use for rendering. Defaults to the browsers device pixel ratio.</td>
</tr>
<tr>
<td>useCORS</td>
<td align="center"><code class="language-text">false</code></td>
<td>Whether to attempt to load images from a server using CORS</td>
</tr>
<tr>
<td>width</td>
<td align="center"><code class="language-text">Element</code> width</td>
<td>The width of the <code class="language-text">canvas</code></td>
</tr>
<tr>
<td>height</td>
<td align="center"><code class="language-text">Element</code> height</td>
<td>The height of the <code class="language-text">canvas</code></td>
</tr>
<tr>
<td>x</td>
<td align="center"><code class="language-text">Element</code> x-offset</td>
<td>Crop canvas x-coordinate</td>
</tr>
<tr>
<td>y</td>
<td align="center"><code class="language-text">Element</code> y-offset</td>
<td>Crop canvas y-coordinate</td>
</tr>
<tr>
<td>scrollX</td>
<td align="center"><code class="language-text">Element</code> scrollX</td>
<td>The x-scroll position to used when rendering element, (for example if the Element uses <code class="language-text">position: fixed</code>)</td>
</tr>
<tr>
<td>scrollY</td>
<td align="center"><code class="language-text">Element</code> scrollY</td>
<td>The y-scroll position to used when rendering element, (for example if the Element uses <code class="language-text">position: fixed</code>)</td>
</tr>
<tr>
<td>windowWidth</td>
<td align="center"><code class="language-text">Window.innerWidth</code></td>
<td>Window width to use when rendering <code class="language-text">Element</code>, which may affect things like Media queries</td>
</tr>
<tr>
<td>windowHeight</td>
<td align="center"><code class="language-text">Window.innerHeight</code></td>
<td>Window height to use when rendering <code class="language-text">Element</code>, which may affect things like Media queries</td>
</tr>
</tbody>
</table>
<p>If you wish to exclude certain <code class="language-text">Element</code>s from getting rendered, you can add a <code class="language-text">data-html2canvas-ignore</code> attribute to those elements and html2canvas will exclude them from the rendering.</p></div></div><div class="css-186n67x"><div class="css-v6w6l5"><a class="css-vqxx84" href="/getting-started"><div class="css-yum1y8"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik0yMCAxMUg3LjgzbDUuNTktNS41OUwxMiA0bC04IDggOCA4IDEuNDEtMS40MUw3LjgzIDEzSDIwdi0yeiIvPgo8L3N2Zz4K" alt=""/></div><div><span class="css-h9p8w5">Previous</span><div class="css-rdwjmh">Getting Started</div></div></a><a class="css-400b8p" href="/features"><div><span class="css-h9p8w5">Next</span><div class="css-rdwjmh">Features</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="/configuration/";/*]]>*/</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>