عند كتابة المقالات ، غالبًا ما تحتاج إلى إدراج الصور. إدخال الصور الموجودة أمر بسيط للغاية. في بعض الأحيان عندما تقوم بتقديم بعض قوائم موقع الويب الممتازة ، تحتاج إلى إضافة لقطات شاشة صفحة ويب. هذه العملية مملة للغاية. يمكنك التفكير في تطوير أداة سطر الأوامر لتمريرها في عنوان 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) {// screenshot تم حفظها الآن إلى google.png}) ؛ يقوم Phantomjs بإنشاء رمز عينة لـ Google HomePage: var page = require ('papage'). create () ؛ page.open ('http://github.com/' ، function () {page.render ('github.png') ؛ phantom.exit () ؛}) ؛إذن لماذا لا تستخدم phantomjs مباشرة؟ كلمة واحدة كسول!
بالإضافة إلى ذلك ، فإن Node-Webshot أيضًا تغلف ببساطة قراءة الملفات والكتابة. أعتقد أن أي مطور مطلع على Node.js يمكنه بسهولة كتابة مثل هذه الواجهة ، ولكن نظرًا لأن العجلة سهلة الاستخدام ، فلا تجعلها بنفسك.
كيفية كتابة مكالمات دفق العقدة webshot:
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} ، لقطات: {width: 320 ، الارتفاع: 'all'} ، useragent: 'mozilla/5.0 (iPhone ؛ u ؛ cpu iphone os 3_2 مثل mac os x ؛ en-us) } ؛ Webshot ('flickr.com' ، 'flickr.jpeg' ، الخيارات ، الدالة (err) {// screenshot تم حفظها الآن إلى flickr.jpeg}) ؛أخيرًا ، قمنا بدمج Yargs و Node-Webshot ، لكن لسوء الحظ ، ساعدنا أيضًا في هذا الجزء من العمل ، فقط قم بتثبيته مباشرة.
npm Isntall -g webshot -cli
لقطة شاشة النظام باستخدام شاشة سطح المكتب
Sktop-Screenshot هو مشروع لقطة الشاشة عبر الطورة. يشبه استخدامه عقدة webshot ، باستثناء أن معلمة عنوان URL واحد مفقود.
var screenshot = require ('desktop-screenshot') ؛ screenshot ("screenshot.png" ، الدالة (خطأ ، أكمل) {if (error) console.log (هذه لقطة شاشة لنظامي
المشكلة هي أنه عندما أتصل بسطر الأوامر ، ستظهر هذه النافذة أيضًا على لقطة الشاشة ، ولا توجد طريقة جيدة لإزالة هذه النافذة. لا تزال لقطة شاشة النظام نقطة جيدة تأتي مع Windows.
تحسين الصورة
أخيرًا ، يتم تقديم اثنين من أدات تحسين الصورة
ImageMin
SVGO
يتم استخدام SVGO لتحسين صور SVG. سيحل SVG محل خط الرمز وتصبح اتجاهًا جديدًا.