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

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

ما معمولا محصولات به صورت متنی و تصویری توی دیتابیس فروشگاهمون ثبت میکنیم فرقی نمیکنه فروشگاهمون با چی ساخته شده ، وردپرس باشه یا ری‌اکت به هر حال دیتابیس داره !

مشاهده نمونه ی زنده توی استکبلیتز :

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