آموزش گرفتن تصویر از سایت یا صفحه مورد نظر با Nodejs و puppeteer



visibility  
mode_comment   ۰

آموزش گرفتن تصویر از سایت یا صفحه مورد نظر با Nodejs و puppeteerدر این مطلب قصد دارم که نحوه گرفتن تصویر از سایت یا صفحه مورد نظر با استفاده از Nodejs و Puppeteer رو بهتون آموزش بدم.

همونطور که میدونین مرورگرهایی که ما استفاده میکنیم، دارای رابط گرافیکی هستند و میتونیم آدرس مورد نظرمون رو در اون وارد کنیم و محتوای سایت رو ببینیم و درون اونا اسکرول کرده و اکشن‌های مختلف رو انجام بدیم. به این مرورگرها Headfull میگن.

حالا در کنار این مرورگرها، Headless browser نیز وجود داره که تفاوتش اینه که رابط گرافیکی نداره. با استفاده از مرورگرهای Headless میتونین در command line یا در محیط برنامه‌نویسی، در بین سایت‌های مختلف جابجا بشید و هر کاری که در مرورگرهای عادی انجام میدادین رو درون command line انجام بدین.headless chrome

مرورگرهای Headless برای درست کردن تست‌های اتوماتیک وبسایت کاربرد دارند و به ما این امکان رو میدن که بدون اینکه خودمون بخوایم کاری انجام بدیم، در سایتهای مختلف جابجا بشه و کارهایی که مورد نظرمون هست رو انجام بده. یک کار دیگه که با استفاده از مرورگهای Headless زیاد انجام میدن اینه که از صفحه عکس بگیرن و یا اینکه محتوای صفحه رو به PDF تبدیل کنند و ...

در این مطلب قراره گرفتن تصویر از سایت رو یاد بگیرید. پس با ما همراه باشید.

از نسخه 59 به بعد مرورگر chrome، دستور chrome رو میتونین در command line مورد استفاده قرار بدین و

اگر از سیستم عامل لینوکس یا OSX استفاده میکنید، کافیه که در .bashrc یک alias برای باز کردن chrome قرار بدین تا بتونین از chrome در command line استفاده کنید. برای استفاده از chrome در command line در ویندوز میتونین این لینک رو مطالعه کنید.

برای قرار دادن alias در .bashrc میتونین از دستور زیر استفاده کنید:

برای مطالعه بیشتر در مورد Headless chrome میتونین این لینک رو ببینید.

مثلا برای اینکه در Command line با استفاده از headless chrome یک screenshot از سایت google تهیه کنیم، بصورت زیر در ویندوز عمل میکنیم:

به همین راحتی.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

Puppeteer - ابزاری برای کار کردن با headless chrome در Nodejs

با استفاده از ابزار قدرتمند Puppeteer میتونین به راحتی در Nodejs از headless chrome استفاده کنید و کارهای جذابی رو انجام بدین.

برای اینکه با استفاده از Puppeteer یک screenshot از صفحه مورد نظر تهیه کنیم، باید 4 مرحله رو انجام بدیم:

  1. در ابتدا مرورگر رو راه بندازیم
  2. یک صفحه جدید باز کنیم
  3. به آدرس مورد نظرمون بریم
  4. از صفحه سایت screenshot بگیریم

در ابتدا یک دایرکتوری بنام puppeteer-example در desktop به وجود بیارید و درون اون yarn init بزنید تا package.json ساخته بشه. بعد از اون هم دستور yarn add puppeteer رو اجرا کنید تا این ابزار دانلود و نصب بشه.

در حین نصب puppeteer، مرورگر chromium و بقیه پیش‌نیازها دانلود و نصب میشن ولی ما تحریم هستیم و نمیتونیم بصورت عادی ازشون استفاده کنیم. یا باید از Proxy استفاده کنیم و یا اینکه میتونیم از سایت رایگان Shecan استفاده کنیم تا تحریم‌ها رو بشکونیم. وقتی که DNS ها رو همونی که shecan گفته قرار بدیم، دیگه همه سایتهایی که قبلا برای ما فیلتر بدون، بدون محدودیت و رایگان در دسترس خواهند بود.

در نهایت باید محتویات package.json شما بصورت زیر باشه:

حالا یک فایل بنام index.js بسازید و کدهای زیر رو درونش قرار بدین:

همونطور که میبینید مراحل مورد نظر انجام شدن و با اینکار در نهایت و با اجرا کردن دستور node index.js یک تصویر از سایت سون لرن در دایرکتوری فعلی با نام 7learn.png ذخیره خواهد شد.

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 44)

مشخص کردن viewport مرورگر

بصورت پیش‌فرض puppeteer اندازه 800 در 600 رو برای viewport مرورگر در نظر میگیره. شما به راحتی میتونین width و height مرورگر رو تغییر بدین. برای اینکار بصورت زیر عمل میکنیم:

با استفاده از ویژگی isLandscape میتونیم landscape بودن رو مشخص کنیم.

تهیه تصویر تمام صفحه

برای اینکه تصویری از کل سایت بگیرید بصورت زیر عمل کنید:

بقیه موارد مثل قبل خواهند بود و با اینکار یک تصویر خیلی طولانی بدست خواهید آورد که همه محتوای سایت رو درون خودش جا داده است.

شما همچنین میتونین کاری کنید که از کامل لود شدن سایت مطمئن بشید. برای اینکار بصورت زیر عمل کنید:

اگر سرعت اینترنتتون خیلی بالا نیست و مدت زمان زیادی طول میکشه، میتونین با استفاده از ویژگی timeout زمان بیشتری رو برای گرفتن تصویر از سایت منتظر بمونید و دیگه puppeteer ارور نمیده. بصورت زیر:

همونطور که مشاهده میکنید با استفاده از puppeteer میتونیم هر کاری که دلمون بخواد رو انجام بدیم و خروجی‌های مورد نظرمون رو بدست بیاریم.

شما میتونین برای مطالعه بیشتر در مورد این ابزار قدرتمند، مستندات اون رو مطالعه کنید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.