При написании статей вам часто нужно вставлять картинки. Вставить существующие картинки очень просто. Иногда, когда вы делаете отличные списки веб -сайтов, вам нужно добавить скриншоты веб -страницы. Этот процесс очень скучный. Вы можете рассмотреть возможность разработки инструмента командной строки для передачи URL -адреса, а затем генерировать скриншоты страниц.
Используйте Node-Webshot для экрана веб-страницы
Используемые модули NPM включают Yargs и Node-Webshot. Для статей о Yargs, пожалуйста, обратитесь к созданию личного набора инструментов эксклюзивных командных линий с нуля - полного руководства по Yargs.
Node-Webshot вызывает Phantomjs для генерации скриншотов веб-страницы. Phantomjs - очень известный проект NPM, эквивалентный сценарии браузера Webkit. С помощью Phantomjs можно взаимодействовать сценарии и веб -страницы, поэтому Phantomjs часто используется для тестирования автоматизации веб -страниц.
Phantomjs загрузит полный контент веб -страницы как обычный браузер, а затем отобразит его в памяти. Хотя страница, которую она рендеринга не может быть видно невооруженным глазом, вы можете увидеть ее, генерируя картинки. Node-Webshot использует интерфейс рендеринга Phantomjs для получения скриншотов веб-страницы.
Node-Webshot генерирует пример кода для домашней страницы Google:
var webshot = require ('webshot'); webshot ('Google.com', 'Google.png', function (err) {// экранинг, теперь сохраненный в google.png}); Phantomjs генерирует пример кода для домашней страницы Google: var page = require ('web -страница'). Create (); page.open ('http://github.com/', function () {page.render ('github.png'); phantom.exit ();});Тогда почему бы не использовать Phantomjs напрямую? Одно слово ленивое!
Кроме того, Node-Webshot также просто инкапсулирует чтение и написание файлов. Я считаю, что любой разработчик, знакомый с Node.js, может легко написать такой интерфейс, но поскольку колесо легко использовать, не делайте его сами.
Как написать потоковые вызовы узел-ваекшот:
var webshot = require ('webshot'); var fs = require ('fs'); var renderStream = webshot ('Google.com'); var file = fs.createwriteStream ('google.png', {кодирование: 'binary'}); renderStream.on ('data', function (data) {file.write (data.tostring ('binary'), 'binary');});Node-Webshit также поддерживает создание мобильной версии экрана веб-страницы:
var webshot = require ('webshot'); var options = {screensize: {width: 320, высота: 480}, Shottisize: {ширина: 320, высота: «Все», пользователь: 'mozilla/5,0 (iPhone; u; CPU iPhone OS 3_2, как Mac OS X; En-US)' + 'AppleWebTIT/531.21.20 (khtml, whe-us)' + 'Applewebkit/531.21.20 (khtml, wes)' + 'Applewebkit/531.21.20. webshot ('flickr.com', 'flickr.jpeg', options, function (err) {// screenshot, теперь сохраненный в flickr.jpeg});Наконец, мы интегрировали Yargs и Node-Webshot, но, к сожалению, мы также помогли нам с этой частью работы, просто установите его напрямую.
npm isntall -g webshot -cli
Системный скриншот с использованием настольного экрана
Настольный экран-скриншот-это кроссплатформенная система экрана. Его использование аналогично узлу-ваевочке, за исключением того, что один параметр URL отсутствует.
var screenshot = require ('desktop-screenshot'); Screenshot ("Screenshot.png", function (error, overse) {if (erry) console.log ("Снимок экрана сбоя", ошибка); else console.log ("Скриншот преуспел");});Это скриншот моей системы
Проблема в том, что когда я вызову командную строку, это окно также появится на снимке экрана, и нет хорошего способа удалить это окно. Скриншот системы по -прежнему остается хорошим моментом, который поставляется с Windows.
Оптимизация изображения
Наконец, введены два инструмента оптимизации изображений
Imagemin
SVGO
SVGO используется для оптимизации изображений SVG. SVG заменит шрифт Icon и станет новой тенденцией.