جاوا اسکریپت : ساخت بنر اینستاگرامی برای محصولات فروشگاه

خیلی وقتا نیازه که برای محصولاتمون بنر یا همون پست به صورت فایل تصویری بسازیم که بتونیم توی اینستاگرام پست یا استوری کنیم یا حتی توی تلگرام و واتسپ برای مشتری ارسال کنیمما معمولا محصولات به صورت متنی و تصویری توی دیتابیس فروشگاهمون ثبت میکنیم فرقی نمیکنه فروشگاهمون با چی ساخته شده ، وردپرس باشه یا ری‌اکت به هر حال دیتابیس داره !مشاهده نمونه ی زنده توی استکبلیتز :https://stackblitz.com/edit/web-platform-rmk8xb?file=index.htmlمشاهده این آموزش به صورت ویدیوئی در یوتوبhttps://youtu.be/tk_h_MilqPwاگه با canvas آشنایی داشته باشید میدونید که میتونیم این اطلاعاتو با جاوااسکریپت و canvas به فایل تصویری png تبدیل کنیم !اگه با canvas کار کرده باشید میدونید که خیلی سادست اما داستان وقتی سخت میشه که بخوایم تصاویر پیچیده تر بسازیم که کاربر پسند تر هم باشه !خب یه آدم خیلی خوب (به نام آقای آنتون از مکزیک) اومده و یه لایبرری (خودش میگه فریم ورک) ساخته به نام Konva که این کارو خیلی خیلی خیلی راحت تر کرده !اینجاس که باید به زبون خودش بهش بگیم Dios te bendiga mi amigo یعنی خدا خیرت بده داداش !سایت آموزشش اینه و هرچی بخواین توش به زبون خیلی ساده یاد داده https://konvajs.org/docs/index.htmlداستاشم خیلی سادستاول نصبش میکنی یا ایمپورتش میکنیnpm install konvaیا<script src=&quothttps://unpkg.com/konva@8/konva.min.js&quot>و بعدش همه چیز از استیج شروع میشه شما یه استیج درست میکنی اینجوری : var stage = new Konva.Stage({ container: 'container', width: 500, height: 500 }); و بعد container در واقع آی‌دی همون المنتی میشه که شما میخوای توش تصویر اجرا بشه (خودش گفته div شما هم div بزنید) مثلا اینجوری :<div id=&quotcontainer&quot ></div> استیج یه چیزی تو مایه های همون new file توی فتوشاپه یه طول و عرض داره و تمام !توی استیج همه چیز لایه است ! یعنی شما باید یه لایه ایجاد کنی بعد توی این لایه هرچی دلت خواست اضافه میکنی (متن ، عکس ‌، فیلم ، اشکال مختلف و ...)ساخت لایه اینجوریه : var layer = new Konva.Layer(); حالا مثلا فرض کنیم میخوایم یه دایره قرمز بکشیم var circle = new Konva.Circle({ x: stage.width() / 2, y: stage.height() / 2, radius: 70, fill: 'red' }); بعدش باید این دایره رو به اون لایه اضافه کنیم layer.add(circle); حالا لایه رو باید به استیج اضافه کنیم (قبلشم میشه) stage.add(layer); و در آخر : layer.draw(); //(که اینم نزنید اتومات خودش میزنه انگار وقتی اینیت میشه !) تمام !سورس کاملش اینجوری میشه :<!DOCTYPE html> <html> <head> <script src=&quothttps://unpkg.com/konva@8/konva.min.js&quot> </head> <body> <div id=&quotcontainer&quot></div> var stage = new Konva.Stage({ container: 'container', width: 500, height: 500, }); var layer = new Konva.Layer(); var circle = new Konva.Circle({ x: stage.width() / 2, y: stage.height() / 2, radius: 70, fill: 'red', }); layer.add(circle); stage.add(layer); layer.draw(); </body> </html>درگ کردن و ریسایز کردنبرای اینکه هر المنت قابلیت جابجایی با ماوس یا تاچ داشته باشه فقط کافیه draggable: true مثلا همون دایره قرمزه اینجوری میشهvar circle = new Konva.Circle({ x: stage.width() / 2, y: stage.height() / 2, radius: 70, fill: 'red', draggable:true });برای ترنسفورم کردن یا همون ریسایز کردن اینجا کامل توضیح دادهداستانشم خیلی سادست فقط باید برای هر المنت یا المنت هایی که میخواید ترنسفورم بشه یدونه ‌‌Konva.Transformer بسازید و المنتایی که میخواید به nodes اضافه کنید و transformer به layer اضافه کنید !اینجوریvar tr = new Konva.Transformer(); tr.nodes([circle]); layer.add(tr);فقط یادتون باشه موقع خروجی گرفتن یا همون سیو کردن ترنسفورم هاید کنید وگرنه میوفته توش !tr.hide();بعد اینکه سیو کردید میتونید شوش کنید tr.show();نوشتن متن فارسی و فونت !خب یکی از چیزایی که ما فارسی زبون ها باهاش از دیرباز مشکل داشتیم نوشتن متن فارسی بوده !خوشبختانه این لایبرری از زبون فارسی و متن راست به چپ و فونت پشتیبانی میکنه اما دوتا نکته وجود داره که باید دقت کنیداول اینکه برای نوشتن متن راست به چپ میتونید کانتینر rtl کنید حالا یا با css یا با dir=rtlیا اینکه اینجوری خود canvas راست به چپ کنیدconst canvas = layer.getCanvas()._canvas; canvas.setAttribute('dir', 'rtl');همه چیز درسته ولی وقتی بخواین از متد هایی که خود Konva گفته برای ذخیره استفاده کنید ممکنه راست به چپتون بهم بریزهاما نگران نباشید اینجا جاوااسکریپته و همه چیز قابل دستکاریه !خیلی راحت از خود canvas سیو کنید هرچند قابلیت pixelRatio اینجا نیستش ولی خب کارو راه میندازه !یه نمونه کامل سیو کردن توی همون استکبلیتز هست برید ببیند میفهمید چطوریه ولی اینجا هم یه توضیح کوچولو میدمconst canvas = layer.getCanvas()._canvas; var dataURL = canvas.toDataURL('image/png'); downloadURI(dataURL, 'stage.png');خط اول المنت canvas کشیدیم بیرونخط دوم دیتاشو کشیدیم بیرون و آخر سر دادیم به downloadURI که دانلودش کنیم !و اما فونت !ببینید طبق خود داکیومنت Konva از فونت های لود شده در DOM استفاده میکنه پس اگه فونتی لود بشه قابل استفادس شما میتونید از fontfaceobserver.com استفاده کنید که خیالتون راحت باشه فونته لود شده بعد تکست بسازید یا به روش کثیف عمل کنید و از setTimeout معروف استفاده کنید ! یعنی صبر کنید تا لود بشه بعد تکست بسازیدsetTimeout(()=>{ // inja text besaz },1000);بقیه ابزارشم انقد خود سایت کامل و ساده توضیح داده که نوشتنشون اینجا دوباره نویسیه !خودتون برید متوجه میشید از فوتوشاپ هم آسون ترهدر پایان هم اگه پروژه ای با konva ساختید سعی کنید هرچند کم این داداش مکزیکیمونو دونیت کنید چون واقعا کار کردن با canvas خیلی سخته و ایشون ۹۹ درصد آسونش کرده !https://konvajs.org/docs/donate.html