JS Implementation html screenshot generation image

no gorgeous opening, straight into the theme, this is the main essay style. essays are not only a daily work accumulation, but also can be understood as a working note, convenient to use in the future quickly can be found.

First, a demand scenario: Customized Web page to the server-side save, the user concerned about the public number automatically reply to the .

Presumably JS implementation of the Web page, everyone's first idea is to turn the Web page into a canvas and then from canvas to Base64 pictures. Yes, my ideas are the same, in the actual development process of various trial and error, research also verified that the program is the best and most convenient HTML-to-picture scheme (definitely!). Not one). Then the plan is determined, the general idea of implementation can be done in that direction. Because the development time is limited, here we do not own handwriting Html2canvas process, the fastest speed of course is to find ready-made plug-ins, through the contrast between the plug-in, not the loss of style is the picture is lost, what screen ah?

Here to recommend a I used a good plugin:html2canvas.js GitHub Link: https://github.com/niklasvh/html2canvas

Key code:

　　

<!--introducing Html2canvas library--><script src= "Game/js/html2canvas.min.js" ></script><script>     Html2canvas (document.body). Then (function(canvas) {    var base64 = Canvas.todataurl ("Image/png");        Console.log (base64); // generate a local base64 picture     }); </script>

Of course, the above is not a complete demo! Some of your friends may find that they are incomplete or report cross-domain errors.

This is because of the local case in your page pictures or other Web images and your current project is not under a domain name, how to solve it? The network image or not under the same domain name of the picture into Base64 local images, and then proceed.

Here's how:

<script>    function  Image2Base64(img) {         var canvas = Document.createelement ("Canvas");          = img.width;          = img.height;          var ctx = Canvas.getcontext ("2d");          0, 0, Img.width, img.height);          var dataurl = Canvas.todataurl ("image/png");          return Dataurl      }</script>

JS implementation HTML generated image