نمایش نتایج 1 تا 11 از 11

نام تاپیک: انتخاب قسمتی از تصویر بصورت آنلاین (Client Side) ؟

  1. #1
    محروم شده
    تاریخ عضویت
    خرداد 1386
    پست
    19

    انتخاب قسمتی از تصویر بصورت آنلاین (Client Side) ؟

    سلام

    من می خواستم کاربر قسمتی از عکس upload شده خودش رو بصورت آنلاین با کشیدن مستطیلی روی عکس انتخاب کنه. (Image Crop)

    خیلی از سایت ها برای ایجاد Avatar این کارو می کنند.

    کسی در این مورد اطلاعات یا کامپوننت خاصی داره ؟ (البته Free)

    مرسی

  2. #2
    کاربر دائمی آواتار maxpayn2
    تاریخ عضویت
    مهر 1385
    محل زندگی
    طبقه سوم - اطاق اول - جولوی مانیتور - روی صندلی
    پست
    1,068
    میشه چند تا مثال از اون خیلی سایت ها که این کار رو میکنن بزنی ؟

  3. #3
    کاربر دائمی آواتار m.hamidreza
    تاریخ عضویت
    اسفند 1385
    محل زندگی
    کره زمین
    پست
    1,465
    نقل قول نوشته شده توسط maxpayn2 مشاهده تاپیک
    میشه چند تا مثال از اون خیلی سایت ها که این کار رو میکنن بزنی ؟
    توی Gmail اگه بخوای عکس پروفایل Upload کنی بدین صورت است برادر !

  4. #4
    کاربر دائمی آواتار manager
    تاریخ عضویت
    شهریور 1384
    محل زندگی
    Z
    سن
    39
    پست
    771

    Exclamation

    انتخاب بخشی از تصویر بسیار راحت و شیرینه و نیاز به مراحل زیر داره :

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

    برای اینکه در مرحله دوم کاربر بتونه عکس خودش رو Corp کنه شما تصویر رو در صفحه نمایش بدید. یک جدول که یک ستون و یک ردیف دارد و دارای Border به اندازه 2 می باشد رو به صورت Absolute بر روی این تصویر نمایش بدید. این جدول باید به گونه ای باشد که قابل Drag باشد و طول و عرض آن قابل تغییر باشد. 4 تا TextBox که به صورت invisible هستند رو هم در صفحه قرار بدید. مقدار این TextBox باید برابر x و y و طول و عرض جدول باشد. بعد از ارسال این مقادیر در سمت Server شما باید با توجه به مقادیر ارسال شده تصویر را ویرایش کرده و ذخیره کنید و سپس به کاربر نمایش دهید.

  5. #5
    کاربر دائمی آواتار m.hamidreza
    تاریخ عضویت
    اسفند 1385
    محل زندگی
    کره زمین
    پست
    1,465
    خوب همین دیگه ! مهم انجام همین کارهاییست که فرمودید !

    اول چگونگی ایجاد یک لایه یا جدول که هم قابل drag drop باشه و هم قابل resize !
    دوم تشخیص ناحیه select شده !
    سوم پردازش عکس !

    اینا هرکدومش داستان داره برادر !
    از اولی شروع کنیم . . . بقول یکی از دوستان بیاین وسط !

  6. #6
    محروم شده
    تاریخ عضویت
    خرداد 1386
    پست
    19
    نقل قول نوشته شده توسط manager مشاهده تاپیک

    برای اینکه در مرحله دوم کاربر بتونه عکس خودش رو Corp کنه شما تصویر رو در صفحه نمایش بدید. یک جدول که یک ستون و یک ردیف دارد و دارای Border به اندازه 2 می باشد رو به صورت Absolute بر روی این تصویر نمایش بدید. این جدول باید به گونه ای باشد که قابل Drag باشد و طول و عرض آن قابل تغییر باشد. 4 تا TextBox که به صورت invisible هستند رو هم در صفحه قرار بدید. مقدار این TextBox باید برابر x و y و طول و عرض جدول باشد. بعد از ارسال این مقادیر در سمت Server شما باید با توجه به مقادیر ارسال شده تصویر را ویرایش کرده و ذخیره کنید و سپس به کاربر نمایش دهید.
    شما قبلا این کار رو انجام دادید یا صرفاً یک تئوریه !؟

    نقل قول نوشته شده توسط m.hamidreza مشاهده تاپیک
    خوب همین دیگه ! مهم انجام همین کارهاییست که فرمودید !

    اول چگونگی ایجاد یک لایه یا جدول که هم قابل drag drop باشه و هم قابل resize !
    دوم تشخیص ناحیه select شده !
    موافقم

  7. #7
    کاربر دائمی آواتار manager
    تاریخ عضویت
    شهریور 1384
    محل زندگی
    Z
    سن
    39
    پست
    771
    خوب، این یعنی اینکه براتون یک نمونه درست کنم مثل هلو که بعد شما ازش راحت استفاده کنید و بره تو گلو ؟ شما آستین بالا بزنید و یا علی بگید، هر جا مشکل داشتید بپرسید بنده و سایر دوستان شما رو راهنمائی می کنیم.

  8. #8
    کاربر دائمی آواتار m.hamidreza
    تاریخ عضویت
    اسفند 1385
    محل زندگی
    کره زمین
    پست
    1,465
    نقل قول نوشته شده توسط manager مشاهده تاپیک
    خوب، این یعنی اینکه براتون یک نمونه درست کنم مثل هلو که بعد شما ازش راحت استفاده کنید و بره تو گلو ؟
    دوباره مطالعه بفرمایید کسی منظورش این نبوده برادر !

  9. #9
    محروم شده
    تاریخ عضویت
    خرداد 1386
    پست
    19
    نقل قول نوشته شده توسط manager مشاهده تاپیک
    خوب، این یعنی اینکه براتون یک نمونه درست کنم مثل هلو که بعد شما ازش راحت استفاده کنید و بره تو گلو ؟ شما آستین بالا بزنید و یا علی بگید، هر جا مشکل داشتید بپرسید بنده و سایر دوستان شما رو راهنمائی می کنیم.
    دوست من تئوری دادن راحته! انجامش سخته! مخصوصا دادن تئوری بدون علم به اینکه توانایی این کار وجود داره یا نه !

    با تشکر از روش پیشنهادی شما

    موفق باشی

  10. #10
    کاربر دائمی آواتار manager
    تاریخ عضویت
    شهریور 1384
    محل زندگی
    Z
    سن
    39
    پست
    771

    Exclamation

    دوست عزیز اینجا هیچ کس وظیفه نداره به سوالات شما جواب بده و جواب دادن به سوالات شما، لطفی ست که در حق شما می شود ...

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

        <script language="javascript">
    var mousedown=false;
    var xstep=-1;
    var ystep=-1;
    var cropperX=0;
    var cropperY=0;
    var cropperWidth=0;
    var cropperHeight=0;
    var imgWidth=0;
    var imgHeight=0;

    function Cropper_Onmouseover()
    {
    document.getElementById("Cropper").style.cursor='m ove';
    }
    function Cropper_Onmouseout()
    {
    document.getElementById("Cropper").style.cursor='' ;
    }
    function Cropper_Onmousedown()
    {
    cropperWidth=parseInt(document.getElementById("Cro pper").width);
    cropperHeight=parseInt(document.getElementById("Cr opper").height);
    imgWidth=parseInt(document.getElementById("Image1" ).width);
    imgHeight=parseInt(document.getElementById("Image1 ").height);
    xstep=event.x-parseInt(document.getElementById("Cropper").style. left);
    ystep=event.y-parseInt(document.getElementById("Cropper").style. top);
    document.getElementById("hiWidth").value=cropperWi dth;
    document.getElementById("hiHeight").value=cropperH eight;
    mousedown=true;
    }
    function Cropper_Onmouseup()
    {
    xtep=ystep=-1;
    mousedown=false;
    }
    function Cropper_Onmousemove()
    {
    if(mousedown)
    {
    var leftset=false,topset=false;
    var nextx=event.x-xstep,nexty=event.y-ystep;

    cropperX=parseInt(document.getElementById("Cropper ").style.left);
    cropperY=parseInt(document.getElementById("Cropper ").style.top);

    if(nextx+cropperWidth>imgWidth)
    {
    document.getElementById("Cropper").style.left=imgW idth-cropperWidth;
    leftset=true;
    }

    if(nexty+cropperHeight>imgHeight)
    {
    document.getElementById("Cropper").style.top=imgHe ight-cropperHeight;
    topset=true;
    }

    if(nextx<0)
    {
    document.getElementById("Cropper").style.left=0;
    leftset=true;
    }

    if(nexty<0)
    {
    document.getElementById("Cropper").style.top=0;
    topset=true;
    }

    if(!leftset)
    document.getElementById("Cropper").style.left=next x;
    if(!topset)
    document.getElementById("Cropper").style.top=nexty ;

    document.getElementById("hiX").value=nextx;
    document.getElementById("hiY").value=nexty;
    }
    }

    </script>
    ...
    <table class="Cropper" id="Cropper" onmouseover="Cropper_Onmouseover()" onmouseout="Cropper_Onmouseout()"
    onmousedown="Cropper_Onmousedown()" onmouseup="Cropper_Onmouseup()" onmousemove="Cropper_Onmousemove()"
    style="left: 135px; top: 75px; position: absolute" height="100" width="100">
    <tr>
    <td>
    &nbsp;</td>
    </tr>
    <tr>
    <td align="center">
    &nbsp;<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Crop" /></td>
    </tr>
    </table>
    <input type="hidden" id="hiX" runat="server" />
    <input type="hidden" id="hiY" runat="server" />
    <input type="hidden" id="hiWidth" runat="server" />
    <input type="hidden" id="hiHeight" runat="server" />
    <table style="position: absolute; left: 1px; top: 437px; width: 153px" height="100"
    width="100">
    <tr>
    <td height="46">
    Simple Cropper
    </td>
    </tr>
    <tr>
    <td>
    </td>
    </tr>
    </table>
    <asp:Image ID="Image1" CssClass="img" runat="server" ImageUrl="~/images/image.jpg" /></div>

    کل هلو رو هم .... ببخشید اشتباه گفتم کل برنامه رو هم براتون نوشتم ، کلمه عبور فایل هم www.dotnetsource.com هست.

    در ضمن جناب آقای m.hamidreza شما مطالعه بفرمائید :
    دوست من تئوری دادن راحته! انجامش سخته! مخصوصا دادن تئوری بدون علم به اینکه توانایی این کار وجود داره یا نه !
    فایل های ضمیمه فایل های ضمیمه

  11. #11
    کاربر دائمی آواتار m.hamidreza
    تاریخ عضویت
    اسفند 1385
    محل زندگی
    کره زمین
    پست
    1,465
    بله ! چه بگوییم . . . ! فرمایش شما متین است .
    دستت درد نکنه .

تاپیک های مشابه

  1. تفاوت بین زبانهای Client-Side و زبانهای Server-Side
    نوشته شده توسط vahidsadeqi در بخش طراحی وب (Web Design)
    پاسخ: 4
    آخرین پست: جمعه 19 مرداد 1386, 19:14 عصر
  2. Client Side
    نوشته شده توسط Delphi Skyline در بخش توسعه وب (Web Development)
    پاسخ: 0
    آخرین پست: چهارشنبه 13 تیر 1386, 11:37 صبح
  3. Client Side Script
    نوشته شده توسط Majid2003 در بخش ASP.NET Web Forms
    پاسخ: 2
    آخرین پست: سه شنبه 01 آذر 1384, 18:57 عصر
  4. Client Side Scripting
    نوشته شده توسط Majid2003 در بخش ASP.NET Web Forms
    پاسخ: 1
    آخرین پست: جمعه 18 مهر 1382, 12:34 عصر

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •