เมื่อเขียนบทความคุณมักจะต้องแทรกรูปภาพ การแทรกรูปภาพที่มีอยู่นั้นง่ายมาก บางครั้งเมื่อคุณสร้างรายชื่อเว็บไซต์ที่ยอดเยี่ยมคุณต้องเพิ่มภาพหน้าจอหน้าเว็บ กระบวนการนี้น่าเบื่อมาก คุณสามารถพิจารณาพัฒนาเครื่องมือบรรทัดคำสั่งเพื่อส่งผ่าน URL จากนั้นสร้างภาพหน้าจอหน้า
ใช้ Node-Webshot สำหรับหน้าจอหน้าจอ
โมดูล NPM ที่ใช้ ได้แก่ Yargs และ Node-Webshot สำหรับบทความเกี่ยวกับ Yargs โปรดดูที่นี่เพื่อสร้างชุดเครื่องมือบรรทัดคำสั่งพิเศษส่วนบุคคลจากศูนย์ - คู่มือที่สมบูรณ์สำหรับ Yargs
Node-Webshot เรียก phantomjs เพื่อสร้างภาพหน้าจอหน้าเว็บ PhantomJS เป็นโครงการ NPM ที่มีชื่อเสียงมากเทียบเท่ากับเบราว์เซอร์ WebKit รุ่นสคริปต์ ผ่าน phantomjs สคริปต์และเว็บเพจสามารถโต้ตอบได้ดังนั้น phantomjs มักจะใช้สำหรับการทดสอบระบบอัตโนมัติของหน้าเว็บ
Phantomjs จะโหลดเนื้อหาหน้าเว็บที่สมบูรณ์เช่นเบราว์เซอร์ธรรมดาแล้วแสดงในหน่วยความจำ แม้ว่าหน้าเว็บจะไม่สามารถมองเห็นได้ด้วยตาเปล่า แต่คุณสามารถดูได้โดยการสร้างรูปภาพ Node-Webshot ใช้อินเทอร์เฟซเรนเดอร์ของ Phantomjs เพื่อรับภาพหน้าจอหน้าเว็บ
Node-Webshot สร้างรหัสตัวอย่างสำหรับ Google Homepage:
var webshot = ต้องการ ('webshot'); webshot ('google.com', 'google.png', ฟังก์ชั่น (err) {// ภาพหน้าจอตอนนี้บันทึกไปยัง google.png}); Phantomjs สร้างรหัสตัวอย่างสำหรับ Google Homepage: var page = ต้องการ ('หน้าเว็บ') สร้าง (); page.open ('http://github.com/', function () {page.render ('github.png'); phantom.exit ();});แล้วทำไมไม่ใช้ phantomjs โดยตรง? คำเดียวขี้เกียจ!
นอกจากนี้ Node-Webshot ก็เพียงแค่ห่อหุ้มการอ่านและเขียนไฟล์ ฉันเชื่อว่านักพัฒนาทุกคนที่คุ้นเคยกับ node.js สามารถเขียนอินเทอร์เฟซดังกล่าวได้อย่างง่ายดาย แต่เนื่องจากล้อใช้งานง่ายอย่าทำให้ตัวเอง
วิธีการเขียนสายสตรีมมิ่ง Node-Webshot:
var webshot = ต้องการ ('webshot'); var fs = ต้องการ ('fs'); var renderStream = webshot ('google.com'); var file = fs.createWriteStream ('google.png', {การเข้ารหัส: 'ไบนารี'}); renderStream.on ('data', function (data) {file.write (data.toString ('ไบนารี'), 'ไบนารี');});Node-Webshit ยังรองรับการสร้างภาพหน้าจอหน้าเว็บบนมือถือ:
var webshot = ต้องการ ('webshot'); ตัวเลือก var = {screensize: {width: 320, ความสูง: 480}, shotsize: {width: 320, ความสูง: 'all'}, useragent: 'mozilla/5.0 (iphone; u; cpu iphone os 3_2 เช่น mac os x; มือถือ/7B298G '}; webshot ('flickr.com', 'flickr.jpeg', ตัวเลือก, ฟังก์ชั่น (err) {// ภาพหน้าจอตอนนี้บันทึกไปยัง flickr.jpeg});ในที่สุดเรารวม Yargs และ Node-Webshot แต่น่าเสียดายที่เรายังช่วยเราในการทำงานส่วนนี้เพียงแค่ติดตั้งโดยตรง
npm isntall -g webshot -cli
ภาพหน้าจอของระบบโดยใช้เดสก์ท็อป-หน้าจอ
เดสก์ท็อป-หน้าจอเป็นโครงการสกรีนช็อตระบบข้ามแพลตฟอร์ม การใช้งานของมันคล้ายกับ Node-Webshot ยกเว้นว่าพารามิเตอร์ URL หนึ่งตัวหายไป
var screenshot = require ('เดสก์ท็อป-หน้าจอ'); สกรีนช็อต ("screenshot.png", ฟังก์ชั่น (ข้อผิดพลาด, เสร็จสมบูรณ์) {ถ้า (ข้อผิดพลาด) console.log ("ภาพหน้าจอล้มเหลว", ข้อผิดพลาด); else console.log ("ภาพหน้าจอสำเร็จ");});นี่คือภาพหน้าจอของระบบของฉัน
ปัญหาคือเมื่อฉันเรียกบรรทัดคำสั่งหน้าต่างนี้จะปรากฏบนภาพหน้าจอและไม่มีวิธีที่ดีในการลบหน้าต่างนี้ ภาพหน้าจอของระบบยังคงเป็นจุดที่ดีที่มาพร้อมกับ Windows
การเพิ่มประสิทธิภาพของภาพ
ในที่สุดมีการแนะนำเครื่องมือเพิ่มประสิทธิภาพรูปภาพสองตัว
จินตนาการ
SVGO
SVGO ใช้เพื่อปรับภาพ SVG ให้เหมาะสม SVG จะแทนที่แบบอักษรไอคอนและกลายเป็นเทรนด์ใหม่