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
1 <HTML>2 <Head>3 <Metaname= "Layout"content= "Main">4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> 5 <Scripttype= "Text/javascript"src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></Script>6 <Scripttype= "Text/javascript"src= "Http://html2canvas.hertzen.com/build/html2canvas.js"></Script>7 8 <Scripttype= "Text/javascript" >9 $ (document). Ready (function(){Ten $(". example1"). On ("Click", function(event) { One Event.preventdefault (); A Html2canvas (document.body, { - Allowtaint:true, - tainttest:false, the onrendered:function(canvas) { - canvas.id= "MyCanvas"; - //document.body.appendChild (canvas); - //generate base64 picture data + varDataurl=Canvas.todataurl (); - varnewimg=Document.createelement ("img"); + newimg.src=Dataurl; A Document.body.appendChild (newimg); at } - }); - }); - - }); - in </Script> - </Head> to <Body> + - hello! the <Divclass=""style= "Background-color: #abc;"> * Computer Heaven Test HTML5 page $ <BR>jsjtt.comPanax Notoginseng </Div> - the <TextAreaID= "TextArea"Col= " the"rows= "Ten" ></TextArea> + <inputclass= "Example1"type= "button"value= "button"> A The build interface is as follows: the </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
Original address: Computer Paradise---HTML5 implementation page screenshot page generated image http://www.jsjtt.com/webkaifa/html5/2013-10-29/42.html
HTML5 Realization of page screenshot page generated pictures (graphic)