Not cropping the selected area

问题

Now comes the cropping part: Shows a different part of the image with the correct width, height.

Area to be cropped

Cropped Area

Heres my js code

        jQuery(document).ready(function () {

            jQuery('#imgCrop').Jcrop({

                onSelect: storeCoords,
                onChange: storeCoords 


            });

        });

      function storeCoords(c) {

    jQuery('#X').val(c.x);

    jQuery('#Y').val(c.y);

    jQuery('#W').val(c.w);
    jQuery('#H').val(c.h);

  };

protected void btnCrop_Click(object sender, EventArgs e)
{

    string ImageName = Session["WorkingImage"].ToString();

    int w = Convert.ToInt32(W.Value);

    int h = Convert.ToInt32(H.Value);

    int x = Convert.ToInt32(X.Value);

    int y = Convert.ToInt32(Y.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 = path + "crop" + ImageName;

            CroppedImage.Save(SaveTo, CroppedImage.RawFormat);

            pnlCrop.Visible = false;

            pnlCropped.Visible = true;

            imgCropped.ImageUrl = "images/crop" + ImageName;

        }

    }

}
static byte[] Crop(string Img, int Width, int Height, int X, int Y)
{

    try
    {

        using (SD.Image OriginalImage = SD.Image.FromFile(Img))
        {

            using (SD.Bitmap bmp = new SD.Bitmap(Width, Height))
            {

                bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);

                using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))
                {

                    Graphic.SmoothingMode = SmoothingMode.AntiAlias;

                    Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;

                    Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;

                    Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, Height, SD.GraphicsUnit.Pixel);

                    MemoryStream ms = new MemoryStream();

                    bmp.Save(ms, OriginalImage.RawFormat);

                    return ms.GetBuffer();

                }

            }

        }

    }

    catch (Exception Ex)
    {

        throw (Ex);

    }

}

}

回答1:

I had a similar issue once and I cannot remember exactly now but i think you have to set the boxWidth option in the jCrop especially if you are not showing the original size of the image (The image is actually 1024x768 but you style your cropper to 350x350)

Also you might have to set the aspectRatio for jCrop even if it is 0 or 1 because it needs to recalculate the dimensions based on the image size. Also makes sure to use the latest version 0.9.9 (as of this post) and check inside the JavaScript if it is actually 0.9.9 because some times he does not update the links properly.. It caught me out...

I think your server code is OK- But you need to inspect what are the number getting set in the hidden fields so that you can debug the issue.

来源：https://stackoverflow.com/questions/8797200/not-cropping-the-selected-area