html2canvas-html generated picture picture synthesis -canvas

effect

• html2canvas by pure JS by the line of screenshots of the browser, but the accuracy of the shots to be improved, some css not be identified, so the canvas can not be perfect presentation of the original picture style

---

Supported browsers

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

---

The basic syntax

 // two parameters: the required elements screenshot id, the theme function to be executed after the last canvas canvas screenshot returned 
 html2canvas (document.getElementById ( 'ID')) the then (. Function (Canvas) {Document. body.appendChild (canvas);});

Available parameters

parameter name	Types of	Defaults	description
allowTaint	boolean	false	Whether to allow cross-origin images to taint the canvas---允许跨域
background	string	#fff	Canvas background color, if none is specified in DOM. Set undefined for transparent background color --- canvas, if no default transparent
height	number	null	Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度设定
letterRendering	boolean	false	Whether to render each letter seperately. Necessary if letter-spacing is used .--- useful word spacing is provided when
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.---代理地址
taintTest	boolean	true	Whether to test each image if it taints the canvas before drawing them --- whether before rendering test pictures
timeout	number	0	Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout .--- image loading delay, default delay is 0 milliseconds
width	number	null	Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas宽度
useCORS	boolean	false	Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy-- this I do not know why the

 

 

Please Fudawuqi environment View

Generation after:

html generate canvas canvas.toDataURL generate base64 Pictures

FIG small bottom 4, since the cross-domain, two can not be generated, is provided to allow cross-domain can be generated in FIG.

 

 

    html2canvas (document.getElementById ( 'htmlDom' ), { 
        useCORS: to true , // set this property, image request headband Access-Control-Allow-Origin: * may be generated, if images with 301 requests jump is not generating 
        onrendered: function (Canvas) { 
            window.can = Canvas; 
            the console.log (Canvas); 
            $ ( "#tarPic") attr ( "the src." , canvas.toDataURL ()) 
            document.body.appendChild (Canvas); 
            }, 
    // width: 300, 
    // height: 300 
    });

 Sample Code: https://files.cnblogs.com/files/zhidong123/htmlToCanvas.rar

https://github.com/zhidong10/solutions/tree/master/htmlToCanvas