WidgetNas

ویرایشگر تصویر Image Editor

همیشه کاربر برای ارسال تصویر به سرور، عکس آماده ای ندارد. یا شما میخواهید در کادری خاص تصویر تنظیم شود و آن تنظیم بایستی توسط کاربر انجام شود. بدین منظور، شما میتوانید از موضوع ویرایشگر تصویر استفاده کنید.

ساختار

برای ایجاد یک محیط ویرایشگر متن با امکانات ساده میتوانید از این ویراشگر تصویر استفاده کنید. بدین منظور یک موضوع از جنس canvas و wn-type="ImageEditor" نیاز دارید. همچنین برای تنظیمات میتوانیداز توابع جاوا اسکریپتی و یا تگ های مقدار دهی استفاده کنید.

مقادیر اولیه

scale موضوع به صورت خودکار با حرکت چرخ مویس اقدام به بزرگ نمایی یا کوچک نمایی میکند. اگر شما میخواهید این امکان غیر فعال شود کافیست از مقدار false استفاده کنید.
scale='false'

rotate اگر میخواهید به صورت پیش فرض تصویر دارای چرخش باشد میتوانید مقدار درجه آن را تعیین کنید.
rotate='0'

flip اگر میخواهید به صورت پیش فرض تصویر دارای flip باشد میتوانید وضعیت آن را تعیین کنید.
مقدار 0: بدون تغییر
مقدار 1: flip حول محور x
مقدار 2: flip حول محور y
مقدار 3: flip حول محور x و y
این مقادیر در تنظیم جاوا اسکریپتی نیز یکسان است.
flip='0'

pan موضوع به صورت خودکار با درگ کردن تصویر جابجا میشود. اگر شما میخواهید این امکان غیر فعال شود کافیست از مقدار false استفاده کنید.
pan='false'

mask اگر میخواهید به صورت پیش فرض بر روی تصویر یک ماسک برای محدود کردن اندازه تصویر خروجی داشته باشید میتوانید آنرا مشخص کنید. مقادیر میتوانید یکی از شرایط زیر باشد.
circle,radius: برای ایجاد دایره عبارت circle و سپس مقدار شعاع آن circle,64
rect,width: برای ایجاد مربع عبارت rect و سپس مقدار ضلع آن rect,64
rect,width,height: برای ایجاد مستطیل عبارت rect و سپس مقدار طول و عرض آن rect,64,128
این مقادیر در تنظیم جاوا اسکریپتی نیز یکسان است.
mask='circle,64'

filter اگر میخواهید به صورت پیش فرض فیلتر خاصی بر روی تصویر اعمال شود، آنرا مشخص کنید.
برای اطلاع از معرفی فیلترها به آدرس معرفی فیلترها در CSS مراجعه کنید.
filter='blur(5px);grayscale(80%);hue-rotate(90deg);'

src اگر میخواهید به صورت پیش فرض یک تصویر نمایش داده شود، میتوانید آدرس آن یا عبارت base64 مخصوص تصویر را مقدار دهی اولیه کنید.
src='/images/temp.png'

توابع و خصوصیات جاوا اسکریپت

x,y اگر خواستید تصویر بر اساس نیاز شما جابجا شود، میتوانید این دو خصوصیت را تنظیم کنید.
wn.x-=5;
wn.y+=5;

scale برای تعیین درصد بزرگ نمایی و یا کوچک نمایی تصویر استفاده میشود. مقادیر میتوانید بین 0.125 تا 5 باشد
wn.scale=2

rotate برای تعیین زاویه چرخش تصویر استفاده میشود. مقادیر میتوانید بین -365 تا 365 باشد
wn.rotate=45

flip برای تعیین flip تصویر استفاده میشود. مقادیر یکی از حالات 0 تا 3 است که در قسمت مربوطه توضیح داده شده است.
wn.flip=1

filter همانند مقدار پیش فرض filter است. با این تفاوت که میتوانید به صورت آنلاین آنرا تصحیح کنید.
wn.filter='blur(5px);grayscale(80%);hue-rotate(90deg);'

mask همانند مقدار پیش فرض mask است. با این تفاوت که میتوانید به صورت آنلاین آنرا تصحیح کنید.
wn.mask='circle,64'

برش تصویر

اگر میخواهید تصویر را برش بزنید، ابتدا باید به کاربر اجازه انتخاب محدوده مد نظر را دهد. بدین منظور دستور anchorStart() اجازه میدهد که کاربر محدوده مد نظر راانتخاب کند. اگر خواستید این عمل لغو شود باید از دستور anchorStop() استفاده شود. و اگر میخواهید عمل برش انجام شود از دستور crop() استفاده شود.
wn.anchorStart()
wn.crop()

دریافت تصویر از دوربین

اگر تمایل دارید کاربر تصویر خود را توسط دوربین دستگاه گرفته و سپس اقدام به تغییرات کند میتوانید دستور startCamera() را فراخوانی کنید. سپس اگر به صورت موفق توانست به دوربین متصل شود صفحه نمایش تصویر دوربین ظاهر میشود. بر روی این صفحه میتوانید بین دوربین ها سوییچ کنید و یا عمل را لغو کنید. در صورت کلیک بر روی تصویر، آن تصویر انتخاب میشود.
اگر خواستید این عمل لغو شود باید از دستور stopCamera() استفاده شود.
wn.startCamera()

بارگذاری تصویر

اگر میخواهید به صورت دستی تصویری را بارگذاری کنید میتوانید از تابع load(data) استفاده کنید. در این تابع آدرس تصویر و یا محتوی تصویر به صورت base64 میتواند بعنوان ورودی باشد. همچنین اگر در حین استفاده تصویر در حافظه باشد، میتوانید از خصوصیت paste تصویر نیز استفاده کنید.
wn.load('image.png')

ذخیره تصویر

در نهایت باید اطلاعات تصویر ساخته و در اختیار شما قرار گیرد. خواستید به سرور منتقل کنید یا در جایی نمایشد دهید. دستور save() مقدار رشته url تصویر را به صورت فایل png برای شما ساخته و بر میگرداند.
...= wn.save()

مثال

Editor

Output







مثال فارسی در مودال

برای باز شدن مودال روی تصویر کلیک کنید