برش و آپلود تصویر با Thumbnail با استفاده از jQuery و HTML5 در MVC

در این مقاله ما قصد داریم که با طرح یک مثال نحوه برش و آپلود تصویر با نمایش زنده Thumbnail با استفاده از jQuery و HTML5 Canvas در ASP.Net MVC توضیح دهیم.

عکس ها با استفاده از پلاگین Jcrop جی کوئری برش می خورند و با استفاده از HTML5 Canvas به صورت زنده در Thumbnail نمایش داده خواهند شد و در نهایت عکس برش خورده در یک پوشه در سرور با استفاده از Asp.Net Mvc آپلود و ذخیره می شود.

View

View شامل عناصر FileUpload ،Image ، Button ،Submit Button ، HTML5 Canvas و hidden field است.

در داخل رویداد Jquery(document).ready یک رویداد Change برای کنترل کردن FileUpload و یک رویداد هم برای Click برای Html Button تعریف می کنیم.

زمانی که یک فایل در داخل کنترل FileUpload انتخاب می شود ، آن توسط HTML5 FileReader API خوانده می شود و سپس عکس در داخل عنصر Image داده خواهد شد و در نهایت پلاگین Jcrop جی کوئری بر روی عنصر Image پیاده سازی می شود.

پلاگین Jcrop جی کوئری تابع SetCoordinates را در رویدادهای onChange و OnSelect فراخوانی می کند که به ما اجازه ذخیره مختصات و ابعاد را می دهد به عنوان مثال طول و عرض عکس برش خورده در hidden fields.

هنگامی که دکمه Crop کلیک می شود، ابتدا یک نمونه از Canvas HTML5 ساخته می شود و سپس تصویر را در یک شی Image با (OnLoad event handler) مدیریت رویداد onLoad قرار می دهد.

در داخل (OnLoad event handler) مدیریت رویداد onLoad ، عکس اصلی در Canvas با استفاده از طول و عرض ذخیره شده دوباره ترسیم می شود ، به عنوان مثال طول و عرض تصویر برش خورده.

در نهایت base64 string تصویر برش خورده با استفاده از تابع toDataURL از canvas فراخوانی و در imgCropped hidden field ذخیره می شود.

 

فضای نام ها

نیاز است شما فضای نام زیر را به پروژتان بیافزایید.

 

کنترلر

کنترلر شامل دو اکشن متد است:

یک متد برای مدیریت عملیات از نوع Get که در داخلش یک View ساده برگشت داده خواهد شد.

اکشن متد دومی برای رسیدگی به عملیات از نوع Post برای اپلود کردن عکس برش خورده استفاده می شود و اکشن متد از نوع Get زمانی که بر روی دکمه Upload کلیک میشود فراخوانی می شود.

عکس بریده شده از imgCropped hidden field به عنوان BASE64 string با استفاده از نامش از درخواست خوانده می شود.

از فهرست و سپس این رشته به ارایه ای از بایت که در نهایت در پوشه با استفاده از کلاس FileStream ذخیره می شود ، تبدیل می شود.

 

 

دانلود سورس کد
پسورد : csharpoop.com

برش و آپلود تصویر با Thumbnail با استفاده از jQuery و HTML5 در MVC
5 (100%) 1 رای

(434 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *