Crop تصویر با آجاکس

سلام . من به یک مشکل خوردم که فکر می کنم در خیلی از سایت ها عمومیت داشته باشه . من برای قسمتی از سایتم نیاز به آپلود آواتار توسط کاربر دارم که برای اون از carrierwave استفاده می کنم و هیچ مشکلی هم وجود نداره. حالا من می خوام توی همون فرم هنگامی که کاربر عکس رو آپلود می کنه عکس نمایش داده بشه و کاربر بتونه همانجا کراپ رو انجام بده. من از simple_form استفاده می کنم . یک جم به اسم carrierwave-crop وجود داره ولی مشکل اینجاست که یک پارشال میره در واقع به صورت همزمان فایل به فرم ارسال نمیشه تا توی همون فرم بتونیم کراپ رو انجام بدیم. در واقع نمی خوام برای کراپ کردن ۲ پارته کار انجام بشه. جم carrierwave-crop-on-fly به درستی کار نمی کنه و مشکل داره . با remotipart هم نتونستم مشکلم رو حل کنم. تمام پست های توی وب و stackoverflow را خوندم ولی اکثرا یا قدیمی هستن یا اینکه یک تیکه از کد را قرار دادن و مثالشون ناقص هست. من با جاوا اسکریپت و کافی خیلی راحت نیستم. می خواستم ببینم کسی از دوستان می تونه یه آموزش تهیه کنه برای این کار .
این هم یکی از بهترین کراپ ها که با جی کوئری هست http://www.jqueryrain.com/?VAAZCOTI و فکر می کنم برای استفاده خیلی خوب باشه.

اگر کسی بتونه کمک کنه و یک آموزش مرحله به مرحله بسازه خیلی ممنون میشم.

آموزش مرحله به مرحله خیلی زمانبره و من که نمی تونم. ولی سعی می کنم راهنمایی کنم.
کلا موضوع رو سمت کلاینت هندل کن. بجای اینکه فایل رو آپلود کنی، همونجا وقتی فایل رو انتخاب کرد تصویر رو بهش نشون بده و با استفاده از همین کتابخانه ای که معرفی کردی، تصویر رو تیکه کن. نهایتا خروجی رو با base64 بفرست به سرور.
نمونه ای از upload preview
http://opoloo.github.io/jquery_upload_preview/

2 پسندیده

سلام
ممنونم از پاسخ . شیوه ی کار چی هست رو می دونم ولی نتونستم اجرا کنم . نزدیک به ۲۰ تا پست بلند توی استک خوندم که متاسفانه یا خیلی قدیمی بودن و کار نمی کردن یا اینکه ناقص بود یه تیکه از کد.

من به نظرم این بهتره که فایل با base64 به سرور فرستاده بشه . اونوقت خود carrierwave تصویر بند انگشتی رو ایجاد می کنه . اما مشکل اصلی من کراپ زدن هست. در ضمن من هرکاری کردم نتونستم با base64 تصویر رو به فرمم بفرستم و از تک تک جم هایی که برای این کار بود استفاده کردم ولی نشد.

سلام اين كار يكمى ميتونه گيج كننده باشه، اميدوارم لينك زير كمك كنه، اگر نشد سعى ميكنم سر فرصت يه راه ديگه رو تست كنم

1 پسندیده

در واقع نمی خوام برای کراپ کردن ۲ پارته کار انجام بشه. داخل همون فرمی که کاربر داره اطلاعاتش رو پر می کنه می خوام عکس با آجاکس آپلود بشه و همونجا کراپ بشه . من تمام فیلم ها و مطالبی که می خواهید لینک بدید رو قبلا خودم سرچ کردم و دیدم .
می خواستم ببینم کسی می تونه یه فروم رو برای این کار استپ به استپ توی یه آموزش درست کنه.

به هر حال ممنون

با cropper کار کردین؟ خیلی خوب به نظر میاد.
یک نمونه PHP هم گذاشته که برای درک پروسه کار خیلی خوبه.

اما این پست جالبتره

1 پسندیده

کتابخونه ی خوبی هست . دیده بودم . نمی تونم باهاش کار کنم چون با جاوا اسکریپت خیلی راحت نیستم . در ضمن انگار ریلز با آجاکس مشکل داره .

برای این کار من ۲ روش وجود داره

۱- فایل قبل از اینکه به سرور فرستاده بشه کراپ زده بشه
۲- فایل اول به سرور (از طریق آجاکس و در همان فرم) فرستاده بشه و کراپ بخوره

روش دوم بهتره چون یه نسخه ی اورجینال ار فایل ارسالی کاربر توی سایت هست .

برای jquery کتابخانه های زیادی نوشتن منتها تو ریلز چه طوری میشه ازشون استفاده کرد

چرا ريلز با ajax مشكل داره؟
پستى كه لينك كردم رو ديديد؟
اگر مثال php كه cropper داده رو با دقت بررسى كنيد حتما ميتونيد در ريلز اونو پياده كنيد،

مثلا بخاطر exeption . اون مثال در قالب php هست نه در قالب فریمورک . من حتی از js.erb هم استفاده کردم ولی نتونستم…
بله دیدم . همونطور که گفتم من قبلا از این پست نزدیک به ۱۰ روز تلاش کردم ولی نتونستم انجام بدم .

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

اگر کسی جم ساخت یا تکیه کدی رو نوشت هزینه هم میدم

منظورتون رو در مورد exception متوجه نشدم،
خب دونستن اينكه بايد چكار كرد در حرف سادست اما درست كردن آموزش گام به گام براى كاراى end to end مثل اين يكمى وقت ميخواد.

حرفی ، حدیثی ؟ لا اقل یکی یه خاطره تعریف کنه از اولین کراپی که داده :wink:

اگر عجله نداريد من به زودى يه نمونه روى github ميزارم، كلا كار با Ajax توى ريلز خيلى سادست.
بايد بتونيد با استفاده از فرم و گزينه remote سايز عكسو به هر چيزى كه قراره crop كنه بفرستيد.
بايد ببينم تميزترين كار چيه و سر فرصت انجام بدم.
و اگر جاى شما بودم يكمى js كار ميكردم البته هيچكس از js خوشش نمياد تا اونجايى كه من ميدونم.

بازم ميگم ارن پست cropper و php رو اگر خوب مطالعه كنيد بد نيست

فک کنم من دیگه بدقول شدم, نتیجه ای بدست اومد?