How to use html2canvas to convert HTML code into images

Convert code to image using

html2canvas is a very famous open source library for taking screenshots of web pages from browsers. It is easy to use and has powerful functions.

Using html2canvas

The use of html2canvas is very simple. It is so simple that you only need to pass in a DOM element and then get the canvas through the callback:

There are two points to note when using it in practice:

1.html2canvas generates canvas image content by parsing the actual style of the element, so it has requirements for the actual layout and visual display of the element. If you want to take a complete screenshot, it is best to separate the element from the document flow (for example, position: absolute)

2. The default generated canvas image is very blurry on retina devices. Processing it to 2 times the image can solve this problem:

var w = $("#code").width();  
var h = $("#code").height(); //Set the width and height of the canvas to twice the width and height of the container var canvas = document.createElement("canvas");  
    canvas.width = w * 2;  
    canvas.height = h * 2;  
    canvas.style.width = w + "px";  
    canvas.style.height = h + "px";  
var context = canvas.getContext("2d"); //Then scale the canvas and enlarge the image by twice and draw it on the canvas context.scale(2,2);  
    html2canvas(document.querySelector("#code"), {          
canvas: canvas,         
 onrendered: function(canvas) 
{ ...        
  }    
});

Practical examples of using html2canvas

1.html code structure

<section class="share_popup" id="html2canvas">  
<p>html2canvas is very easy to use. It only requires passing in a DOM element and then getting the canvas through a callback</p>  
<p><img src="1.jpg"></p>  
<p>html2canvas is very easy to use. It only requires passing in a DOM element and then getting the canvas through a callback</p>  
 </section>

2.js code structure

var str = $('#html2canvas');  
//console.log(str);  
html2canvas([str.get(0)], {  
    onrendered: function (canvas) {  
        var image = canvas.toDataURL("image/png");  
        var pHtml = "<img src="+image+" />";  
        $('#html2canvas').html(pHtml);  
    }  
});

Summarize

The above is the editor's introduction to the use of html2canvas to convert HTML code into pictures. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!