برش بخشی از تصویر (Crop Image)

در بسیاری از سایت ها (مانند facebook و...) ملاحظه می کنید که به کاربران سایت اجازه داده می شود که بخش دلخواهی از تصویر را انتخاب نمایند ، هدف از این کار انتخاب بخش مناسبی از تصویر و یکدست شدن اندازه آن هاست .

در این مقاله Crop کردن بخشی از عکس را به وسیله کتابخانه JQuery آموزش خواهم داد .

قبل از شروع کار کتابخانه های JQuery و JCrop و همچنین فایل Css مربوط را دانلود کرده و به پروژه اضافه نمایید :

    <link href="Css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />

    <script src="Js/jquery.min.js" type="text/javascript"></script>

    <script src="Js/jquery.Jcrop.min.js" type="text/javascript"></script>

یک کنترل Image به صفحه اضافه نمایید و آن را به یک تصویر دلخواه مرتبط کنید :

<asp:Image runat="server" ID="pic" ImageUrl="Images/Penguins.jpg" CssClass="crop" />

برای فعال کردن قابلیت Croping (برش) به تصویر فوق کافیست اسکریپت زیر را به تگ Head اضافه نمایید :

<script>

        jQuery(function() {
            jQuery('.crop').Jcrop();
        });


 </script>

در مقالات قبلی با کتابخانه JQuery و نحوه کار با المان های صفحه آشنا شده بودیم ، همانطور که ملاحظه می کنید تابع Jcrop را به تگ هایی که Css آن ها crop هستند نسبت داده ایم، البته تنها تگی که این Css را دارد همان کنترل Image می باشد ، استفاده از Css به جای ID به دلیل سمت سرور بودن این کنترل است چرا که ID کنترل های سمت سرور پس از Generate شدن تغییر می کند .

اکنون تصویر شما قابل برش شده است ، در قدم بعدی پس از انتخاب ناحیه برش عملیات برش توسط یک تابع سمت سرور به صورت زیر انجام می پذیرد :

    private void CropMe(string pathOutputImage, System.Drawing.Image inputImage, int Width, int Height, int X, int Y)
    {
        Bitmap bmpImage, bmpCrop;
        Rectangle recCrop, recDest;
        Graphics gphCrop;

        bmpImage = new Bitmap(inputImage);
        recCrop = new Rectangle(X, Y, Width, Height);
        bmpCrop = new Bitmap(recCrop.Width, recCrop.Height, bmpImage.PixelFormat);
        gphCrop = Graphics.FromImage(bmpCrop);
        recDest = new Rectangle(0, 0, Width, Height);
        gphCrop.DrawImage(bmpImage, recDest, recCrop.X, recCrop.Y, recCrop.Width, recCrop.Height, GraphicsUnit.Pixel);

        bmpCrop.Save(pathOutputImage);

    }

این تابع تصویر اصلی را دریافت کرده و ناحیه مورد نظر ما (طول ، عرض ، X و Y) را برش می دهد ، بنابراین ما برای برش به X و Y و همچنین طول و عرض ناحیه انتخاب شده نیاز داریم ، برای این کار ابتدا 4 کنترل HiddenField از نوع html که Runart=Server هستند برای این چهار مقدار قرار می دهیم :

    <input runat="server" type="hidden" id="x" name="x" />
    <input runat="server" type="hidden" id="y" name="y" />
    <input runat="server" type="hidden" id="w" name="w" />
    <input runat="server" type="hidden" id="h" name="h" />

اکنون نیاز داریم در هنگام تغییر اندازه و مکان ناحیه برش مقادیر فیلد های زیر پر شوند ، JCrop برای این کار یک Event در نظر گرفته است :

        jQuery(function() {
            jQuery('.crop').Jcrop({ 
                onSelect: updateCoords
            });
        });

هماطنور که ملاحظه می کنید تابع updateCoords را به رویداد onSelect نسبت دادیم ، اکنون کافیست این تابع را پیاده سازی نماییم :

        function updateCoords(c) {
            jQuery('#x').val(c.x);
            jQuery('#y').val(c.y);
            jQuery('#w').val(c.w);
            jQuery('#h').val(c.h);
        };

تابع فوق مقادیر جدید x ,y ,w,h را در کنترل های HiddenField  ذخیره می نماید .

اکنون کافیست مقادیر فوق را به تابع CropMe که در بالا ذکر نمودم نسبت دهیم :

        string picName = Path.GetFileName(pic.ImageUrl);
        string cropName = Path.GetRandomFileName() + ".jpg";

        CropMe(Server.MapPath(@"~\Croped\" + cropName), System.Drawing.Image.FromFile(Server.MapPath(@"~\Images\" + picName)),
            int.Parse(w.Value), int.Parse(h.Value), int.Parse(x.Value), int.Parse(y.Value));

        Response.Redirect("~/Croped/" + cropName);

توضیحات دیگر اینکه کتابخانه JCrop تنظیمات دیگری هم در اختیار شما قرار می دهد ، به عنوان مثال شما میتوانید به صورت پیشفرض بخشی از عکس را انتخاب نمایید یا حداقل و حداکثر اندازه متغیر را تعیین نمایید :

jQuery(function() {
            jQuery('.crop').Jcrop({
                aspectRatio: 1,
                setSelect: [150, 150, 0, 0],
                maxSize: [300, 300],
                minSize: [150, 150],
                onSelect: updateCoords
            });
        });

فایل پروژه را میتوانید از اینجا دانلود نمایید