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("/Imagem/GetImage")" 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!
Lenadro e se a imagem estiver no banco de dados como eu trago essa imagem ?
Junior,
Você pode recuperar a imagem da base como um array de bytes, e passar como parâmetro para o método WebImage(byte[] content) ou ainda passar um Stream WebImage(System.IO.Stream imageStream)
att,
Leandro Prado
tem como você me mandar um exemplo de recuperação da imagem do banco com um array de bytes
Tenho o mesmo problema, pode colocar um exemplo e como fazer o upload da imagem para o banco com um array de bytes