recherche

Maison  >  Article  >  interface Web  >  Apprenez à prendre des captures d'écran de pages Web Javascript ensemble

Apprenez à prendre des captures d'écran de pages Web Javascript ensemble

coldplay.xixi
coldplay.xixiavant
2020-06-19 16:59:552179parcourir

Apprenez à prendre des captures d'écran de pages Web Javascript ensemble

J'ai déjà écrit sur la façon de convertir des graphiques sur toile en images et sur la façon de télécharger des images sur toile. Ce sont toutes des préparations techniques pour ce plug-in.

Le parcours technique est très clair. Générez une image à partir du contenu d'une certaine zone de la page Web et enregistrez-la sur le canevas. Ensuite, convertissez le contenu du canevas en image, enregistrez-le localement et enfin. téléchargez-le sur Weibo.

J'ai cherché sur Internet et trouvé html2canvas, un outil javascript qui peut générer des images de canevas à partir du contenu d'éléments Web spécifiés. L'utilisation de cet outil js est très simple. Il suffit d'introduire son fichier js dans la page, puis d'appeler la fonction html2canvas() : 

html2canvas(document.body, {
    onrendered: function(canvas) {
        /* canvas is the actual canvas element,
           to append it to the page call for example
           document.body.appendChild( canvas );
        */
    }
});

Cette html2canvas() fonction a des paramètres, qui sont transmis. dans l'exemple ci-dessus, le paramètre est document.body, qui capturera l'image de la page entière. Si vous souhaitez capturer une seule zone, comme prendre une capture d'écran d'un certain p ou d'un certain table, vous pouvez passer le p ou un certain table comme paramètre.

Je n'ai finalement pas choisi l'outil js html2canvas car j'ai trouvé plusieurs problèmes avec celui-ci lors de mon expérimentation.

Tout d’abord, les problématiques cross-domaines. Permettez-moi de donner un exemple pour illustrer ce problème. Par exemple, l'URL de ma page Web est http://www.webhek.com/about/, et j'ai une image sur cette page. Cette image ne provient pas de www.webhek. com. Elle provient du serveur d'images CDN www.webhek-cdn.com/images/about.jpg Ensuite, cette image n'est pas dans le même domaine que cette page Web, donc html2canvas ne peut pas prendre de captures d'écran de ce type d'image. l'ensemble de votre site Web Les images sont placées sur un serveur d'images distinct. Si vous utilisez html2canvas pour prendre une capture d'écran de la page Web entière, vous constaterez que toutes les images sont vides.

Il existe également un remède à ce problème, qui consiste à utiliser un proxy : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html2canvas php proxy</title>
        <script src="html2canvas.js"></script>
        <script>
        //<![CDATA[
        (function() {
            window.onload = function(){
                html2canvas(document.body, {
                    "logging": true, //Enable log (use Web Console for get Errors and Warnings)
                    "proxy":"html2canvasproxy.php",
                    "onrendered": function(canvas) {
                        var img = new Image();
                        img.onload = function() {
                            img.onload = null;
                            document.body.appendChild(img);
                        };
                        img.onerror = function() {
                            img.onerror = null;
                            if(window.console.log) {
                                window.console.log("Not loaded image from canvas.toDataURL");
                            } else {
                                alert("Not loaded image from canvas.toDataURL");
                            }
                        };
                        img.src = canvas.toDataURL("image/png");
                    }
                });
            };
        })();
        //]]>
        </script>
    </head>
    <body>
        <p>
            <img alt="google maps static" src="http://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=800x600&maptype=roadmap&sensor=false">
        </p>
    </body>
</html>

Cette méthode ne peut être utilisée que sur votre propre serveur si vous prenez une capture d'écran de la page Web de quelqu'un d'autre. , ça ne marchera toujours pas.

Au cours de l'expérience, nous avons également constaté que les images capturées à l'aide de html2canvas avaient parfois du texte qui se chevauchait. Je suppose que c'est parce que html2canvas n'est pas parfait lors de l'analyse du contenu de la page et du traitement des CSS.

Enfin, j'ai trouvé la méthode drawWindow() sur le site officiel de Firefox. La différence entre cette méthode et le html2canvas mentionné ci-dessus est qu'elle n'analyse pas les éléments de la page, elle cible uniquement les régions, c'est-à-dire que. les paramètres qu'il accepte sont les zones marquées par quatre chiffres, quel que soit l'endroit où se trouve le contenu de la page dans cette zone. 

void drawWindow(
  in nsIDOMWindow window,
  in float x, 
  in float y,
  in float w,
  in float h,
  in DOMString bgColor,
  in unsigned long flags [optional]
);

Cette méthode JavaScript native semble parfaite et correspond exactement à ce dont j'ai besoin. Cependant, cette méthode ne peut pas être utilisée dans les pages Web ordinaires car Firefox a officiellement constaté que cette méthode provoquerait des failles de sécurité. seul le code avec des "privilèges Chrome" pourrait utiliser cette drawWindow() fonction.

Bien qu'il existe de grandes limitations, il peut toujours être utilisé avec quelques rebondissements. Dans le plug-in complémentaire Firefox que j'ai développé, main.js est le code avec les "privilèges Chrome". J'ai trouvé sur Internet un exemple de code fourni avec le SDK du plug-in Firefox : 

var window = require(&#39;window/utils&#39;).getMostRecentBrowserWindow();
var tab = require(&#39;tabs/utils&#39;).getActiveTab(window);
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
thumbnail.mozOpaque = true;
window = tab.linkedBrowser.contentWindow;
thumbnail.width = Math.ceil(window.screen.availWidth / 5.75);
var aspectRatio = 0.5625; // 16:9
thumbnail.height = Math.round(thumbnail.width * aspectRatio);
var ctx = thumbnail.getContext("2d");
var snippetWidth = window.innerWidth * .6;
var scale = thumbnail.width / snippetWidth;
ctx.scale(scale, scale);
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)");
// thumbnail now represents a thumbnail of the tab

Ce code est écrit très clairement et il vous suffit d'apporter de légères modifications en fonction de vos besoins.

Tutoriel recommandé : "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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Utilisez JavaScript pour détecter si le navigateur actuel est un navigateur sans têteArticle suivant：Utilisez JavaScript pour détecter si le navigateur actuel est un navigateur sans tête

Articles Liés

Voir plus