html2 canvas implements browser screenshots

Using html2canvas to implement browser screenshots must be implemented in a server environment. This article mainly introduces the relevant information about the sample code for using html2canvas to implement browser screenshots. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Function

html2canvas can take screenshots on the browser side through pure JS, but the accuracy of the screenshots needs to be improved, and some css cannot be recognized, so in canvas The original screen style cannot be perfectly rendered

Supported browsers

1. Firefox 3.5+

2. Google Chrome

3. ##Opera 12+

4. IE9+

5. Safari 6+

Basic syntax

##

Available configuration items

Parameter name ##allowTaint boolean false Whether to allow cross-origin images to taint the canvas---allow cross-origin background #string #fff Canvas background color, if none is specified in DOM. Set undefined for transparent---canvas background color , if the default white is not set, I will change it to backgroundColor. height number null Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas height setting letterRendering boolean false Whether to render each letter seperately. Necessary if letter-spacing is used.---Useful when character spacing is set logging boolean false Whether to log events in the console.---Output information in console.log() proxy string undefined Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---Proxy address taintTest boolean true Whether to test each image if it taints the canvas before drawing them---whether to test images before rendering timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---Image loading delay, the default delay is 0, unit milliseconds width number null Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas width useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy--Cross-domain proxy Set image format

Type	Default value	Description

1. Extract image metadata directly from canvas

2. Change mime-type to image/octet-stream, forcing the browser to download directly

3. Download the image to the local

Related recommendations:

Sample of HTML5 browser screenshot

The above is the detailed content of html2 canvas implements browser screenshots. For more information, please follow other related articles on the PHP Chinese website!