در این مطلب قصد دارم که نحوه گرفتن تصویر از سایت یا صفحه مورد نظر با استفاده از Nodejs و Puppeteer رو بهتون آموزش بدم.
همونطور که میدونین مرورگرهایی که ما استفاده میکنیم، دارای رابط گرافیکی هستند و میتونیم آدرس مورد نظرمون رو در اون وارد کنیم و محتوای سایت رو ببینیم و درون اونا اسکرول کرده و اکشنهای مختلف رو انجام بدیم. به این مرورگرها Headfull میگن.
حالا در کنار این مرورگرها، Headless browser نیز وجود داره که تفاوتش اینه که رابط گرافیکی نداره. با استفاده از مرورگرهای Headless میتونین در command line یا در محیط برنامهنویسی، در بین سایتهای مختلف جابجا بشید و هر کاری که در مرورگرهای عادی انجام میدادین رو درون command line انجام بدین.
مرورگرهای Headless برای درست کردن تستهای اتوماتیک وبسایت کاربرد دارند و به ما این امکان رو میدن که بدون اینکه خودمون بخوایم کاری انجام بدیم، در سایتهای مختلف جابجا بشه و کارهایی که مورد نظرمون هست رو انجام بده. یک کار دیگه که با استفاده از مرورگهای Headless زیاد انجام میدن اینه که از صفحه عکس بگیرن و یا اینکه محتوای صفحه رو به PDF تبدیل کنند و ...
در این مطلب قراره گرفتن تصویر از سایت رو یاد بگیرید. پس با ما همراه باشید.
از نسخه 59 به بعد مرورگر chrome، دستور chrome رو میتونین در command line مورد استفاده قرار بدین و اگر از سیستم عامل لینوکس یا OSX استفاده میکنید، کافیه که در .bashrc یک alias برای باز کردن chrome قرار بدین تا بتونین از chrome در command line استفاده کنید.
برای قرار دادن alias در .bashrc میتونین از دستور زیر استفاده کنید:
مثلا برای اینکه در Command line با استفاده از headless chrome یک screenshot از سایت google تهیه کنیم، بصورت زیر در ویندوز عمل میکنیم:
به همین راحتی.
Puppeteer - ابزاری برای کار کردن با headless chrome در Nodejs
با استفاده از ابزار قدرتمند Puppeteer میتونین به راحتی در Nodejs از headless chrome استفاده کنید و کارهای جذابی رو انجام بدین.
برای اینکه با استفاده از Puppeteer یک screenshot از صفحه مورد نظر تهیه کنیم، باید 4 مرحله رو انجام بدیم:
در ابتدا یک دایرکتوری بنام 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 ذخیره خواهد شد.
مشخص کردن viewport مرورگر
بصورت پیشفرض puppeteer اندازه 800 در 600 رو برای viewport مرورگر در نظر میگیره. شما به راحتی میتونین width و height مرورگر رو تغییر بدین. برای اینکار بصورت زیر عمل میکنیم:
با استفاده از ویژگی isLandscape میتونیم landscape بودن رو مشخص کنیم.
تهیه تصویر تمام صفحه
برای اینکه تصویری از کل سایت بگیرید بصورت زیر عمل کنید:
بقیه موارد مثل قبل خواهند بود و با اینکار یک تصویر خیلی طولانی بدست خواهید آورد که همه محتوای سایت رو درون خودش جا داده است.
شما همچنین میتونین کاری کنید که از کامل لود شدن سایت مطمئن بشید. برای اینکار بصورت زیر عمل کنید:
اگر سرعت اینترنتتون خیلی بالا نیست و مدت زمان زیادی طول میکشه، میتونین با استفاده از ویژگی timeout زمان بیشتری رو برای گرفتن تصویر از سایت منتظر بمونید و دیگه puppeteer ارور نمیده. بصورت زیر:
همونطور که مشاهده میکنید با استفاده از puppeteer میتونیم هر کاری که دلمون بخواد رو انجام بدیم و خروجیهای مورد نظرمون رو بدست بیاریم.