jquery - 不裁剪所选区域

Question

现在是裁剪部分:以正确的宽度、高度显示图像的不同部分。

要裁剪的区域

裁剪区域

这是我的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);

    }

}

}

Answer 1

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

此外，您可能还必须为 jCrop 设置 aspectRatio，即使它是 0 或 1，因为它需要根据图像尺寸。还要确保使用最新版本 0.9.9(截至本文)并检查 JavaScript 内部是否实际上是 0.9.9，因为有时他没有正确更新链接..这让我很困惑...

我认为您的服务器代码没问题 - 但您需要检查隐藏字段中设置的数字，以便您可以调试问题。