پیرو مطلب بالا، در صورتی که تصویر شما ابعادی بزرگتر از اندازه صفحه داشته
باشد باعث میشود که عکس به درستی در صفحه جا نشود، به همین دلیل ممکن است
تگ img را با تگ Div با مشخصات زیر بپوشانید:
<div style="overflow: auto">
<img id="preview" />
</div>
این کد باعث میشود که عکس به صورت تمام در صفحه نمایش داده شود و قسمتهای نهان آن با اسکرول جابجا شوند. در اینجا چند مشکل ایجاد میشود اول اینکه زیبایی صفحه زیاد نیست، دوم اینکه در حین کراپ چندان خوشاید نیست و سوم اینکه در صفحه موبایل عکس بزرگ و اسکرول چندان کارایی ندارد.
در این بین من با استفاده از فریمورک بوت استراپ کلاس img-responsive را به تگ image میدهم تا تصویر در هر صفحه نمایشی متناسب با اندازه آن نمایش داده شود. مشکل زیبایی تصویر در صفحه و نحوه کراپ کردن آن حل میشود ولی مشکل جدیدتر این است که تصویری که کراپ میشود آن ناحیه ای نیست که شما قبلا انتخاب کرده بودید؛ دلیل آن هم این است که تصویری که responsive شده است اندازه جدیدی برای خود دارد و برش ناحیه در سمت کلاینت و مختصاتی که به شما داده میشود بر اساس اندازه تغییر یافته است ولی در سمت سرور شما با اندازه واقعی تصویر سر و کار دارید و به همین دلیل مختصات ناحیه برش داده شده اشتباه بوده و قسمتهای دیگری از تصویر برش میخورند.
برای حل این مشکل ابتدا دو المان مخفی زیر را به صفحه اضافه میکنیم:
<input type="hidden" id="RealW" name="RealW" />
<input type="hidden" id="RealH" name="RealH" />
این دو المان برای نگهداری اندازه تگ img است که ممکن است در هر صفحه نمایشی متفاوت باشد و کراپ کردن بر اساس آن انجام میشود.
سپس کدهای زیر را به فایل js به شکل زیر ویرایش میکنیم:
$('#preview').Jcrop({
aspectRatio: 2,
bgFade: true,
bgOpacity: .3,
onChange: updateInfo,
onSelect: updateInfo
}, function () {
// use the Jcrop API to get the real image size
//============== خطوط جدید
$("#RealW").val($('#preview').css("width").replace("px", ""));
$("#RealH").val($('#preview').css("height").replace("px", ""));
//==============
jcrop_api = this;
});
دو خط جدید اضافه شده به این کد اندازه تگ img را درخواست کرده و داخل المانهای مخفی جای میدهد تا در هنگام پست شدن صفحه ارسال شوند و از آنجا که اندازههای دریافتی به همراه نام واحد میباشند (که در اینجا px است) آنها را از انتهای رشته حذف کرده ام.
سپس در سمت کلاینت با محاسبه فرمولهای تناسب این مشکل را رفع میکنیم تا مختصاتهای دریافت شده را به مختصاتهای واقعی تبدیل کنیم:
public static byte[] Resize(this byte[] byteImageIn, int x1,int y1,int x2,int y2,int realW,int realH)
{
//convert to full size image
ImageConverter ic = new ImageConverter();
Image src = (Image)(ic.ConvertFrom(byteImageIn)); //original size
if (src == null)
return null;
// چهار خط زیر فرمول تناسب را اجرا میکند
x1 = src.Width * x1 / realW;
x2 = src.Width * x2 / realW;
y1 = src.Height * y1 / realH;
y2 = src.Height * y2 / realH;
Bitmap target = new Bitmap(x2 - x1, y2 - y1);
using (Graphics graphics = Graphics.FromImage(target))
graphics.DrawImage(src, new Rectangle(0, 0, target.Width, target.Height),
new Rectangle(x1,y1,x2-x1,y2-y1),
GraphicsUnit.Pixel);
src = target;
using (var ms = new MemoryStream())
{
src.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
return ms.ToArray();
}
}