How to use html2canvas to write HTML content to Canvas to generate pictures

Editor to share with you how to use html2canvas to write HTML content into Canvas to generate pictures, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Html2canvas.js can take screenshots of all or part of the page directly on the user's browser.

Html2canvas.js can render the page as a Canvas image by reading the DOM and applying different styles to these elements.

It does not require any rendering from the server, and the entire image is created in the client browser. When

When the browser does not support Canvas, Flashcanvas or ExplorerCanvas technology will be used instead of the implementation.

The following browsers can well support the script: Firefox 3.5, Google Chrome, the new version of Opera, browsers above IE9.

Basic grammar

Html2canvas (element, options); html2canvas (document.body, {onrendered: function (canvas) {var url = canvas.toDataURL (); / / Image address document.body.appendChild (canvas);}, width: 300, height: 300

Or use ES6's promise

/ / two parameters: the element id that needs the screenshot, and the function to be executed after the screenshot. Canvas is the last canvas html2canvas (document.getElementById ('id')) returned after the screenshot. Then (function (canvas) {document.body.appendChild (canvas);})

Description of html2canvas basic parameters

AllowTaintbooleanfalseWhether to allow cross-origin images to taint the canvas--- allows cross-domain backgroundstring#fffCanvas background color, if none is specified in DOM. Set undefined for transparent---canvas background color, if you do not set the default transparent heightnumbernullDefine the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas height setting letterRenderingbooleanfalseWhether to render each letter seperately. Necessary if letter-spacing is used.--- uses loggingbooleanfalseWhether to log events in the console.--- to output information proxystringundefinedUrl to the proxy which is to be used for loading cross-origin images in console.log () when setting word spacing. If left empty, cross-origin images won't be loaded.--- proxy address taintTestbooleantrueWhether to test each image if it taints the canvas before drawing them--- whether to test the image timeoutnumber0Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.--- image loading delay, default delay is 0, unit millisecond widthnumbernullDefine the width of the canvas in pixels. If null, renders with full width of the window.---canvas width useCORSbooleanfalseWhether to attempt to load cross-origin images as CORS served, before reverting back to proxy--, I don't know what this is for.

Examples

Html2canvas example function takeScreenshot () {console.log ('test'); html2canvas (document.getElementById (' view'), {onrendered: function (canvas) {document.body.appendChild (canvas);}, / / width: 300, / / height: 300});}