کتابخانه رایگان Node.js برای ایجاد تصاویر از HTML
یک کتابخانه پردازش تصویر پیشرفته و متن باز Node.js به توسعه‌دهندگان نرم‌افزار این امکان را می‌دهد که تصاویر JPEG یا PNG را از محتوای HTML با پشتیبانی CSS و تولید دسته‌ای تصاویر از طریق API رایگان JS ایجاد کنند.
Node-HTML-to-Image یک جواهر متن باز برای توسعه‌دهندگان نرم‌افزار است که به دنبال یک راه‌حل ساده اما قدرتمند برای تبدیل محتوای HTML به تصاویر هستند. این ابزار بر پایه Puppeteer ساخته شده است، یک کتابخانه محبوب Node.js که یک API سطح بالا برای کنترل مرورگرهای بدون سر (headless) Chrome فراهم می‌کند. این ابزار به توسعه‌دهندگان این امکان را می‌دهد که با حداقل تلاش و هزینه، تصاویر را از الگوهای HTML تولید کنند. چندین ویژگی مهم در این کتابخانه وجود دارد که به راحتی توسعه‌دهندگان نرم‌افزار در فرآیند توسعه کمک می‌کند، مانند تبدیل HTML خام یا الگوهای از پیش طراحی شده، ایجاد تصاویر شخصی‌سازی شده یا مبتنی بر داده، پشتیبانی از استایل‌دهی CSS، پشتیبانی از فرمت‌های مختلف تصویر، تولید دسته‌ای تصاویر، سفارشی‌سازی گزینه‌های رندرینگ Puppeteer و بسیاری موارد دیگر.
کتابخانه Node-HTML-to-Image یک ماژول Node.js است که الگوهای HTML را گرفته و آن‌ها را به فایل‌های تصویری استاتیک تبدیل می‌کند. این کتابخانه در تولید بنرها، تصاویر نقل قول یا محتوای تبلیغاتی به‌طور دینامیک بر اساس داده‌های کاربر یا الگوهای از پیش تعریف‌شده بسیار مفید است. علاوه بر این، برای صادرات تجسم‌های داده پیچیده، نمودارها یا جداول به‌عنوان تصاویر استاتیک برای گنجاندن در ارائه‌ها یا گزارش‌ها نیز بسیار کاربردی است. توسعه‌دهندگان نرم‌افزار می‌توانند تصاویر رندر شده محتوای تبلیغاتی را در ایمیل‌ها جاسازی کنند تا از سازگاری با کلاینت‌های ایمیل که HTML یا CSS را مسدود می‌کنند، اطمینان حاصل کنند. با یک API سبک و وابستگی‌های حداقلی، این کتابخانه برای برنامه‌هایی که نیاز به تولید دینامیک تصاویر دارند، ایده‌آل است. با کاوش در این کتابخانه و ادغام آن در پروژه‌های خود، می‌توانید سطوح جدیدی از کارایی و خلاقیت را باز کنید.
شروع کار با Node-HTML-to-Image
روش پیشنهادی برای نصب کتابخانه Node-HTML-to-Image استفاده از NPM است. لطفاً از دستور زیر برای نصب روان استفاده کنید.
نصب کتابخانه Node-HTML-to-Image از طریق NPM
npm install node-html-to-image نصب کتابخانه Node-HTML-to-Image از طریق Yarn
yarn add node-html-to-image شما همچنین می‌توانید آن را به صورت دستی نصب کنید؛ آخرین فایل‌های انتشار را مستقیماً از مخزن GitHub دانلود کنید.
تولید تصویر از HTML در Node.js
تولید تصاویر از قالب‌های HTML به یک رویکرد محبوب در برنامه‌های مدرن تبدیل شده است. کتابخانه متن‌باز Node-HTML-to-Image این امکان را برای توسعه‌دهندگان نرم‌افزار فراهم می‌کند که HTML خام یا قالب‌های از پیش طراحی شده را با تنها چند خط کد به فایل‌های تصویری استاتیک تبدیل کنند. این ویژگی نیاز به کتابخانه‌های پیچیده دستکاری گرافیکی را از بین می‌برد و یک رابط ساده برای تولید خروجی‌های بصری ارائه می‌دهد. در اینجا یک مثال وجود دارد که نشان می‌دهد چگونه توسعه‌دهندگان نرم‌افزار می‌توانند یک رشته HTML ساده را به یک تصویر PNG در برنامه‌های node.js تبدیل کنند.
چگونه رشته HTML را به تصویر PNG در برنامه‌های Node.js تبدیل کنیم؟
const nodeHtmlToImage = require('node-html-to-image');
nodeHtmlToImage({
output: './output.png',
html: 'Hello, World!
',
})
.then(() => console.log('Image successfully created!'));
رندر محتوای دینامیک از طریق کتابخانه Node.js
کتابخانه Node-HTML-to-Image به توسعه‌دهندگان نرم‌افزار اجازه می‌دهد تا متغیرها را به الگوها منتقل کنند و ایجاد تصاویر شخصی‌سازی شده یا مبتنی بر داده را در برنامه‌های Node.js امکان‌پذیر می‌سازد. این ویژگی به‌ویژه برای برنامه‌هایی مانند گواهینامه‌ها، گزارش‌های شخصی‌سازی شده یا پست‌های رسانه‌های اجتماعی مفید است. مثال زیر نشان می‌دهد که چگونه یک متغیر {{name}} به‌طور دینامیک با "Alice" قبل از رندر کردن تصویر در برنامه‌های Node.js جایگزین می‌شود.
چگونه می‌توان به‌طور دینامیک متغیرها را به الگو منتقل کرده و آن‌ها را از طریق کتابخانه Node.js به تصویر تبدیل کرد؟
const nodeHtmlToImage = require('node-html-to-image');
nodeHtmlToImage({
output: './personalized.png',
html: `
Hello, {{name}}!
`,
content: { name: 'Alice' },
})
.then(() => console.log('Personalized image created!'));
تولید دسته‌ای تصویر در Node.js
تولید همزمان چندین تصویر با استفاده از کتابخانه منبع باز Node-HTML-to-Image بسیار آسان است. با تنها چند خط کد، توسعه‌دهنده نرم‌افزار می‌تواند چندین تصویر را بر اساس نیازهای خود تولید کند. این ویژگی برای کارهای انبوه ایده‌آل است، مانند ایجاد یک سری تصاویر شخصی‌سازی شده برای یک کمپین بازاریابی. مثال زیر نشان می‌دهد که چگونه می‌توان با تغییرات جزئی در محتوا، چندین تصویر تولید کرد. در اینجا هر مورد در آرایه محتوا یک تصویر جداگانه با داده‌های مربوطه تولید می‌کند.
چگونه می‌توان از محتوای HTML درون برنامه‌های Node.js چندین تصویر تولید کرد؟
const nodeHtmlToImage = require('node-html-to-image');
nodeHtmlToImage({
html: `Hello, {{name}}!
`,
content: [
{ name: 'Alice' },
{ name: 'Bob' },
{ name: 'Charlie' },
],
})
.then(() => console.log('Batch images created!'));
