Al escribir artículos, a menudo necesita insertar imágenes. Insertar imágenes existentes es muy simple. A veces, cuando realiza algunas listas de sitios web excelentes, debe agregar capturas de pantalla de la página web. Este proceso es muy aburrido. Puede considerar desarrollar una herramienta de línea de comandos para pasar en una URL y luego generar capturas de pantalla de página.
Use Node-Webshot para captura de pantalla de la página web
Los módulos NPM utilizados incluyen YARGS y Node-Webshot. Para obtener artículos sobre YARGS, consulte aquí para crear un conjunto de herramientas de línea de comandos exclusivas personales desde cero, una guía completa de YARGS.
Node-Webshot llama a PhantomJS para generar capturas de pantalla de la página web. PhantomJS es un proyecto NPM muy famoso, equivalente a una versión con guión de WebKit Browser. A través de PhantomJs, se pueden interactuar con scripts y páginas web, por lo que a menudo se usa PhantomJS para las pruebas de automatización de páginas web.
PhantomJS cargará el contenido completo de la página web como un navegador ordinario y luego lo representará en la memoria. Aunque la página que hace no se puede ver a simple vista, puede verla generando imágenes. Node-Webshot utiliza la interfaz de renderizado de PhantomJS para obtener capturas de pantalla de la página web.
Node-Webshot genera código de muestra para la página de inicio de Google:
var webShot = request ('WebShot'); WebShot ('Google.com', 'Google.png', function (err) {// captura de pantalla ahora guardada en google.png}); PhantomJS genera código de muestra para la página de inicio de Google: var page = request ('webpage'). create (); Page.open ('http://github.com/', function () {page.render ('github.png'); phantom.exit ();});Entonces, ¿por qué no usar PhantomJs directamente? ¡Una palabra es perezosa!
Además, Node-WebShot también simplemente encapsula la lectura y la escritura de archivos. Creo que cualquier desarrollador familiarizado con Node.js puede escribir fácilmente una interfaz de este tipo, pero dado que la rueda es fácil de usar, no lo haga usted mismo.
Cómo escribir las llamadas de transmisión de nodo-webshot:
var webShot = request ('WebShot'); var fs = require ('fs'); var renderStream = webShot ('Google.com'); Var file = fs.CreatewriteStream ('Google.png', {encoding: 'binary'}); renderStream.on ('data', function (data) {file.write (data.ToString ('binario'), 'binario');});Node-Webshit también admite la generación de la versión móvil de las capturas de pantalla de la página web:
var webShot = request ('WebShot'); Var Options = {Screensize: {Width: 320, Height: 480}, Shotsize: {Width: 320, Height: 'All'}, UserAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 como Mac OS X; En-Us)' + 'AppleWebkit/531.21.20 (khtml, como Gecko) }; WebShot ('Flickr.com', 'Flickr.jpeg', Options, function (err) {// Captura de pantalla ahora guardada en Flickr.jpeg});Finalmente, integramos Yargs y Node-Webshot, pero desafortunadamente, también nos ayudamos con esta parte del trabajo, solo instalarlo directamente.
npm es no lo que no es webshot -cli
Captura de pantalla del sistema con escritorio-screenshot
Desktop-screenshot es un proyecto de captura de captura de captura multiplataforma. Su uso es similar a Node-Webshot, excepto que falta un parámetro de URL.
var captura de pantalla = require ('Desktop-screenshot'); captura de pantalla ("shotenshot.png", function (error, completa) {if (error) console.log ("fallido de captura de pantalla", error); else console.log ("captura de pantalla suceder");});Esta es una captura de pantalla de mi sistema
El problema es que cuando llamo a la línea de comando, esta ventana también aparecerá en la captura de pantalla, y no hay una buena manera de eliminar esta ventana. La captura de pantalla del sistema sigue siendo un buen punto que viene con Windows.
Optimización de imágenes
Finalmente, se introducen dos herramientas de optimización de imágenes
Imagemin
svgo
SVGO se usa para optimizar las imágenes SVG. SVG reemplazará la fuente de iconos y se convertirá en una nueva tendencia.