Ao escrever artigos, você geralmente precisa inserir fotos. Inserir imagens existentes é muito simples. Às vezes, quando você faz algumas excelentes listas de sites, você precisa adicionar capturas de tela da página da web. Esse processo é muito chato. Você pode considerar o desenvolvimento de uma ferramenta de linha de comando para passar em um URL e, em seguida, gerar capturas de tela de página.
Use Node-Webshot para captura de tela da página da web
Os módulos NPM utilizados incluem YARGs e Node-Webshot. Para obter artigos sobre YARGs, consulte aqui para criar um conjunto de ferramentas de linha de comando exclusivo pessoal do Scratch - um guia completo para YARGS.
Node-Webshot chama Phantomjs para gerar capturas de tela da página da web. Phantomjs é um projeto NPM muito famoso, equivalente a uma versão com script do navegador do Webkit. Através de fantasmas, scripts e páginas da web podem ser interagidos, portanto, os PhantomJs são frequentemente usados para testes de automação de páginas da web.
Phantomjs carregará o conteúdo completo da página da Web como um navegador comum e o renderizará na memória. Embora a página que ela não possa ser vista a olho nu, você pode vê -la gerando imagens. O Node-Webshot usa a interface de renderização dos Phantomjs para obter capturas de tela da página da web.
Node-Webshot gera código de amostra para o Google Homepage:
var webshot = requer ('webshot'); webshot ('google.com', 'google.png', function (err) {// screenShot agora salvo no google.png}); Phantomjs gera código de amostra para o Google Página inicial: var página = requer ('página da web'). create (); Page.open ('http://github.com/', function () {page.render ('github.png'); phantom.exit ();});Então, por que não usar Phantomjs diretamente? Uma palavra é preguiçosa!
Além disso, o Node-Webshot também simplesmente encapsula a leitura e a gravação de arquivos. Acredito que qualquer desenvolvedor familiarizado com o Node.js pode escrever facilmente essa interface, mas como a roda é fácil de usar, não faça você mesmo.
Como escrever chamadas de streaming de nó-webshot:
var webshot = requer ('webshot'); var fs = requer ('fs'); var renderStream = webshot ('google.com'); var arquivo = fs.createwritestream ('google.png', {codificação: 'binário'}); renderstream.on ('dados', function (dados) {file.write (data.toString ('binário'), 'binário');});Node-Webshit também suporta gerar versão móvel das capturas de tela da Web Page:
var webshot = requer ('webshot'); var options = {screenSize: {width: 320, altura: 480}, shotsize: {width: 320, altura: 'all'}, userAgent: 'mozilla/5.0 (iPhone; u; cpu iphone OS 3_2 como o Mac OS x; en-us)' '' AppleBKit/531.2.2.2.2 como o Mac OS X; Mobile/7B298G '}; webshot ('flickr.com', 'flickr.jpeg', opções, function (err) {// screenshot agora salvo para flickr.jpeg});Por fim, integramos Yargs e Node-Webshot, mas, infelizmente, também nos ajudamos a essa parte do trabalho, basta instalá-lo diretamente.
NPM ISntall -g webshot -cli
Captura de tela do sistema usando desktop-screenshot
O desktop-screenshot é um projeto de captura de tela do sistema de plataforma cruzada. Seu uso é semelhante ao Node-Webshot, exceto que um parâmetro de URL está ausente.
var screenShot = requer ('desktop-screenshot'); captura de tela ("screenShot.png", function (erro, completo) {if (error) console.log ("falha na captura de tela", erro); else console.log ("screenshot foi bem -sucedido");});Esta é uma captura de tela do meu sistema
O problema é que, quando eu chamo a linha de comando, essa janela também aparecerá na captura de tela e não há uma boa maneira de remover essa janela. A captura de tela do sistema ainda é um bom ponto que vem com o Windows.
Otimização da imagem
Finalmente, duas ferramentas de otimização de imagem são introduzidas
imageMina
svgo
O SVGO é usado para otimizar imagens SVG. O SVG substituirá a fonte do ícone e se tornará uma nova tendência.