jQuery Asp.Net Fotoğraf Kırpmak

Fotoğraf kırpmak (crop) işlemi dışarıdan karışık bir işmiş gibi görünsede esasında çok basit bir işlemdir. Hele ki jCrop diye güzel jquery eklentisi varken bu işlem hem kolay hemde eğlencelidir. Olayın mantığına bakacak olursak, jCrop bizim için resim üzerinde seçtiğimiz kısımın yükseklik, genişlik, x ve y değerlerini alıyor. Sornasın da bu bilgiler eşliğinde orjinal resim üzerinde kesme işlemini yapıyoruz. Eklentinin bir çok ayarı ve özelliği bulunuyor, bunlara buradan ulaşabilirsiniz. Az kaldı unutuyordum, projenize jquery.js ve jCrop u eklemeyi unutmayın :)

default.aspx

<script type="text/javascript">
		    jQuery(document).ready(function() {
		    jQuery('#cropImage').Jcrop({
		            onSelect: updateCoords
		        });
		    });
		    function updateCoords(c) {
		        jQuery('#X').val(c.x);
		        jQuery('#Y').val(c.y);
		        jQuery('#W').val(c.w);
		        jQuery('#H').val(c.h);
		    };
		</script>

<body>
    <form id="form1" runat="server">
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="UploadImage" runat="server" Text="Upload Image" onclick="Upload_Click" />

        <asp:Literal runat="server" ID="ltrImage" />
        <asp:Button ID="Crop" runat="server" Text="Crop Image" onclick="Crop_Click" Visible="false" />

        <!-- hidden fileds -->
        <asp:HiddenField ID="X" runat="server" />
        <asp:HiddenField ID="Y" runat="server" />
        <asp:HiddenField ID="W" runat="server" />
        <asp:HiddenField ID="H" runat="server" />
    </form>
</body>

default.aspx.cs

    protected void Crop_Click(object sender, EventArgs e)
    {
        int x = Convert.ToInt32(X.Value);
        int y = Convert.ToInt32(Y.Value);
        int w = Convert.ToInt32(W.Value);
        int h = Convert.ToInt32(H.Value);
        string strFileName = Crop.CommandArgument;
        System.Drawing.Image image = Bitmap.FromFile(Server.MapPath("~/crop/" + strFileName));

        Bitmap bmp = new Bitmap(w, h, image.PixelFormat);
        Graphics g = Graphics.FromImage(bmp);
        g.DrawImage(image, new Rectangle(0, 0, w, h),
        new Rectangle(x, y, w, h), GraphicsUnit.Pixel);

        bmp.Save(HttpContext.Current.Request.PhysicalApplicationPath + "crop/reSize-" + strFileName, image.RawFormat);
        ltrImage.Text = "<img src=\"reSize-" + strFileName + "\" id=\"cropImage\" alt=\"" + strFileName + "\" />";
    }

    protected void Upload_Click(object sender, EventArgs e)
    {
        FileUpload1.SaveAs(Server.MapPath("~/crop/" + FileUpload1.FileName));
        ltrImage.Text = "<img src=\"" + FileUpload1.FileName + "\" id=\"cropImage\" alt=\"" + FileUpload1.FileName + "\" />";
        Crop.CommandArgument=FileUpload1.FileName;
        Crop.Visible = true;
    }

Çalışan örneğe buradan bakabilirsiniz, örneği indirmek için buraya tıklayabilirsiniz. Herkese iyi çalışmalar..

  • ertan dağ

    bu crop işleminde istediğimiz büyüklükte crop yapmak istesek nasıl yapabiliriz, örneğin 500×250 gibi.
    Teşekkürler.

  • Hüseyin Yıldırım

    Güzel uygulama elinize sağlık.

    Jcrop diğer özelliklerine bakmak için sitesini ziyaret ettim ama site kapalı.

    jcropta benim istediğim özellik en az genişlik 600, en az yükseklik 400 olması ve orantılı bir şekilde büyültülmesi.

    bunu nasıl yapabiliriz?

    iyi çalışmalar.

  • Emrah Değirmen

    Üstad güzel uygulama eline sağlık ama master page de kullandıgımız zaman hata veriyo degerler bos geliyo bi zahmet buna bakarmısın..

    Şimdiden teşekkürler …