Summary of Html2canvas trample pit

requirements: Export an HTML table as a picture, and the table can edit the data itself and fit a variety of screen sizes. Search the Internet, found the Html2canvas, the first to use the latest version of the 0.5.0, and ultimately because the need to support the custom div edit box Wrap selected v0.4.1-7.9.2013.

Start edit box using textarea, later found that textarea can not adapt to the height, the content will appear a lot of scroll bar. This is unacceptable for the need to turn a form into a picture, and it is changed to

Div word-wrap: break-word; }

<contenteditable= "true"></div>

So the first pit appeared, html2canvas0.5 do not recognize ' word-wrap:break-word; ', the content of a lot of directly beyond the edit box ...

Google found 0.4 version support ' Word-wrap:break-word; ' I was drunk, too. Of course, the new version is still progressive, for example, will not appear this problem: ie under the border 1px is not displayed.

Solution:

Reference links

Change version 0.4 source code:

function Getcssint (element, attribute) {    //var val = parseint (getcss (element, attribute), ten); /*    * *    my-change    liyimin*/    var val = parsefloat (Getcss ( element, attribute);     /* *    * my-change end    *    /return//  borders in old IE is Throwing ' medium ' for demo.html  }

In fact, the top is a small pit, the real pit is Html2canvas by default, the width of the screen is the width of the canvas, when the need to convert the HTML beyond the screen range can only convert the current visual part,

A solution was also found at the beginning of the 0.5 release, with the use of Html2canvas to implement a browser

//return Renderdocument (node.ownerdocument, Options, Node.ownerDocument.defaultView.innerWidth, Node.ownerDocument.defaultView.innerHeight, index). Then (function (canvas) {//if (typeof (options.onrendered) = = = "function") {//log ("options.onrendered is deprecated, Html2canvas returns a Promise containing the canvas");//options.onrendered (canvas);//     }//return canvas;// });/***my-change liyimin*/varwidth = options.width! =NULL?Options.width:window.innerWidth;varHeight = options.height! =NULL?Options.height:window.innerHeight;returnRenderdocument (node.ownerdocument, options, width, height, index). Then (function(canvas) {if(typeof(options.onrendered) = = = "function") {log ("Options.onrendered is deprecated, Html2canvas returns a Promise containing the canvas");    Options.onrendered (canvas); }    returnCanvas;});/***my-change End*/

But the actual use of the time is also a variety of problems. For example, width and height set large, rendered canvas is always a variety of blank parts, set up and need to transform the HTML as large and possibly render incomplete, helpless to give up.

Find two or three days finally found a solution, will soon give up AH.

Resolves a problem when content is beyond the screen range to be completely intercepted:

Reference links

< Div >  <  ID= "Previewiframe"  src= "/static/html/preview.html"  frameborder  = "0"></iframe></Div  >

will need to convert the HTML in the preview.html inside, more than how much does not matter the wood has ah.

This is the end:

var $previewIframe =$ (' #previewIframe '); Html2canvas ($previewIframe. Contents (). Find (' # Previewtabeldetail ') [0], {    function(canvas) {   　　var url = 　　 Canvas.todataurl ();  $previewIframe. Contents (). Find (' body '). Append ($ (). attr ("src", url));}   );

Originally intended to download pictures directly, such as:

var $previewIframe =$ (' #previewIframe '); Html2canvas ($previewIframe. Contents (). Find (' # Previewtabeldetail ') [0function(canvas) {   　　var triggerdownload = $ ("<a　　> "). attr (" href ", url). attr (" Download "," table. png "). AppendTo (" Body ");   triggerdownload[0].click ();   Triggerdownload.remove ();   }});

Unfortunately, Android does not support the direct download of the base64 image link, instead of creating images for users to manually save themselves.

Summary of Html2canvas trample pit