html2canvas.js

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>


html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

Install NPM

npm install –save html2canvas

Install Yarn

yarn add html2canvas

支持的浏览器

Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Safari 6+

使用过程中常见问题及解决方案

1.生成图片的HTML尽量使用而不使用背景图
2.解决跨域图片不显示的问题配置{ allowTaint: true, useCORS: true }
3.图片不透明的问题可以配置{ backgroundColor: “transparent” }

configuration Options

Name	Default	Description
allowTaint	false	Whether to allow cross-origin images to taint the canvas
backgroundColor	#ffffff	Canvas background color, if none is
canvas null	Existing canvas element to use as a base for drawing	on
foreignObjectRendering	false	Whether to use ForeignObject rendering if the browser supports it
imageTimeout	15000	Timeout for loading an image (in milliseconds). Set to 0 to disable timeout.
ignoreElements	(element) => false	Predicate function which removes the matching elements from the render.
logging	true	Enable logging for debug purposes
onclone	null	Callback function which is called when the Document has
proxy	null	Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won’t be loaded.
removeContainer	true	Whether to cleanup the cloned DOM elements html2canvas creates temporarily
scale	window.devicePixelRatio	The scale to use for rendering. Defaults to the browsers device pixel ratio.
useCORS	false	Whether to attempt to load images from a server using CORS
width	Element width	The width of the canvas
height	Element height	The height of the canvas
x	Element x-offset	Crop canvas x-coordinate
y	Element y-offset	Crop canvas y-coordinate
scrollX	Element scrollX	The x-scroll position to used when rendering element, (for example if the Element uses position: fixed)
scrollY	Element scrollY	The y-scroll position to used when rendering element, (for example if the Element uses position: fixed)
windowWidth	Window.innerWidth	Window width to use when rendering Element, which may affect things like Media queries
windowHeight	Window.innerHeight	Window height to use when rendering Element, which may affect things like Media queries
If you wish to exclude certain Elements from getting rendered, you can add a data-html2canvas-ignore attribute to those elements and html2canvas will exclude them from the rendering.

文档更新时间: 2021-10-05 05:54 作者：admin

官网

npm

github

Install NPM

Install Yarn

支持的浏览器

使用过程中常见问题及解决方案

configuration Options