Lorsque vous écrivez des articles, vous devez souvent insérer des images. L'insertion d'images existantes est très simple. Parfois, lorsque vous faites d'excellentes listes de sites Web, vous devez ajouter des captures d'écran de la page Web. Ce processus est très ennuyeux. Vous pouvez envisager de développer un outil de ligne de commande pour passer dans une URL, puis générer des captures d'écran de page.
Utilisez Node-Webshot pour la capture d'écran de la page Web
Les modules NPM utilisés incluent les yargs et le nœud-webshot. Pour les articles sur Yargs, veuillez vous référer à ici pour créer un ensemble d'outils de ligne de commande exclusif personnel à partir de zéro - un guide complet des Yargs.
Node-Webshot appelle Phantomjs pour générer des captures d'écran de la page Web. Phantomjs est un projet NPM très célèbre, équivalent à une version scénarisée du navigateur WebKit. Grâce à des Phantomjs, les scripts et les pages Web peuvent être interagi, de sorte que PhantoMJS est souvent utilisé pour les tests d'automatisation des pages Web.
PhantoMJS chargera le contenu complet de la page Web comme un navigateur ordinaire, puis le rendra en mémoire. Bien que la page qu'il rend ne puisse pas être vue à l'œil nu, vous pouvez la voir en générant des images. Node-Webshot utilise l'interface de rendu de Phantomjs pour obtenir des captures d'écran de la page Web.
Node-Webshot génère un exemple de code pour la page d'accueil de Google:
var Webshot = require ('Webshot'); Webshot ('google.com', 'google.png', fonction (err) {// Capture d'écran maintenant enregistrée sur google.png}); PhantoMJS génère un exemple de code pour Google HomePage: var page = require ('webpage'). Create (); page.open ('http://github.com/', fonction () {page.render ('github.png'); phantom.exit ();});Alors pourquoi ne pas utiliser directement Phantomjs? Un mot est paresseux!
De plus, Node-Webshot résume également la lecture et l'écriture de fichiers. Je crois que tout développeur familier avec Node.js peut facilement écrire une telle interface, mais comme la roue est facile à utiliser, ne le faites pas vous-même.
Comment écrire des appels de streaming nœud-webshot:
var Webshot = require ('Webshot'); var fs = require ('fs'); var renderstream = Webshot ('google.com'); var file = fs.createwRitestream ('google.png', {codage: 'binary'}); Renderstream.on ('data', fonction (data) {file.write (data.toString ('binary'), 'binary');});Node-Webshit prend également en charge la génération de version mobile des captures d'écran de la page Web:
var Webshot = require ('Webshot'); var options = { screenSize: { width: 320 , height: 480 } , shotSize: { width: 320 , height: 'all' } , userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us)' + ' AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g' }; Webshot ('flickr.com', 'flickr.jpeg', options, fonction (err) {// capture d'écran maintenant enregistrée sur flickr.jpeg});Enfin, nous avons intégré des yargs et des noeuds-webshot, mais malheureusement, nous nous sommes également aidés avec cette partie du travail, il suffit de l'installer directement.
NPM Istall -g Webshot-CLI
Capture d'écran système utilisant des écrans de bureau
Desktop-Screenshot est un projet de capture d'écran système multiplateforme. Son utilisation est similaire à Node-Webshot, sauf qu'un paramètre URL est manquant.
var CaptureShot = require ('Desktop-Screenshot'); ScreenShot ("Screenshot.png", fonction (erreur, complete) {if (error) console.log ("Screenshot a échoué", erreur); else console.log ("ScreenShot succédé");});Ceci est une capture d'écran de mon système
Le problème est que lorsque j'appelle la ligne de commande, cette fenêtre apparaît également sur la capture d'écran, et il n'y a pas de bon moyen de supprimer cette fenêtre. La capture d'écran du système est toujours un bon point qui vient avec Windows.
Optimisation d'image
Enfin, deux outils d'optimisation d'image sont introduits
Imagemin
SVGO
SVGO est utilisé pour optimiser les images SVG. SVG remplacera la police de l'icône et deviendra une nouvelle tendance.