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

سلام

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

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

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

مرسی

میشه چند تا مثال از اون خیلی سایت ها که این کار رو میکنن بزنی ؟

نقل قول:

---

نوشته شده توسط maxpayn2

میشه چند تا مثال از اون خیلی سایت ها که این کار رو میکنن بزنی ؟

---

توی Gmail اگه بخوای عکس پروفایل Upload کنی بدین صورت است برادر ! :لبخندساده:

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

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

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

خوب همین دیگه ! مهم انجام همین کارهاییست که فرمودید !

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

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

نقل قول:

---

نوشته شده توسط manager

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

---

شما قبلا این کار رو انجام دادید یا صرفاً یک تئوریه !؟

نقل قول:

---

نوشته شده توسط m.hamidreza

خوب همین دیگه ! مهم انجام همین کارهاییست که فرمودید !

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

---

موافقم

خوب، این یعنی اینکه براتون یک نمونه درست کنم مثل هلو که بعد شما ازش راحت استفاده کنید و بره تو گلو ؟ شما آستین بالا بزنید و یا علی بگید، هر جا مشکل داشتید بپرسید بنده و سایر دوستان شما رو راهنمائی می کنیم.

نقل قول:

---

نوشته شده توسط manager

خوب، این یعنی اینکه براتون یک نمونه درست کنم مثل هلو که بعد شما ازش راحت استفاده کنید و بره تو گلو ؟

---

دوباره مطالعه بفرمایید کسی منظورش این نبوده برادر !

نقل قول:

---

نوشته شده توسط manager

خوب، این یعنی اینکه براتون یک نمونه درست کنم مثل هلو که بعد شما ازش راحت استفاده کنید و بره تو گلو ؟ شما آستین بالا بزنید و یا علی بگید، هر جا مشکل داشتید بپرسید بنده و سایر دوستان شما رو راهنمائی می کنیم.

---

دوست من تئوری دادن راحته! انجامش سخته! مخصوصا دادن تئوری بدون علم به اینکه توانایی این کار وجود داره یا نه !

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

موفق باشی

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

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

    <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 شما مطالعه بفرمائید :

نقل قول:

---

دوست من تئوری دادن راحته! انجامش سخته! مخصوصا دادن تئوری بدون علم به اینکه توانایی این کار وجود داره یا نه !

---

بله ! چه بگوییم . . . ! فرمایش شما متین است .
:تشویق: دستت درد نکنه .