Vinicius Quaiato

{tecnologia, conceitos, negócios, idéias, práticas, .NET, ruby, osx, ios e algo mais}

ASP.NET MVC upload de imagens + JCrop + Resize + progressbar + tudo assíncrono 2

03/08/2012

#Colocando o JCrop para funcionar Dando continuidado ao post de Upload + Progressbar + JCrop assíncrono agora nós vamos fazer o download do JCrop e referenciá-lo em nossa view. Descompacte o zip e referencie estes arquivos um javascript:

<script src='@Url.Content("~/Scripts/jquery.Jcrop.min.js")' type="text/javascript"></script>

E um stylesheet:

<link rel="stylesheet" href='@Url.Content("~/Content/jcrop/jquery.Jcrop.min.css")' type="text/css" />

Feito isso vamos adicionar um novo formulário em nossa página. Eu optei por um novo formulário para deixar as coisas bem separadas, vejam abaixo:

@using (Html.BeginForm("Crop", "Upload", null, FormMethod.Post, new { enctype = "multipart/form-data", name = "crop" })) {
    <input type="hidden" name="url" />
    <input type="hidden" name="x1" id="x1" />
    <input type="hidden" name="x2" id="x2" />
    <input type="hidden" name="y1" id="y1" />
    <input type="hidden" name="y2" id="y2" />
    <input type="submit" value="Recortar" class="hidden" id="recortar" />
}
<img src="" class="hidden" id="imagem_final"></img>

Reparem que tudo que temos aí são campos hidden. O primeiro deles irá guardar a URL da imagem que queremos recortar e com isso eu não farei o upload de uma nova imagem para o servidor. Os outros campos são as coordenadas para o recorte.

Todas estas informações serão alimentadas pelo javascript e pelo próprio JCrop. Vejam como configuraremos o JCrop:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function showCoords(c) {
    $("#x1").val(c.x);
    $("#x2").val(c.x2);
    $("#y1").val(c.y);
    $("#y2").val(c.y2);

    $("#recortar").removeClass("hidden");
}
function ativarJCrop() {
    $('#imagem_crop').Jcrop({
        bgColor: 'black',
        bgOpacity: .4,
        aspectRatio: 1,
        onSelect: showCoords
    });
}

Estas duas funções são tudo o que precisamos. E eu vou chamar a função ativarJCrop dentro do success do upload da imagem (confira aqui no artigo anterior).

#Realizando o crop no servidor Para realizarmos o crop no servidor teremos algo parecido com isso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

[HttpPost]
public ActionResult Crop() {
    var imagem_url = Request.Form["url"];
    var x1 = int.Parse(Request.Form["x1"]);
    var x2 = int.Parse(Request.Form["x2"]);
    var y1 = int.Parse(Request.Form["y1"]);
    var y2 = int.Parse(Request.Form["y2"]);
    var nomeFinal = "../uploads/imagem_crop" + Path.GetExtension(imagem_url);

    using (var response = new StreamReader(Server.MapPath(imagem_url))) {
        Bitmap imagem = new Bitmap(response.BaseStream);

        int largura = x2 - x1;
        int altura = y2 - y1;

        Bitmap target = new Bitmap(largura, altura);
        Rectangle cropRect = new Rectangle(x1, y1, largura, altura);

        using (Graphics g = Graphics.FromImage(target)) {
            g.DrawImage(imagem, new Rectangle(0, 0, largura, altura), cropRect, GraphicsUnit.Pixel);
            using (var fileStream = new FileStream(Server.MapPath(nomeFinal), FileMode.OpenOrCreate)) {
                target.Save(fileStream, imagem.RawFormat);
                fileStream.Flush();
            }
        }
    }

    return Json(new { imagem_recortada = nomeFinal });
}

Basicamente o que esse código faz é recortar uma imagem. É um código padrão então vou vou explicá-lo. Reparem apenas que ao final retornamos um json. É com isto que exibiremos a imagem recortada após o trabalho do server.

Para isso vamos adicionar o ajaxForm ao nosso formulário de crop:

1
2
3
4
5
6
7
8
9
10
11
12
13

	$('form[name=crop]').ajaxForm({
		dataType: 'json',
		success: function (data) {
		    jcrop.destroy();
		    $(".progress").addClass("hidden");
		    $("#imagem_crop").addClass("hidden");
		    $("#imagem_crop").removeAttr("style");
		    $("#recortar").addClass("hidden");

		    $("#imagem_final").attr("src", data.imagem_recortada);
		    $("#imagem_final").removeClass("hidden");
		}
	});

Pronto! Agora tudo está feito e funcionando:

#Resumindo Com isso terminamos nosso upload e crop assíncrono com Jquery, JCrop e ASP.NET MVC. Até que é uma tarefa simples depois de ter entendido tudo que é necessário. Eu fiz algumas firulas para esconder e exibir uma série de componentes na tela e tudo o mais, mas pode ser que vocês não precisem disso.

O código completo está no github https://github.com/vquaiato/upload-crop-async-sample

Comentários

Posts recentes

Ver todos os posts

Fork me on GitHub