C# 将图像保存在服务器中，并根据前端预览返回的值进行裁剪

我在我们的项目中使用jcrop插件，遇到了一个问题。问题是，我正在从预览图像裁剪图像，当我尝试从控制器的原始图像裁剪该部分时，图像没有从我选择的确切位置裁剪

当用户单击“浏览”并选择一张照片时，我将该图像上载到服务器，并打开一个视图，其中包含从服务器指向该图像的链接。 使用插件，它可以正确裁剪并在视图中预览

假设图像的宽度为1000px，高度为500px，我将其加载到宽度为700px，高度为350px的img src中（在jcrop中，有一个选项指定固定的宽度/高度，称为boxwidth和boxheight）。然而，即使我们给出了一些精确的大小，插件也会根据像素+-50px等改变宽度和高度

在POST方法中，我得到了作物面积宽度、作物面积高度、作物x坐标、作物y坐标

我正在用POST方法裁剪图像。在这里，我将原始图像的宽度除以预览图像的宽度，将原始图像的高度除以预览图像的高度，得到图像的比例差，然后将其与x/y坐标值和宽度/高度裁剪区域相乘，以便从原始图像中正确裁剪

Iam正在从字节[]（来自internet的代码）裁剪图像。我认为我的问题在于这一行使用“新矩形（intx，inty，intwidth，intheight）”提取裁剪区域

因为我不能使用矩形中的浮点值，所以iam使用int值，我想这就是为什么会发生这种变化。是否有一种方法可以使用“新矩形（”中的平面值作为参数

我正在尽力解释我的情况，如果你需要更多的解释，请告诉我。谢谢

为了更好地了解我的情况，请参见下图

这是我到目前为止所做的编码部分

查看页面

@using (Html.BeginForm("PhotoChange", "Profile", FormMethod.Post, new { enctype = "multipart/form-data", id = "changeProfilePhotoForm" }))
{
    @Html.HiddenFor(x => x.IsCropped, new { id = "IsCropped", Value = @Model.IsCropped })
    @Html.HiddenFor(x => x.PersonID)
    @Html.HiddenFor(x => x.PersonDetailID)
    @Html.HiddenFor(x => x.Photo)
    @Html.HiddenFor(x => x.ImageURL, new { id = "ImageURL", Value = @Model.ImageURL })
    @Html.HiddenFor(x => x.CropPointX, new { id = "CropPointX" })
    @Html.HiddenFor(x => x.CropPointY, new { id = "CropPointY" })
    @Html.HiddenFor(x => x.CropPortionWidth, new { id = "CropPortionWidth" })
    @Html.HiddenFor(x => x.CropPortionHeight, new { id = "CropPortionHeight" })
    @Html.HiddenFor(x => x.PreviewImageWidth, new { id = "PreviewImageWidth" })
    @Html.HiddenFor(x => x.PreviewImageHeight, new { id = "PreviewImageHeight" })

    <div class="form-horizontal image-preview-page">

        <div class="row">
            <div class="form-group">
                <div class="col-sm-12">
                    <div id="profile-image-preview-pane">
                        <div class="profile-image-preview-container">
                            <img src="@Model.ImageURL" class="profile-image-preview-image" alt="Preview" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group">
                <div class="col-sm-12">
                    <div class="profile-image-source-wrap">
                        <img id="profile-image-source" accept="image" name="photo" id="Photo" src="@Model.ImageURL" />
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group">
                <div class="col-sm-12 text-center">
                    <input type="button" value="Upload" onclick="cropImage()" />
                </div>
            </div>
        </div>

    </div>
}


    <script type="text/javascript">

        var imageCropWidth,
            imageCropHeight,
            cropPointX,
            cropPointY,
            jcrop_api,
            boundx,
            boundy

        parent.$('.modal-content').css('height', '510px');
        parent.$('.bootstrap-modal-body').css('height', '500px');

        parent.$('.modal-content').css('width', '680px');
        parent.$('.bootstrap-modal-body').css('width', '690px');

        // Grab some information about the preview pane
        $preview = $('#profile-image-preview-pane'),
        $pcnt = $('#profile-image-preview-pane .profile-image-preview-container'),
        $pimg = $('#profile-image-preview-pane .profile-image-preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();

        $('#profile-image-source').Jcrop({
            boxWidth: 450, //Maximum width you want for your bigger images
            boxHeight: 400, //Maximum Height for your bigger images
            minSize: [25, 25],
            onChange: updatePreview,
            onSelect: updatePreview,
            aspectRatio: 1,
            bgFade: true, // use fade effect
            bgOpacity: .6, // fade opacity
        }, function () {

            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];

            // Store the API in the jcrop_api variable
            jcrop_api = this;

            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });

        function updatePreview(c) {

            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;

                $pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });


                cropPointX = Math.round(c.x);
                cropPointY = Math.round(c.y);

                imageCropWidth = Math.round(c.w);
                imageCropHeight = Math.round(c.h);

                $('#CropPointX').val(cropPointX);
                $('#CropPointY').val(cropPointY);
                $('#CropPortionWidth').val(imageCropWidth);
                $('#CropPortionHeight').val(imageCropHeight);

                $('#PreviewImageWidth').val($('.jcrop-holder img').width());
                $('#PreviewImageHeight').val($('.jcrop-holder img').height());
            }
        };

        function cropImage() {

            if (imageCropWidth == 0 && imageCropHeight == 0) {
                alert("Please select crop area.");
                return;
            }

            $('#IsCropped').val(true);

            $.ajax({
                url: "@Url.Action("PhotoChange", "Profile")",
                type: 'POST',
                data: $("#changeProfilePhotoForm").serialize(),
                async: false,
                success: function (data) {
                    parent.ChangeImageAfterSave('@ViewData["CroppedImage"]')
                },
                error: function (data) { }
            });


            }
    </script>

---

我使用jcrop裁剪图像的另一种解决方案：

    public void photocrop(int x, int y, int w, int h)
    {

            string filePath = Path.Combine(Server.MapPath("/images/users/temp"), "MyImage.jpg");
            System.Drawing.Image orgImg = System.Drawing.Image.FromFile(filePath);
            Rectangle CropArea = new Rectangle(
                Convert.ToInt32(x),
                Convert.ToInt32(y),
                Convert.ToInt32(w),
                Convert.ToInt32(h));
            Bitmap bitMap = new Bitmap(CropArea.Width, CropArea.Height);
            using (Graphics g = Graphics.FromImage(bitMap))
            {
                g.DrawImage(orgImg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), CropArea, GraphicsUnit.Pixel);
            }
            cropFilePath = Path.Combine(Server.MapPath("~/images/users"), fileNameOk);
            bitMap.Save(cropFilePath);

   }

---

我使用jcrop裁剪图像的另一种解决方案：

    public void photocrop(int x, int y, int w, int h)
    {

            string filePath = Path.Combine(Server.MapPath("/images/users/temp"), "MyImage.jpg");
            System.Drawing.Image orgImg = System.Drawing.Image.FromFile(filePath);
            Rectangle CropArea = new Rectangle(
                Convert.ToInt32(x),
                Convert.ToInt32(y),
                Convert.ToInt32(w),
                Convert.ToInt32(h));
            Bitmap bitMap = new Bitmap(CropArea.Width, CropArea.Height);
            using (Graphics g = Graphics.FromImage(bitMap))
            {
                g.DrawImage(orgImg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), CropArea, GraphicsUnit.Pixel);
            }
            cropFilePath = Path.Combine(Server.MapPath("~/images/users"), fileNameOk);
            bitMap.Save(cropFilePath);

   }

---

我将检查这段代码。同时，我编辑了图像并添加了一个图像，以便更好地了解情况。@Yanga你能检查一下吗？我将检查这段代码。同时，我编辑了图像并添加了一个图像，以便更好地了解情况。@Yanga你能检查一下吗？我不完全确定我是如何做到的，但我知道我不完全确定我是怎么做到的，但我有一个最大宽度大小和高度相应地改变了。