How to use html2canvas to convert html code into pictures

This article mainly introduces how to use html2canvas to convert html code into images. It has a certain reference value. Now I share it with you. Friends in need can refer to

html2canvas. This is a very The famous open source library for taking screenshots from browser web pages is easy to use and has powerful functions. This

converts code to images using

html2canvas, which is a very famous open source library for taking screenshots from browser web pages. It is very easy to use and very powerful.

Using html2canvas

The use of html2canvas is very simple. It is as simple as passing in a DOM element and then getting the canvas through the callback:

In actual use, there are two points to note:

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

2. The canvas image generated by default is very blurry on the retina device. Processing it into a 2x image can solve this problem. Question:

var w = $("#code").width();  
var h = $("#code").height();//要将 canvas 的宽高设置成容器宽高的 2 倍  
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");//然后将画布缩放，将图像放大两倍画到画布上  
    context.scale(2,2);  
    html2canvas(document.querySelector("#code"), {          
canvas: canvas,         
 onrendered: function(canvas) 
{                ...        
  }    
});

Actual case of using html2canvas

1.html code structure

<section class="share_popup" id="html2canvas">  
<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</p>  
<p><img  src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy"   alt="How to use html2canvas to convert html code into pictures" ></p>  
<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</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="/static/imghwm/default1.png"  data-src="+image+"  class="lazy"   / alt="How to use html2canvas to convert html code into pictures" >";  
        $(&#39;#html2canvas&#39;).html(pHtml);  
    }  
});

The above is the entire content of this article, I hope it will be helpful to everyone Learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

javascript html5 canvas implements a draggable province map of China

HTML5 Drawing lines for basic canvas drawing

The above is the detailed content of How to use html2canvas to convert html code into pictures. For more information, please follow other related articles on the PHP Chinese website!