HTML pages are turned into pictures and available for download

(2) Download material

Html2canvas.min.js:

Canvas2image.js:

Base64.js:

(3) Introduction of JS

<script src= "Your path/html2canvas.min.js" ></script> <script src= "Your Path/canvas2image.js" ></script > <script src= "Your Path/toimg/base64.js" ></script>

(4) Placing the button

<li><a id= "Btnsave" > Convert to Photo </a></li>

(5) JS code, generate pictures, and download

<script>/* Generate Canvas Graphics *///  get button Idvar btnsave = document.getelementbyid ("BtnSave");//   Get the content Idvar content = document.getelementbyid ("content");//  for canvas generation Btnsave.onclick  = function () {Html2canvas (Content, {     onrendered: function ( Canvas)  {     //Add Property      canvas.setattribute (' id ', ' Thecanvas ');  //, read property value          document.getelementbyid (' Images '). appendchild (canvas);          var ocanvas =  document.getelementbyid ("Thecanvas");      /* Auto Save as png*///  get picture resources          var img_data1 = canvas2image.saveaspng (oCanvas,  true). getattribute (' src ');     var save_link = document.createelementns (' Http://www.w3.org/1999/xhtml ', ' A ');save_link.href = img_data1;save_link.download =  "name_img";/* The following is a native save with no format name */var  event = document.createevent (' mouseevents '); event.initmouseevent (' click ', true,  False, window, 0, 0, 0, 0, 0, false, false, false, false,  0, null); Save_link.dispatchevent (event);     }   }); </script>

(6) parsing the JS code

Content: The ID of the image area to generate.

name_img: Download the name of the picture.

(7) Hide the generated pictures, do not display, in the test can be displayed.

<div id= "Images" style= "display:none;" ></div>

HTML pages are turned into pictures and available for download