Saat menulis artikel, Anda sering perlu memasukkan gambar. Memasukkan gambar yang ada sangat sederhana. Terkadang ketika Anda membuat beberapa daftar situs web yang bagus, Anda perlu menambahkan tangkapan layar halaman web. Proses ini sangat membosankan. Anda dapat mempertimbangkan untuk mengembangkan alat baris perintah untuk melewati URL dan kemudian menghasilkan tangkapan layar halaman.
Gunakan Node-Webshot untuk tangkapan layar halaman web
Modul NPM yang digunakan termasuk yargs dan node-webshot. Untuk artikel tentang yargs, silakan merujuk ke sini untuk membuat alat baris perintah eksklusif pribadi yang ditetapkan dari awal - panduan lengkap untuk yargs.
Node-Webshot memanggil phantomjs untuk menghasilkan tangkapan layar halaman web. Phantomjs adalah proyek NPM yang sangat terkenal, setara dengan versi skrip browser WebKit. Melalui phantomjs, skrip dan halaman web dapat berinteraksi dengan, sehingga phantomjs sering digunakan untuk pengujian otomatisasi halaman web.
Phantomjs akan memuat konten halaman web lengkap seperti browser biasa dan kemudian membuatnya dalam memori. Meskipun halaman yang diterjemahkannya tidak dapat dilihat dengan mata telanjang, Anda dapat melihatnya dengan menghasilkan gambar. Node-Webshot menggunakan antarmuka render phantomjs untuk mendapatkan tangkapan layar halaman web.
Node-Webshot menghasilkan kode sampel untuk beranda Google:
var webshot = membutuhkan ('webshot'); webshot ('google.com', 'google.png', function (err) {// screenshot sekarang disimpan ke google.png}); phantomjs menghasilkan kode sampel untuk beranda Google: var page = membutuhkan ('webpage'). create (); page.open ('http://github.com/', function () {page.render ('github.png'); phantom.exit ();});Lalu mengapa tidak menggunakan phantomjs secara langsung? Satu kata malas!
Selain itu, Node-Webshot juga hanya merangkum membaca dan menulis file. Saya percaya bahwa setiap pengembang yang akrab dengan Node.js dapat dengan mudah menulis antarmuka seperti itu, tetapi karena roda mudah digunakan, jangan membuatnya sendiri.
Cara Menulis Panggilan Streaming Node-Webshot:
var webshot = membutuhkan ('webshot'); var fs = membutuhkan ('fs'); var renderstream = webshot ('google.com'); var file = fs.createWriteStream ('google.png', {encoding: 'biner'}); renderstream.on ('data', function (data) {file.write (data.toString ('biner'), 'biner');});Node-Webshit juga mendukung menghasilkan versi seluler dari tangkapan layar halaman web:
var webshot = membutuhkan ('webshot'); var options = {screensize: {width: 320, height: 480}, shotsize: {width: 320, tinggi: 'all'}, userAgent: 'mozilla/5.0 (iPhone; u; cpu iPhone os 3_2 seperti mac OS x; en-us)' goPo) 'goPo)' goPo) 'goPo)' goPo) 'goPo)' goPo) 'go)' go) 'go)' go) 'go)' go) 'go, goPi, gon-o) (u)' goPi, gon-o) oS oS (u) oS os. }; webshot ('flickr.com', 'flickr.jpeg', opsi, fungsi (err) {// tangkapan layar sekarang disimpan ke flickr.jpeg});Akhirnya, kami mengintegrasikan Yargs dan Node-Webshot, tetapi sayangnya, kami juga membantu kami dengan bagian pekerjaan ini, cukup instal secara langsung.
npm isntall -g webshot -cli
Screenshot sistem menggunakan desktop-screenshot
Desktop-Screenshot adalah proyek tangkapan layar lintas platform. Penggunaannya mirip dengan Node-Webshot, kecuali bahwa satu parameter URL tidak ada.
var screenshot = membutuhkan ('desktop-skreenshot'); Screenshot ("Screenshot.png", function (error, complete) {if (error) console.log ("Screenshot gagal", error); else console.log ("Screenshot berhasil");});Ini adalah tangkapan layar dari sistem saya
Masalahnya adalah ketika saya memanggil baris perintah, jendela ini juga akan muncul di tangkapan layar, dan tidak ada cara yang baik untuk menghapus jendela ini. Tangkapan layar sistem masih merupakan poin yang baik yang dilengkapi dengan Windows.
Optimalisasi Gambar
Akhirnya, dua alat optimasi gambar diperkenalkan
Imagemin
SVGO
SVGO digunakan untuk mengoptimalkan gambar SVG. SVG akan menggantikan ikon font dan menjadi tren baru.