نود HTML/CSS to Image در N8N
نود HTML/CSS to Image در N8N برای تبدیل کدهای HTML و CSS به تصویر استفاده میشود. با کمک این نود میتوانید بدون نیاز به طراحی دستی، بهصورت خودکار بنر، کارت معرفی، تصویر شبکههای اجتماعی، فاکتور تصویری، گواهینامه، گزارش گرافیکی و انواع خروجیهای تصویری را از داخل ورکفلوهای N8N تولید کنید.
این نود زمانی بسیار کاربردی است که دادههای متنی یا داینامیک دارید و میخواهید آنها را در قالب یک تصویر زیبا و قابل اشتراکگذاری نمایش دهید. برای مثال میتوانید اطلاعات یک محصول، نتیجه یک فرم، آمار فروش روزانه یا متن یک پست را وارد قالب HTML کنید و خروجی نهایی را بهصورت تصویر دریافت کنید.
معرفی نود در N8N
نود HTML/CSS to Image یک نود یکپارچهسازی با سرویس HTML/CSS to Image API است. این سرویس کد HTML و CSS را دریافت میکند، آن را در یک محیط رندر مرورگر اجرا میکند و خروجی را بهصورت تصویر در اختیار شما قرار میدهد.
- نوع نود: Integration / Action
- کارکرد اصلی: ساخت تصویر از کد HTML و CSS
- کاربرد در ورکفلو: تولید خودکار تصویر بر اساس دادههای ورودی
- خروجی معمول: لینک تصویر ساختهشده یا داده قابل استفاده برای دانلود تصویر
اهمیت این نود در اتوماسیونهای محتوایی، مارکتینگ، گزارشگیری و تولید داراییهای بصری است. بهجای اینکه برای هر تصویر به ابزار طراحی نیاز داشته باشید، میتوانید قالب HTML/CSS آماده کنید و مقادیر آن را با دادههای واقعی از دیتابیس، فرم، گوگل شیت، API یا CRM جایگزین کنید.
موارد استفاده
تولید تصویر برای شبکههای اجتماعی
یکی از رایجترین کاربردهای این نود، ساخت تصویر پست برای شبکههای اجتماعی است. برای مثال میتوانید عنوان مقاله، تصویر شاخص، نام نویسنده و تاریخ انتشار را از یک CMS دریافت کنید و با HTML/CSS یک کاور آماده برای اینستاگرام، لینکدین یا توییتر بسازید.
- دریافت اطلاعات مقاله با نود HTTP Request یا WordPress
- ساخت قالب HTML با نود Set یا Code
- تبدیل قالب به تصویر با نود HTML/CSS to Image
- ارسال تصویر به تلگرام، ایمیل یا ذخیره در فضای ابری
ساخت کارت محصول
در فروشگاههای آنلاین میتوان اطلاعات محصول مانند نام، قیمت، تخفیف، موجودی و تصویر محصول را وارد یک قالب کرد و خروجی تصویری برای کمپینهای تبلیغاتی ساخت.
- دریافت محصول از WooCommerce یا Shopify
- قرار دادن قیمت و تخفیف در قالب HTML
- تولید تصویر تبلیغاتی
- ارسال به کانال تلگرام یا ذخیره در Google Drive
تولید گزارش تصویری روزانه
اگر نیاز دارید هر روز یک گزارش کوتاه تصویری از فروش، تعداد سفارشها، تعداد کاربران جدید یا وضعیت سیستم تولید شود، این نود انتخاب مناسبی است.
- دریافت داده از دیتابیس یا Google Sheets
- محاسبه شاخصها با نود Code
- طراحی کارت گزارش با HTML/CSS
- تبدیل به تصویر و ارسال به Slack، Telegram یا Email
ساخت گواهینامه یا کارت شخصیسازیشده
برای دورههای آموزشی، رویدادها یا کمپینهای تعاملی میتوانید نام کاربر، تاریخ، نام دوره و کد گواهی را روی قالب HTML قرار دهید و خروجی تصویر یا فایل قابل دانلود بسازید.
- دریافت اطلاعات کاربر از فرم
- جایگذاری نام و مشخصات در قالب
- تولید تصویر گواهی
- ارسال لینک تصویر به کاربر از طریق ایمیل
ترکیب با نودهای دیگر
- Webhook: دریافت داده از سایت، فرم یا اپلیکیشن و ساخت تصویر بر اساس آن
- Set: آمادهسازی فیلدهای HTML، CSS، عنوان، متن و رنگها
- Code: تولید قالب HTML داینامیک با جاوااسکریپت
- HTTP Request: دانلود تصویر خروجی یا ارسال آن به سرویسهای دیگر
- Google Sheets: ساخت گروهی تصاویر از ردیفهای یک شیت
- Telegram: ارسال تصویر تولیدشده به کانال یا کاربر
- Google Drive / S3: ذخیره تصاویر تولیدشده در فضای ابری
پارامترها و تنظیمات
پارامترهای این نود برای تعیین محتوای HTML، ظاهر CSS، ابعاد تصویر، نحوه رندر و تنظیمات خروجی استفاده میشوند. ممکن است بسته به نسخه N8N و نسخه نود، نام دقیق برخی فیلدها کمی متفاوت باشد، اما ساختار اصلی معمولاً مطابق موارد زیر است.
Credentials
- نام پارامتر: Credentials
- نوع داده: Credential
- توضیح کاربرد: برای اتصال N8N به سرویس HTML/CSS to Image استفاده میشود. معمولاً شامل User ID و API Key است.
- مثال عملی: ساخت حساب در سرویس HTML/CSS to Image، دریافت API Key و وارد کردن آن در بخش Credentials نود.
- نکته مهم: کلید API را در فیلدهای عمومی یا نود Set ذخیره نکنید. همیشه از بخش Credentials خود N8N استفاده کنید.
Resource
- نام پارامتر: Resource
- نوع داده: Options
- توضیح کاربرد: مشخص میکند نود روی چه منبعی از سرویس کار کند. در این نود معمولاً منبع اصلی Image است.
- مثال عملی: انتخاب Image برای ساخت تصویر از HTML/CSS.
Operation
- نام پارامتر: Operation
- نوع داده: Options
- توضیح کاربرد: عملیاتی را مشخص میکند که باید انجام شود. عملیات اصلی این نود معمولاً Create یا Create Image است.
- مثال عملی: انتخاب Create برای تولید یک تصویر جدید.
HTML
- نام پارامتر: HTML
- نوع داده: String
- توضیح کاربرد: کد HTML اصلی که باید به تصویر تبدیل شود. این فیلد میتواند شامل تگهای HTML، متن، تصویر، لینک، کلاسها و ساختار صفحه باشد.
- مثال عملی:
<div class="card"> <h1>گزارش فروش روزانه</h1> <p>فروش امروز: ۲۵,۰۰۰,۰۰۰ تومان</p></div>- نکته مهم: اگر از Expression در N8N استفاده میکنید، میتوانید مقادیر داینامیک را از نودهای قبلی وارد HTML کنید.
CSS
- نام پارامتر: CSS
- نوع داده: String
- توضیح کاربرد: استایلهای موردنیاز برای ظاهر تصویر را مشخص میکند. رنگها، فونت، اندازه، فاصلهها، پسزمینه و چیدمان در این بخش تعریف میشوند.
- مثال عملی:
body { margin: 0; font-family: sans-serif; direction: rtl;}.card { width: 1200px; height: 630px; background: linear-gradient(135deg, #0f172a, #2563eb); color: white; display: flex; flex-direction: column; justify-content: center; padding: 80px; box-sizing: border-box;}h1 { font-size: 64px; margin-bottom: 24px;}p { font-size: 36px;}- نکته مهم: برای زبان فارسی بهتر است direction: rtl و text-align: right را در CSS تنظیم کنید.
URL
- نام پارامتر: URL
- نوع داده: String / URL
- توضیح کاربرد: در برخی حالتها بهجای ارسال مستقیم HTML، میتوانید آدرس یک صفحه وب را بدهید تا از آن تصویر ساخته شود.
- مثال عملی: https://example.com/report-page
- نکته مهم: صفحه باید از سمت سرویس HTML/CSS to Image قابل دسترسی باشد. صفحات پشت لاگین، لوکالهاست یا دارای محدودیت IP ممکن است رندر نشوند.
Selector
- نام پارامتر: Selector
- نوع داده: String
- توضیح کاربرد: مشخص میکند فقط کدام بخش از HTML یا صفحه رندر شود. این پارامتر برای گرفتن تصویر از یک المان خاص کاربرد دارد.
- مثال عملی: .card یا #invoice
- نکته مهم: اگر Selector اشتباه باشد یا المان وجود نداشته باشد، ممکن است خروجی خالی، ناقص یا همراه با خطا باشد.
Viewport Width
- نام پارامتر: Viewport Width
- نوع داده: Number
- توضیح کاربرد: عرض محیط رندر را بر حسب پیکسل مشخص میکند. این مقدار روی نحوه نمایش CSSهای واکنشگرا تأثیر دارد.
- مثال عملی: 1200 برای تصویر مناسب پست شبکههای اجتماعی
- نکته مهم: اگر عرض HTML یا کارت شما 1200px است، بهتر است Viewport Width نیز متناسب با آن تنظیم شود.
Viewport Height
- نام پارامتر: Viewport Height
- نوع داده: Number
- توضیح کاربرد: ارتفاع محیط رندر را بر حسب پیکسل مشخص میکند.
- مثال عملی: 630 برای تصویر لینکدین یا کاور لینک
- نکته مهم: اگر ارتفاع کمتر از محتوای واقعی باشد، ممکن است بخشی از تصویر برش بخورد.
Device Scale
- نام پارامتر: Device Scale
- نوع داده: Number
- توضیح کاربرد: مقیاس رندر تصویر را مشخص میکند و برای تولید تصاویر با کیفیت بالاتر کاربرد دارد.
- مثال عملی: مقدار 2 برای خروجی با کیفیتتر در نمایشگرهای Retina
- نکته مهم: افزایش Device Scale میتواند حجم تصویر و زمان تولید را افزایش دهد.
Google Fonts
- نام پارامتر: Google Fonts
- نوع داده: String
- توضیح کاربرد: برای بارگذاری فونتهای Google Fonts در تصویر استفاده میشود.
- مثال عملی: Roboto یا Open Sans
- نکته مهم: برای فونت فارسی، بسیاری از فونتهای محبوب فارسی در Google Fonts موجود نیستند. در این حالت میتوانید از فونتهای قابل دسترس با @font-face استفاده کنید، به شرطی که فایل فونت از اینترنت قابل دسترسی باشد.
MS Delay
- نام پارامتر: MS Delay
- نوع داده: Number
- توضیح کاربرد: مدت زمانی بر حسب میلیثانیه که سرویس قبل از گرفتن تصویر صبر میکند. این گزینه برای صفحاتی که تصویر، فونت، نمودار یا داده داینامیک دارند مفید است.
- مثال عملی: 1000 یعنی یک ثانیه تأخیر قبل از گرفتن اسکرینشات
- نکته مهم: مقدار زیاد باعث کند شدن ورکفلو میشود. فقط زمانی استفاده کنید که محتوا دیر بارگذاری میشود.
Render When Ready
- نام پارامتر: Render When Ready
- نوع داده: Boolean
- توضیح کاربرد: در برخی پیادهسازیها به سرویس میگوید زمانی تصویر را بسازد که صفحه آماده رندر شده باشد.
- مثال عملی: استفاده برای صفحاتی که با جاوااسکریپت محتوا را بعد از لود اولیه نمایش میدهند.
- نکته مهم: اگر صفحه شما وابسته به اسکریپتهای سنگین است، بهتر است از MS Delay هم استفاده شود.
Full Page
- نام پارامتر: Full Page
- نوع داده: Boolean
- توضیح کاربرد: در صورت پشتیبانی، بهجای گرفتن تصویر فقط از viewport، کل ارتفاع صفحه را در خروجی قرار میدهد.
- مثال عملی: ساخت تصویر کامل از یک صفحه لندینگ یا فاکتور بلند
- نکته مهم: تصاویر Full Page ممکن است حجم بالاتری داشته باشند و برای شبکههای اجتماعی مناسب نباشند.
Output Format
- نام پارامتر: Output Format
- نوع داده: Options
- توضیح کاربرد: در برخی نسخهها یا با استفاده از API میتوانید فرمت خروجی مانند PNG یا JPG را مشخص کنید.
- مثال عملی: PNG برای کیفیت بهتر و JPG برای حجم کمتر
- نکته مهم: اگر این گزینه در نود موجود نبود، خروجی پیشفرض سرویس استفاده میشود.
تنظیمات پیشنهادی برای چند سناریوی رایج
- پست شبکه اجتماعی: Viewport Width برابر 1200، Viewport Height برابر 630 یا 1080، Device Scale برابر 1 یا 2
- استوری اینستاگرام: Viewport Width برابر 1080، Viewport Height برابر 1920
- کارت مربعی: Viewport Width برابر 1080، Viewport Height برابر 1080
- گواهینامه: Viewport Width برابر 1600، Viewport Height برابر 1131 برای نسبت تقریبی A4 افقی
- فاکتور تصویری: استفاده از Full Page یا ارتفاع متناسب با تعداد آیتمها
ورودیها و خروجیها
ورودی نود
ورودی این نود معمولاً از دادههای نودهای قبلی ساخته میشود. شما میتوانید HTML و CSS را بهصورت ثابت وارد کنید یا با استفاده از Expression، مقادیر داینامیک را داخل قالب قرار دهید.
نمونه داده ورودی از یک نود قبلی:
{ "title": "گزارش فروش روزانه", "totalSales": "۲۵,۰۰۰,۰۰۰ تومان", "orders": 48, "date": "۱۴۰۳/۰۸/۲۰"}نمونه HTML داینامیک در N8N
<div class="card"> <h1>{{$json.title}}</h1> <p>مبلغ فروش: {{$json.totalSales}}</p> <p>تعداد سفارشها: {{$json.orders}}</p> <span>{{$json.date}}</span></div>خروجی نود
خروجی نود معمولاً شامل اطلاعات تصویر ساختهشده است. رایجترین خروجی، URL تصویر است که میتوانید آن را در نودهای بعدی استفاده کنید.
نمونه خروجی احتمالی:
{ "url": "https://hcti.io/v1/image/example-image-id"}استفاده از خروجی در نودهای بعدی
- ارسال لینک تصویر: مقدار url را مستقیماً در ایمیل، تلگرام یا Slack ارسال کنید.
- دانلود تصویر: با نود HTTP Request آدرس خروجی را دانلود کرده و بهصورت Binary ذخیره کنید.
- ذخیره در Google Drive: پس از دانلود تصویر، آن را با نود Google Drive آپلود کنید.
- ارسال به API دیگر: URL یا فایل Binary تصویر را به سرویسهای دیگر ارسال کنید.
نمونه ساختار ورکفلو ساده
- Manual Trigger: اجرای دستی برای تست
- Set: تعریف title، subtitle، amount و date
- HTML/CSS to Image: تبدیل قالب HTML/CSS به تصویر
- HTTP Request: دانلود تصویر خروجی از URL
- Telegram: ارسال تصویر به کانال یا چت
نکات پیشرفته و ترفندها
ساخت قالبهای قابل استفاده مجدد
بهتر است قالبهای HTML و CSS را طوری طراحی کنید که فقط دادهها تغییر کنند. برای مثال یک قالب ثابت برای گزارش فروش داشته باشید و فقط مقادیر فروش، تاریخ و تعداد سفارشها را از نودهای قبلی وارد کنید.
- ساخت قالب ثابت در نود Set
- استفاده از Expression برای جایگذاری دادهها
- نگهداری قالبهای بزرگ در فایل یا دیتابیس
- فراخوانی قالب با HTTP Request یا خواندن از Google Drive
بهینهسازی برای زبان فارسی
برای خروجیهای فارسی باید به جهت متن، فونت و فاصلهگذاری توجه کنید. اگر این موارد تنظیم نشوند، تصویر ممکن است ظاهر نامناسبی داشته باشد.
body { direction: rtl; text-align: right; font-family: Tahoma, Arial, sans-serif;}.card { unicode-bidi: plaintext;}- برای متن فارسی از direction: rtl استفاده کنید.
- اگر فونت فارسی خاصی دارید، آن را با @font-face بارگذاری کنید.
- فایل فونت باید از طریق URL عمومی و امن HTTPS در دسترس باشد.
- از اندازه فونت مناسب استفاده کنید تا در خروجی تصویر خوانایی حفظ شود.
استفاده از تصاویر خارجی در HTML
میتوانید در HTML خود از تگ img استفاده کنید، اما آدرس تصویر باید برای سرویس رندر قابل دسترسی باشد.
<img src="https://example.com/product.jpg" class="product-image" />- از لینکهای عمومی HTTPS استفاده کنید.
- تصاویر پشت لاگین یا دارای محدودیت دسترسی معمولاً نمایش داده نمیشوند.
- برای جلوگیری از دیر لود شدن تصویر، از MS Delay استفاده کنید.
- ابعاد تصویر را در CSS مشخص کنید تا خروجی پایدارتر باشد.
ساخت تصاویر گروهی از Google Sheets
اگر چندین ردیف داده در Google Sheets دارید، میتوانید برای هر ردیف یک تصویر جداگانه تولید کنید. N8N هر آیتم ورودی را جداگانه پردازش میکند و نود HTML/CSS to Image برای هر آیتم یک خروجی میسازد.
- خواندن ردیفها با Google Sheets
- تبدیل هر ردیف به قالب HTML
- تولید تصویر برای هر ردیف
- ذخیره خروجیها در Google Drive یا ارسال به کاربران
ساخت تصویر با رنگبندی داینامیک
میتوانید رنگها را نیز از داده ورودی بگیرید. این روش برای ساخت تصاویر شخصیسازیشده، برندهای مختلف یا وضعیتهای مختلف گزارش کاربرد دارد.
.card { background: {{$json.backgroundColor}}; color: {{$json.textColor}};}- برای وضعیت موفق از رنگ سبز استفاده کنید.
- برای هشدار از رنگ زرد یا نارنجی استفاده کنید.
- برای خطا از رنگ قرمز استفاده کنید.
- برای برندهای مختلف رنگ اصلی را از دیتابیس یا CRM بخوانید.
ترکیب با نمودارها
برای ساخت گزارشهای تصویری حرفهای میتوانید نمودارها را بهصورت HTML/CSS یا SVG در قالب قرار دهید. همچنین میتوانید از تصویر نمودار تولیدشده توسط سرویسهای دیگر استفاده کنید.
- ساخت نمودار ساده با HTML و CSS
- استفاده از SVG داخلی در HTML
- دریافت لینک نمودار از سرویسهایی مانند QuickChart
- قرار دادن نمودار در قالب و تبدیل نهایی به تصویر
کاهش خطا با سادهسازی HTML
هرچه HTML و CSS سادهتر و مستقلتر باشد، خروجی قابل پیشبینیتر خواهد بود. از وابستگی زیاد به اسکریپتهای خارجی، انیمیشنهای سنگین و فایلهای متعدد خودداری کنید.
- CSS را تا حد امکان در همان فیلد CSS قرار دهید.
- از JavaScript غیرضروری استفاده نکنید.
- ابعاد کارت را دقیق مشخص کنید.
- برای تصاویر و فونتهای خارجی تأخیر مناسب تنظیم کنید.
محدودیتها و خطاها
محدودیتهای رایج
- نیاز به دسترسی اینترنتی: اگر HTML شامل تصویر، فونت یا فایل خارجی باشد، آن فایل باید از اینترنت قابل دسترسی باشد.
- صفحات پشت لاگین: URLهایی که نیاز به ورود کاربر دارند معمولاً قابل رندر نیستند.
- لوکالهاست: آدرسهایی مانند localhost یا 127.0.0.1 برای سرویس خارجی قابل دسترسی نیستند.
- محدودیت حجم و پیچیدگی: HTML/CSS بسیار سنگین میتواند باعث کندی یا خطا شود.
- وابستگی به سرویس خارجی: عملکرد نود به دسترسی و وضعیت API سرویس HTML/CSS to Image وابسته است.
- محدودیت پلن API: تعداد درخواستها، کیفیت خروجی یا امکانات پیشرفته ممکن است به پلن حساب کاربری بستگی داشته باشد.
خطای احراز هویت
اگر API Key یا User ID اشتباه باشد، نود با خطای احراز هویت مواجه میشود.
- Credentials را دوباره بررسی کنید.
- مطمئن شوید API Key فعال است.
- اگر کلید را اخیراً تغییر دادهاید، Credential قبلی را بهروزرسانی کنید.
- دسترسی حساب کاربری به API را بررسی کنید.
تصویر خروجی خالی است
این مشکل معمولاً به دلیل HTML نامعتبر، Selector اشتباه، رنگ متن و پسزمینه مشابه یا لود نشدن محتوا رخ میدهد.
- HTML را در مرورگر تست کنید.
- اگر از Selector استفاده کردهاید، وجود آن را بررسی کنید.
- رنگ متن و پسزمینه را بررسی کنید.
- Viewport Width و Viewport Height را متناسب با طراحی تنظیم کنید.
- برای محتوای دیرلود، MS Delay اضافه کنید.
فونت فارسی درست نمایش داده نمیشود
اگر فونت انتخابی از فارسی پشتیبانی نکند یا فایل فونت لود نشود، خروجی ممکن است ظاهر نامناسبی داشته باشد.
- از فونتهایی مانند Tahoma، Arial یا فونت فارسی قابل دسترس استفاده کنید.
- در صورت استفاده از @font-face، لینک فونت باید HTTPS و عمومی باشد.
- direction: rtl را در CSS تنظیم کنید.
- برای متنهای ترکیبی فارسی و انگلیسی، unicode-bidi را بررسی کنید.
تصاویر خارجی نمایش داده نمیشوند
اگر تصویر داخل HTML بارگذاری نشود، معمولاً مشکل از دسترسی، آدرس اشتباه یا محدودیت سرور تصویر است.
- آدرس تصویر را در مرورگر ناشناس تست کنید.
- از لینک مستقیم فایل تصویر استفاده کنید، نه صفحهای که تصویر داخل آن قرار دارد.
- مطمئن شوید سرور تصویر درخواستهای خارجی را مسدود نمیکند.
- برای تصاویر بزرگ، نسخه بهینهشده استفاده کنید.
خروجی برش خورده یا ناقص است
این مشکل معمولاً به دلیل تنظیم نبودن ارتفاع یا عرض viewport، overflow در CSS یا محتوای بیشتر از اندازه کارت رخ میدهد.
- ابعاد اصلی کارت را در CSS مشخص کنید.
- Viewport Height را افزایش دهید.
- از box-sizing: border-box استفاده کنید.
- متنهای طولانی را با max-width، line-height و overflow کنترل کنید.
- در صورت نیاز از Full Page استفاده کنید.
نود کند اجرا میشود
رندر تصویر معمولاً نسبت به پردازشهای ساده زمان بیشتری نیاز دارد، زیرا سرویس باید صفحه را مانند مرورگر اجرا و تصویر تولید کند.
- HTML و CSS را سادهتر کنید.
- تصاویر خارجی را فشرده کنید.
- MS Delay را فقط در صورت نیاز استفاده کنید.
- از درخواستهای گروهی بسیار زیاد بدون کنترل نرخ استفاده نکنید.
- برای پردازش انبوه، از Split In Batches استفاده کنید.
ایده ها
- ساخت خودکار کاور مقاله: دریافت عنوان و دستهبندی مقاله از WordPress و تولید تصویر شاخص هماهنگ با برند.
- گزارش فروش تصویری روزانه: ساخت کارت گرافیکی از آمار فروش و ارسال خودکار آن به مدیران در تلگرام یا Slack.
- تصویر نقلقول روزانه: دریافت یک جمله الهامبخش از API یا Google Sheets و تبدیل آن به تصویر مناسب شبکههای اجتماعی.
- کارت تخفیف شخصیسازیشده: ساخت تصویر کوپن تخفیف با نام مشتری، کد تخفیف و تاریخ انقضا.
- گواهینامه پایان دوره: تولید تصویر گواهی با نام شرکتکننده و ارسال خودکار آن از طریق ایمیل.
