Html2canvas the functionality of the page by getting style information for the DOM and elements of the page and rendering it into a canvas picture.
Because each browser renders the page differently, the resulting picture is not the same.
Environmental Requirements : JQuery
compatibility : Firefox 3.5+, Chrome, Opera, IE9
Official homepage : http://html2canvas.hertzen.com/
Test the resulting picture effect some elements of the style are not fully displayed
Test code:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metaname= "Layout"content= "Main">5 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> 6 <Scripttype= "Text/javascript"src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></Script>7 <Scripttype= "Text/javascript"src= "Http://html2canvas.hertzen.com/build/html2canvas.js"></Script>8 9 <Scripttype= "Text/javascript" >Ten $ (document). Ready (function(){ One $(". example1"). On ("Click", function(event) { A Event.preventdefault (); - Html2canvas (document.body, { - Allowtaint:true, the tainttest:false, - onrendered:function(canvas) { - canvas.id= "MyCanvas"; - //document.body.appendChild (canvas); + //generate base64 picture data - varDataurl=Canvas.todataurl (); + varnewimg=Document.createelement ("img"); A newimg.src=Dataurl; at Document.body.appendChild (newimg); - } - }); - }); - - }); in - </Script> to </Head> + <Body> - the hello! * <Divclass=""style= "Background-color: #abc;"> $ Computer Heaven Test HTML5 pagePanax Notoginseng <BR>jsjtt.com - </Div> the + <TextAreaID= "TextArea"Col= " the"rows= "Ten" ></TextArea> A <inputclass= "Example1"type= "button"value= "button"> the The build interface is as follows: + </Body> - </HTML>
Describes a problem that occurs during the test if you call Todataurl on a page that references a cross-domain picture file
Securityerror:the operation is insecure.
Workaround: Set the header on a cross-domain server to allow cross-domain requests
Access-control-allow-origin: * access-control-allow-credentials:true
Transferred from: http://www.jsjtt.com/webkaifa/html5/2013-10-29/42.html
HTML5 realization of page screenshot page generated pictures (graphic)