Maison > Article > interface Web > Comment convertir du HTML au format image en utilisant js

Comment convertir du HTML au format image en utilisant js

coldplay.xixioriginal: 2021-02-20 10:54:286593parcourir

Méthode JS pour convertir le HTML en format image : utilisez d'abord html2canvas pour convertir le HTML en canevas ; puis utilisez la méthode objet canevas [toDataURL()] pour convertir le canevas en image.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, JavaScript version 1.8.5, ordinateur DELL G3 Cette méthode convient à toutes les marques d'ordinateurs.

Méthode JS pour convertir le HTML en format image :

1. Utilisez d'abord html2canvas pour convertir le HTML en canevas

html2canvas($(&#39;#content&#39;),{
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
    }
})

2. : toDataURL() convertit le canevas en image

function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

Le format de données obtenu est : data:image/png;base64...

Le code complet est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script src="html2canvas.js"></script>
</head>
<body>
    <div id="content" style="width:150px;height:150px;border:1px solid blue;">
        <span>Hello World!</span>
        <br>
        <span><h2>Are you hear me?</h2></span>
    </div>
    <button id="btnSave">save</button>
<script>
$(function(){
    $(&#39;#btnSave&#39;).click(function(event) {
        html2canvas($(&#39;#content&#39;),{
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
                convertCanvasToImage(canvas);
            }
        })
    });
    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        document.body.appendChild(image);
        return image;
    }
})
</script>
</body>
</html>

Recommandations d'apprentissage gratuites associées : Tutoriel vidéo javascript

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!

JavaScript html JS 对象 canvas

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Compréhension approfondie de l'objet de processus dans nodejsArticle suivant：Compréhension approfondie de l'objet de processus dans nodejs

Articles Liés

Voir plus