更改图像大小时，JCrop 不保存选择
我是第一次使用 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 };
}
I am using jcrop for the first time. ANd I have a problem with image size and cropping. When user upload image 1366x768 or larger I preview it on my page. I also have crop selection preview and it works fine. When I submit positions it crops fine (it's when I use original image size).
But I don't want to display so large original images on page. User must see original image, preview and submit buttons in one view. So I need to make image smaller if image is 1366x768 I wan't to display it like 683x368. But here is the problem. When I set width and height on image tag crop not works fine anymore. I paste my code and image preview of my problem:
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>
This is second error: After I multiply X and Y with 2.
This is asp.net back end code:
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 };
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
也许尝试在 css style 属性中设置图像大小：
也许更好的解决方案是将服务器上的图像大小调整为所需的尺寸，然后向用户显示调整大小的图像而不是完整的原始图像。由于图像会更小，这也将减少浏览器的下载时间。
Maybe try setting the image size in css style attribute:
Perhaps a better solution is to resize the image on the server to your desired dimensions, then display the resized image to the user instead of the full original image. This will also reduce download time for the browser since the image will be smaller.
您必须调整传递的裁剪坐标。您需要根据调整预览图像大小的比例来调整它们。因此，如果您将图像预览缩小到原来的 50%，则裁剪的实际坐标将是它们的两倍 (x*2, y*2)。
You'll have to adjust the crop coordinates that are passed. You need to adjust them according to the ratio by which you resized your image for preview. So if you shrank your image preview to 50% of what it was originally, the actual coordinates of the crop will be twice what they come in as or (x*2, y*2).