Usando WebImage com ASP NET MVC 3

Vamos continuar vendo as novidades sobre o ASP NET MVC 3, nesse post veremos como funciona o novo helper WebImage que tem a responsabilidade de manipular imagens de maneira fácil.

Vamos criar um novo controller chamado ImagemController e criar um novo método chamado GetImage que será responsável por recuperar uma imagem no server e escrever na view, veja abaixo o código.

[sourcecode language=”csharp”]
public void GetImage()
{
var server = ControllerContext.HttpContext.Server;
var imagePath = server.MapPath("~/Images/pp.jpg");
new WebImage(imagePath).Write();
}
[/sourcecode]

Veja como é simples usar esse helper, primeiramente recuperamos a imagem e depois mandamos escrever aquela imagem.

Agora vamos criar uma view para renderizar essa imagem, veja abaixo o código.

[sourcecode language=”html”]
<h2>WebImage</h2>
@using (Html.BeginForm()) {
<img id="image" src="@Url.Content(&quot;/Imagem/GetImage&quot;)" alt="" />
}
[/sourcecode]

Fácil né!!! no src da tag img chamado nosso método GetImage que vai escrever a imagem na tag HTML, veja o resultado da nossa view abaixo

O helper WebImagem possui algumas formas de manipular a imagem:

• cropping
• horizontal flip
• vertical flip
• resize
• rotate left
• rotate right
• text watermark
• image watermark

Vamos alterar esse exemplo para trabalhar com a imagem, crie uma função em javascript para enviar a URL para o server

[sourcecode language=”js”]
<script type="text/javascript">
function manipularImagem() {
var req = ‘@Url.Content("/Imagem/GetImage")’ + ‘?’;
var query = ”;

if ($(‘#HorizontalFlip’).is(‘:checked’))
query += ‘&opcao=HorizontalFlip’;
if ($(‘#VerticalFlip’).is(‘:checked’))
query += ‘&opcao=VerticalFlip’;
if ($(‘#RotateLeft’).is(‘:checked’))
query += ‘&opcao=RotateLeft’;
if ($(‘#RotateRight’).is(‘:checked’))
query += ‘&opcao=RotateRight’;

req += query.substr(1);
$(‘#image’).attr("src", req);
}
</script>
[/sourcecode]

Depois altere o HTML conforme abaixo

[sourcecode language=”html”]
<h2>WebImage</h2>
@using (Html.BeginForm()) {
<table border="0" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td rowspan="10" valign="top">
<img id="image" src="@Url.Content(" alt="" /></td>
<td valign="middle">
<input id="HorizontalFlip" name="opcao" type="radio" value="1" />Flip horizontally</td>
</tr>
<tr>
<td valign="middle">
<input id="VerticalFlip" name="opcao" type="radio" value="true" />Flip vertically</td>
</tr>
<tr>
<td valign="middle">
<input id="RotateLeft" name="opcao" type="radio" value="true" />Rotate left</td>
</tr>
<tr>
<td valign="middle">
<input id="RotateRight" name="opcao" type="radio" value="true" />Rotate right</td>
</tr>
<tr>
<td><input onclick="manipularImagem()" type="button" value="Preview" /></td>
</tr>
</tbody>
</table>
}
[/sourcecode]

Agora temos que alterar a action GetImage para receber o parâmetro e tratar a imagem

[sourcecode language=”csharp”]
public void GetImage(string opcao = "")
{
var server = ControllerContext.HttpContext.Server;
var imagePath = server.MapPath("~/Images/pp.jpg");
var image = new WebImage(imagePath);

if(opcao.Equals("VerticalFlip"))
image = image.FlipVertical();
else if(opcao.Equals("HorizontalFlip"))
image = image.FlipHorizontal();
else if (opcao.Equals("RotateLeft"))
image = image.RotateLeft();
else if (opcao.Equals("RotateRight"))
image = image.RotateRight();

image.Write();
}
[/sourcecode]

Veja o resultado:

Qualquer dúvida, opinião, reclamação mande seu comentário!

Um Abraço!