crop کردن عکس با استفاده از Canvas

چجوری عکس خودمون رو برش بدیم به صورت انلاین روی وب ببریم یا تغییر سایز بدیم؟ خب میخوام توی این آموزش روش کار رو بهتون توضیح بدم. در این مثال میخوایم ببینیم چجوری میشه عکس ها رو با استفاده از Canvas دستکاری کرد و برید. میتونید پیش نمایش این کد رو اینجا ببینید.

مرحله۱: ابتدا عکسی که میخوایم crop کنیم رو به صفحه اظافه میکنیم. من عکسم رو با نام image.jpg اظافه میکنم به صفحه با دستورات زیر:

مرحله۲: استایل های CSS مربوط به تصویر و محل نگهدارنده تصویر رو اظافه میکنیم

در مرحله ی بعد خطوط انتخاب گر دور عکس رو انتخاب میکنیم. این خطوط حدود عکس رو به ما نشون میدن که با با drag کردن اونا میتونیم عکس رو تکون بدیم یا سایز عکس رو عوض کنیم

مرحله۳: دستورات مربوط به تغییر سایز عکس و بریدن عکس رو مینویسیم. این کار با استفاده از Canvas انجام خواهد شد

مرحله۴: توی این مرحله دستورات مربوط به عملیات Resize کردن (تغییر اندازه عکس با نگهداشتن کلیک موس) و drag کردن عکس (جابه جایی عکس) رو مینویسیم.

در مرحله ی اخر دستورات مربوط به html رو کامل میکنیم:

خب حالا همه چیز آماده شد 🙂 میتونید با استفاده از این کد عکس های خودتون رو تغییر سایت بدید یا برش بدید. میتونید این کد رو توی پروژه های گالری عکس به کار ببرید. کد رو میتونید از اخر پست دانلود کنید. به علت کمبود وقت نشد همه رو خط به خط توضیح بدم براتون. هرکسی توضیح خواست کامنت بزاره براش توضیح میدم

بریدن و تغییر سایز عکس با convas
بریدن و تغییر سایز عکس با convas
ImageResizeCropCanvas.zip
Version: 1.0.0
55.1 KiB
28 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟