Node.js Imaging API رایگان برای تبدیل HTML به تصویر
کتابخانه پردازش تصویر Node.js منبع باز که به طور کامل از بارگیری و تبدیل تصویر پشتیبانی می کند، توسعه دهندگان می توانند محتوای HTML را به تصاویر (JPEG، PNG، GIF) در برنامه های Node.js تبدیل کنند.
در دنیای توسعه وب که به سرعت در حال تغییر است، توانایی تبدیل HTML به تصاویر دنیایی از امکانات خلاقانه را در اختیار شما قرار می دهد. تبدیل HTML به تصاویر، چه تولید گرافیک رسانه های اجتماعی، ایجاد گزارش های بصری، یا طراحی محتوای سفارشی برای ایمیل ها باشد، می تواند بسیاری از فرآیندها را ساده کند. کتابخانه Node-HTML-to-Image یک ابزار منبع باز است که به توسعه دهندگان این امکان را می دهد که این کار را انجام دهند و راهی ساده برای تولید تصاویر از HTML با استفاده از Node.js ارائه می دهد. توسعه دهندگان نرم افزار می توانند تصاویری خیره کننده ایجاد کنند، تصاویر کوچک تولید کنند و حتی کارهایی را که نیاز به تولید تصویر دارند را خودکار کنند. چندین ویژگی مهم در کتابخانه وجود دارد، مانند تولید تصویر جدید، بارگیری HTML از منبع خارجی و تبدیل آن به تصویر، افزودن CSS و جاوا اسکریپت سفارشی، تولید چندین تصویر به طور همزمان و غیره.
استفاده از کتابخانه Node-HTML-to-Image بسیار آسان است و به توسعه دهندگان نرم افزار اجازه می دهد رشته ها یا فایل های HTML را تنها با چند خط کد بارگیری و به تصاویر با کیفیت بالا تبدیل کنند. این کتابخانه که توسط Frinyvonnick توسعه یافته است، از قدرت Headless Chromium از طریق کتابخانه Puppeteer برای ارائه HTML و CSS به تصاویر PNG، JPEG یا حتی WebP استفاده می کند. این به توسعه دهندگان این امکان را می دهد تا تصاویری ایجاد کنند که پیچیدگی بصری کامل HTML از جمله پشتیبانی از CSS مدرن، فونت ها و حتی اجرای جاوا اسکریپت را به تصویر می کشد. می توانید خروجی را با تعیین گزینه هایی مانند کیفیت، عرض و ارتفاع تصویر سفارشی کنید. علاوه بر این، کاربران میتوانند تصاویر را از صفحات وب استخراج کنند و به آنها اجازه میدهد تا برنامههای اسکراپینگ وب قدرتمند بسازند. با انعطاف پذیری، سفارشی سازی و سهولت استفاده، جای تعجب نیست که چرا توسعه دهندگان به این کتابخانه هجوم آورده اند.
شروع به کار با Node-HTML-to-Image
روش توصیه شده برای نصب Node-HTML-to-Image t استفاده از NPM است. لطفا از دستور زیر برای نصب راحت استفاده کنید.
نصب Node-HTML-to-Image از طریق NPM
npm install node-html-to-image
نصب Node-HTML-to-Image از طریق Yarn
yarn add node-html-to-image
تولید تصویر از کد HTML داخل Node.js
یکی از نقاط قوت کتابخانه Node-HTML-to-Image سادگی آن است و همچنین می تواند به راحتی با هر برنامه Node.js ادغام شود. تنها با چند خط کد، توسعه دهندگان نرم افزار می توانند شروع به تولید تصاویر از محتوای HTML در برنامه های Node.js خود کنند. این سهولت استفاده، آن را برای توسعه دهندگان در تمام سطوح مهارت در دسترس قرار می دهد. در مثال زیر، کتابخانه یک رشته ساده HTML را می گیرد و آن را به یک تصویر PNG تبدیل می کند. تصویر خروجی، image.png، در فهرست اصلی ذخیره می شود.
چگونه تصویر PNG را از HTML در برنامه های Node.js ایجاد کنیم؟
const nodeHtmlToImage = require('node-html-to-image');
nodeHtmlToImage({
output: './image.png',
html: 'Hello, World!
'
})
.then(() => console.log('Image created successfully!'));
پشتیبانی از HTML و CSS پیچیده
Node-HTML-to-Image منبع باز به پردازش اولیه HTML محدود نمی شود. این می تواند اسناد پیچیده HTML را با استایل CSS گسترده و همچنین جاوا اسکریپت مدیریت کند. چه از ویژگیهای CSS مدرن مانند Flexbox یا Grid استفاده میکنید یا فونتهای سفارشی را تعبیه میکنید، کتابخانه محتوای شما را با دقت به فرمتهای فایل تصویری مانند JPEG، PNG، WebP و بسیاری دیگر تبدیل میکند. در اینجا مثالی وجود دارد که نشان میدهد چگونه توسعهدهندگان میتوانند تصویری را از یک طرحبندی پیچیدهتر HTML، از جمله سبکهای Flexbox و رنگهای سفارشی، تولید کنند که در نتیجه یک تصویر به خوبی طراحی شده است.
چگونه از یک کد HTML پیچیده تر در برنامه های Node.js یک تصویر ایجاد کنیم؟
const nodeHtmlToImage = require('node-html-to-image');
const htmlContent = `
Welcome to My Website
Building the web, one pixel at a time.
`;
nodeHtmlToImage({
output: './welcome-image.png',
html: htmlContent
})
.then(() => console.log('Complex layout image created successfully!'));
قالبهای تصویر خروجی قابل تنظیم
کتابخانه Node-HTML-to-Image از چندین فرمت تصویر خروجی از جمله PNG، JPEG و WebP پشتیبانی می کند. این انعطافپذیری به شما این امکان را میدهد تا بهترین فرمت را برای استفاده خاص خود انتخاب کنید، چه برای عملکرد وب یا کیفیت تصویر. در اینجا مثالی آمده است که نشان میدهد چگونه کاربران میتوانند خروجی را بهعنوان یک تصویر JPEG تعیین کنند، که میتواند برای سناریوهایی مفید باشد که در آن اندازه فایل باید به حداقل برسد بدون اینکه به کیفیت زیاد افت کند.
چگونه فرمت تصویر خروجی را به JPEG در حالی که تبدیل HTML به تصویر در Node.js تعیین کنیم؟
nodeHtmlToImage({
output: './output-image.jpg',
html: 'JPEG Image Example
',
type: 'jpeg'
})
.then(() => console.log('JPEG image created successfully!'));
پشتیبانی پیشرفته رندر تصویر در Node.js
کتابخانه Node-HTML-to-Image پشتیبانی کاملی را برای سفارشی کردن فرآیند رندر به طور گسترده ارائه کرده است. توسعه دهندگان نرم افزار می توانند اندازه Viewport، ضریب مقیاس دستگاه را تعریف کنند و حتی CSS و جاوا اسکریپت سفارشی را قبل از رندر به HTML تزریق کنند. مثال زیر نشان می دهد که چگونه تصویر با اندازه نمایش سفارشی 800x600 پیکسل رندر می شود و کیفیت روی 100 تنظیم می شود که از بالاترین کیفیت تصویر ممکن اطمینان حاصل می کند.
چگونه تصاویر را با اندازه و کیفیت Viewport سفارشی در برنامه های Node.js رندر کنیم؟
nodeHtmlToImage({
output: './custom-image.png',
html: 'Custom Viewport
',
viewport: { width: 800, height: 600 },
quality: 100
})
.then(() => console.log('Image with custom viewport created successfully!'));