更改图像大小时，JCrop 不保存选择答案

【问题标题】：JCrop doesn't save selection when image size is changed更改图像大小时，JCrop 不保存选择
【发布时间】：2011-11-28 17:58:06
【问题描述】：

我是第一次使用 jcrop。我对图像大小和裁剪有疑问。当用户上传 1366x768 或更大的图像时，我会在我的页面上预览它。我也有裁剪选择预览，效果很好。当我提交位置时，它会很好地裁剪（当我使用原始图像大小时）。
但我不想在页面上显示这么大的原始图像。用户必须在一个视图中查看原始图像、预览和提交按钮。因此，如果图像为 1366x768，我需要使图像更小我不想像 683x368 那样显示它。但问题就在这里。当我在图像标签裁剪上设置宽度和高度时，不再正常工作。我粘贴了我的问题的代码和图像预览：

jQuery(window).load(function () {

            jQuery('#cropbox').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                setSelect: [0, 0, 540, 300],
                allowResize: true, 
                 aspectRatio: 2
            });

        });

        function showPreview(coords) {
            if (parseInt(coords.w) > 0) {
                var rx = 540 / coords.w;
                var ry = 300 / coords.h;

                jQuery('#preview').css({
                    width: Math.round(rx * 683) + 'px',
                    height: Math.round(ry * 368) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
            }

            $('#x').val(coords.x);
            $('#y').val(coords.y);
            $('#w').val(coords.w);
            $('#h').val(coords.h);
        }

        </script>
</head>
<body>
    <div>        
        <p style="width: 540px; height: 300px; overflow: hidden; float:left;">
            <img id="preview" src="../../Content/Images/Full/Leopard.jpg" />
        </p>
        <p style="float:left;">
            <img id="cropbox" width="683px" height="368px" src="../../Content/Images/Full/Leopard.jpg" />
        </p>

        <p>
            @using (@Html.BeginForm("PostPicture", "Home"))
            {
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
                <button type="submit">
                    Send</button> 
            }
        </p>

这是第二个错误：在我将 X 和 Y 乘以 2 之后。

这是asp.net后端代码：

public ImageResult PostPicture(int x, int y, int h, int w)
        {            
            x = x * 2;
            y = y * 2;

            Image image = Image.FromFile(Path.Combine(this.Request.PhysicalApplicationPath, "Content\\Images\\Full\\Leopard.jpg"));
            Bitmap cropedImage = new Bitmap(w, h, image.PixelFormat);
            Graphics g = Graphics.FromImage(cropedImage);

            Rectangle rec = new Rectangle(0, 0,
                                w,
                                h);

            g.DrawImage(image, rec, x, y, w, h, GraphicsUnit.Pixel);
            image.Dispose();
            g.Dispose();

            string savedFileName = Path.Combine(
                   AppDomain.CurrentDomain.BaseDirectory,
                   "Content", "Images", "Full",
                   Path.GetFileName("cropped.jpg"));

            cropedImage.Save(savedFileName);

            return new ImageResult { Image = cropedImage, ImageFormat = ImageFormat.Jpeg };
        }

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-plugins jcrop

【解决方案1】：

您必须调整传递的裁剪坐标。您需要根据调整图像大小以进行预览的比例来调整它们。因此，如果您将图像预览缩小到原来的 50%，裁剪的实际坐标将是它们的两倍或 (x*2, y*2)。

【讨论】：

对不起，我必须重新提出问题，我在这里没有看到另一个错误。在我像你说的那样修复 X 和 Y 之后，我得到了新的错误。我用第二个错误图像更新了问题。这一定是关于宽度的。请检查一下。

【解决方案2】：

也许可以尝试在 css 样式属性中设置图像大小：

<img id="cropbox" style="width:683px;height:368px" src="../../Content/Images/Full/Leopard.jpg" />

也许更好的解决方案是将服务器上的图像调整为您想要的尺寸，然后将调整后的图像而不是完整的原始图像显示给用户。这也将减少浏览器的下载时间，因为图像会更小。

【讨论】：

我发现最好的解决办法是上传后调整图片大小。