Я впервые использую 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 };
}