Comment utiliser html2canvas pour convertir du code HTML en images

Cet article présente principalement comment utiliser html2canvas pour convertir du code html en images. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent se référer à

html2canvas, c'est très utile. La célèbre bibliothèque open source permettant de prendre des captures d'écran à partir des pages Web du navigateur est facile à utiliser et possède des fonctions puissantes. Ce

convertit le code en image à l'aide de

html2canvas, qui est une bibliothèque open source très célèbre pour prendre des captures d'écran à partir des pages Web du navigateur. Elle est très simple à utiliser. et très puissant.

Utiliser html2canvas

L'utilisation de html2canvas est très simple, aussi simple que de simplement passer un élément DOM puis d'obtenir le canevas via le rappel :

En utilisation réelle, il y a deux points à noter :

1.html2canvas génère le contenu de l'image du canevas en analysant le style réel de l'élément, il en est ainsi. Il existe des exigences concernant la disposition réelle et l'affichage visuel des éléments. Si vous souhaitez prendre une capture d'écran complète, il est préférable de séparer les éléments du flux de documents (par exemple, position:absolute)

2. L'image du canevas générée par défaut est très floue sur l'appareil Retina. Le traiter en une image 2x peut résoudre ce problème :

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) 
{                ...        
  }    
});

Cas réel d'utilisation de html2canvas

Structure du code 1.html

<section class="share_popup" id="html2canvas">  
<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</p>  
<p><img src="1.jpg"></p>  
<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</p>  
 </section>

Structure du code 2.js

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

Ce qui précède est le contenu complet de l'article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

le canevas Javascript HTML5 implémente une carte des provinces déplaçables de la Chine

HTML5 Tracer des lignes pour le dessin de base sur toile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!