Question

我第一次使用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>

enter image description here

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

这是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 };
        }

Answer 1

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

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

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

Answer 2

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

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

2 个答案: