Обрезаем изображение (crop) в ASP.NET+JavaScript
Возникла задача сделать простой способ заливки изображений и их редактирование. Самое интересно для меня это кадрирование, расскажу как это можно сделать.
Берем библиотеку «JavaScript Image Cropper UI», которая тянет с собой еще две. В общей сложности в не запакованном виде оно обьемом 258Kb. Я думаю, что возможно сократить раза в три-четыре.
Подключаем к своей странице
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
<script src="/javascripts/cropper.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/cropper.css" media="all" />
<script type="text/javascript" charset="utf-8">
// setup the callback function
function onEndCrop( coords, dimensions ) {
$( 'hfX1' ).value = coords.x1;
$( 'hfY1' ).value = coords.y1;
$( 'hfX2' ).value = coords.x2;
$( 'hfY2' ).value = coords.y2;
$( 'hfW' ).value = dimensions.width;
$( 'hfH' ).value = dimensions.height;
}
// basic example
Event.observe(
window,
'load',
function() {
new Cropper.Img(
'imgPhoto',
{
minWidth: 70,
minHeight: 50,
displayOnInit: true,
onEndCrop: onEndCrop
}
)
}
);
</script>
На самой странице размещаем нужную нам фотографию и несколько TextBox чтоб визуально видеть координаты.
<p>
<img src="dyavolenok.jpg" id="imgPhoto" alt="" runat="server" />
</p>
<p>
x1:
<asp:TextBox ID="hfX1" runat="server" Text="0" />
</p>
<p>
x2:
<asp:TextBox ID="hfX2" runat="server" Text="600" />
</p>
<p>
y1:
<asp:TextBox ID="hfY1" runat="server" Text="0" />
</p>
<p>
y2:
<asp:TextBox ID="hfY2" runat="server" Text="450" />
</p>
<p>
w:
<asp:TextBox ID="hfW" runat="server" Text="600" />
</p>
<p>
h:
<asp:TextBox ID="hfH" runat="server" Text="450" />
</p>
<p>
<asp:Button runat="server" ID="btEnter" OnClick="btEnter_Click" Text="Сохранить" />
</p>
Обрабатывая событие OnClick по Button мы обрезаем картинку по заданым координатам и отдаем ее обратно(чтоб посмотреть что получилось).
protected void btEnter_Click(object sender, EventArgs e)
{
int x = Convert.ToInt32(hfX1.Text);
int y = Convert.ToInt32(hfY1.Text);
int w = Convert.ToInt32(hfW.Text);
int h = Convert.ToInt32(hfH.Text);
Rectangle rectangle = new Rectangle(x, y, w, h);
int width = w;
int height = h;
string newImageName = CropAndSave(
rectangle, width, height, imgPhoto.Src);
imgPhoto.Src = «/temp/" + newImageName+".jpg";
}
Сам метод обработки иллюстрации выглядит примерно вот так:
public string CropAndSave(System.Drawing.Rectangle rectangle,
int width, int height, string imgName)
{
Rectangle dest = new Rectangle(0, 0, width, height);
string newGuid = Guid.NewGuid().ToString();
string newImageName = HttpContext.Current.Server.MapPath("/temp/" + newGuid);
using (Image rawImg = Image.FromFile(Server.MapPath(imgName)))
{
using (Bitmap webImage = new Bitmap(width, height, PixelFormat.Format24bppRgb))
{
using (Graphics g = Graphics.FromImage(webImage))
{
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
g.DrawImage(rawImg, dest, rectangle, GraphicsUnit.Pixel);
webImage.Save(newImageName, ImageFormat.Jpeg);
}
}
}
return newGuid;
}
К сожалению даже задав максимальное качество, мы получаем артефакты на новом изображении. Пока не понял, можно ли еще больше поднять качество…
Живой пример можно посмотреть вот тут:
http://web2skill.com/aspnetcropper/
22 апреля 2008 г. 16:31