不裁剪所选区域 [英] Not cropping the selected area

问题描述

现在是裁切部分:以正确的宽度，高度显示图像的不同部分.

要种植的面积

播种面积

这里是我的js代码

        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);

    }

}

}

解决方案

我曾经遇到过类似的问题，现在我不记得了，但是我认为您必须在jCrop中设置boxWidth选项，特别是如果您不显示图像的原始大小(图像实际上是1024x768，但您将裁剪器的样式设置为350x350)

此外，即使jCrop是0或1，您也可能必须为其设置aspectRatio，因为它需要根据图像尺寸重新计算尺寸. 还请确保使用最新版本0.9.9(截至本文)，并在JavaScript中检查它是否实际为0.9.9，因为有时他无法正确更新链接. >

我认为您的服务器代码还可以，但是您需要检查在隐藏字段中设置的号码是什么，以便调试问题.

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);

    }

}

}

解决方案

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.

这篇关于不裁剪所选区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！