locked
How to Enable auto crop after image load complete? RRS feed

  • Question

  • User1557988624 posted

    Hi,

    In my project, i have a concept of Upload Profile picture.

    In that, How can i enable Image crop automatically after loading the image.

    i am using "JCrop" for crop the image.

    Please help me in this.

    Thanks in Advance...

    Thursday, May 24, 2012 8:46 AM

Answers

  • User-1129594362 posted

    Download JCrop Plugin

    http://deepliquid.com/content/Jcrop.html

    <script src="jcrop/js/jquery.color.js" type="text/javascript"></script>
       <script src="jcrop/js/jquery.Jcrop.js" type="text/javascript"></script>
       <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/vader/jquery-ui.css" type="text/css" />
       <link rel="stylesheet" href="jcrop/css/jquery.Jcrop.css"  type="text/css" />
       <link rel="stylesheet" href="jcrop/demos/demo_files/demos.css" type="text/css" />
    <script type="text/javascript">
           
           $(function () {
               var api;
               $('#imgCrop').Jcrop({
                   bgOpacity: 0.5,
                   bgColor: 'black',
                   addClass: 'jcrop-dark',
                   aspectRatio: 1,
                   onSelect: updateCoords
               }, function () {
                   api = this;
                   api.setSelect([130, 65, 130 + 350, 65 + 285]);
                   api.setOptions({ bgFade: true });
                   api.ui.selection.addClass('jcrop-selection');
    
               });
    
           });
    
           function updateCoords(c) {
               jQuery('#X').val(c.x);
               jQuery('#Y').val(c.y);
               jQuery('#W').val(c.w);
               jQuery('#H').val(c.h);
           };
    
    
           function checkCoords() {
               if (parseInt($('#W').val())) return true;
               alert('Please select a crop region then press submit.');
               return false;
           };
       </script>

    Now ASPX Code

    <asp:Image ID="imgCrop" runat="server" />
               <br />
               <asp:HiddenField ID="X" runat="server" />
               <asp:HiddenField ID="Y" runat="server" />
               <asp:HiddenField ID="W" runat="server" />
               <asp:HiddenField ID="H" runat="server" />
    <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" CssClass="gray_bt"
                   OnClientClick="return checkCoords();" />

    Now Button click event in the code behind

    if (W.Value != "" || H.Value != "" || X.Value != "" || Y.Value != "")
           {
               int x = Convert.ToInt32(X.Value);
               int y = Convert.ToInt32(Y.Value);
               int w = Convert.ToInt32(W.Value);
               int h = Convert.ToInt32(H.Value);
    
    
               byte[] CropImage = Crop(path + ImageName, w, h, x, y);
               using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
               {
                   ms.Write(CropImage, 0, CropImage.Length);
                   using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))
                   {
                       string SaveTo = "Images+ "//" + "crop" + ImageName;
                       //Caded Image Name
                       CropedImageName = "crop" + ImageName;
                       CroppedImage.Save(Server.MapPath(SaveTo), CroppedImage.RawFormat);
                       pnlCrop.Visible = false;
                       pnlCropped.Visible = true;
                       imgCropped.ImageUrl = SaveTo;
                       
                   }
               }






    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 29, 2012 4:30 AM