Webly: Cropper De Imagem Com Asp+javascript+freeaspupload - Webly

Ir para

Regras para postagem no fórum

É permitido postar livremente respostas com comentários, testes e avaliações dos scripts. Postagens contendo dúvidas sobre o script, deverão ser postadas no fórum principal de ASP.

IMPORTANTE: Todos os tutoriais postados neste fórum irão automaticamente para o portal Webly. Contribua você também e faça parte da equipe de colaboradores que fazem a evolução da web. Obrigado.
Página 1 de 1

Cropper De Imagem Com Asp+javascript+freeaspupload Avaliar tópico: ***** 1 Votos

#1 Membro offline   jonathan Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 40
  • Cadastrado: 04-outubro 06
  • Localização:Porto Alegre - RS

Postou 06 fevereiro 2008 - 07:30

Utilizando umas bibliotecas prontas de javascript(baixei o pacote da web) e o freeaspupload em conjunto com o aspimage/aspjpeg criei o esquema tipo o orkut, deixando o usuario escolher a área da imagem que deseja recortar e criar a miniatura(thumb).

Vejam o exemplo: http://www.allmarket...emplos/cropper/

Download do material completo: http://www.allmarket...g...na=1&ordem=

Abaixo uma parte do código asp pra ver quem se anima:
*****Página popupResize.asp
<%
option explicit
%>
<!-- #include file="classes/clsImagem.asp" -->
<%
if Request.ServerVariables("REQUEST_METHOD") = "POST" then
 dim x
 set x = new clsImage
 x.imagePath = Server.MapPath(".")&"\imagens\" 'imagem já redimensionada
 x.tempPath = Server.MapPath(".")&"\imagens\" 'imagem já redimensionada
 x.originalNameFile = Request.Form("renameFile") 'nome do arquivo redimensionado
 x.cropH = Request.form("height") 'altura da seleção
 x.cropW = Request.form("width") 'largura da seleção
 x.cropX = Request.form("x1") 'ponto X de início da seleção
 x.cropY = Request.form("y1") 'ponto Y de início da seleção
 x.createThumb = true  'habilita o thumb
 x.thumbAuto = false  'desabilita o thumb automatico para ser criado o thumb de seleção
 x.resizeImage
 set x = nothing
 response.write "<script>"&_
  " opener.location='default.asp?preview="&Request.Form("renameFile")&"';"&_
  " window.close();"&_
  "</script>"
 response.end
end if
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="en-us" />
 <title></title> 
 
 <script src="lib/prototype.js" type="text/javascript"></script> 
 <script src="lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
 <script src="cropper.js" type="text/javascript"></script> 
 
 <script type="text/javascript" charset="utf-8">
 
 function onendCrop( coords, dimensions ) {
 $( 'x1' ).value = coords.x1;
 $( 'y1' ).value = coords.y1;
 $( 'x2' ).value = coords.x2;
 $( 'y2' ).value = coords.y2;
 $( 'width' ).value = dimensions.width;
 $( 'height' ).value = dimensions.height;

 }
 
 // with a supplied ratio
 Event.observe( 
 window, 
 'load', 
 function() { 
 new Cropper.Img( 
 'testImage', 
 { 
 minWidth: 117, 
 minHeight: 83, 
 ratioDim: { x: 117, y: 83 }, 
 displayOnInit: true, 
 onendCrop: onendCrop 
 } 
 ) 
 } 
 );
 
 </script>
 <link rel="stylesheet" type="text/css" href="debug.css" media="all" />
 <style type="text/css">
 label { 
 clear: left;
 margin-left: 50px;
 float: left;
 width: 5em;
 }
 
 #testWrap {
 margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
 }
 </style>
</head>
<body style="padding:0px;margin:0px;"> 
 <div id="testWrap" style="padding:0px;margin:0px;" align="center">
 <img src="imagens/<%=request.QueryString("file")%>" id="testImage" />
 </div> 
 <form name="form1" action="popupResize.asp" method="post" style="padding:0px;margin:0px;">
 <input type="hidden" value="<%=request.QueryString("file")%>" name="renameFile" />
 <input type="hidden" name="x1" id="x1" />
 <input type="hidden" name="y1" id="y1" />
 <input type="hidden" name="x2" id="x2" />
 <input type="hidden" name="y2" id="y2" />
 <input type="hidden" name="width" id="width" />
 <input type="hidden" name="height" id="height" />
 <center>
 <input type="submit" name="submit" value="Salvar" />
 </center>
 </form> 
</body>
</html>

*****************************************************************
*****************************************************************
*****************************************************************
*****************************************************************
****Página default.asp
<<A href="mailto:%@LANGUAGE="VBSCRIPT">%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
option explicit
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function popup(imagem,wdh,hgt){
 posL = screen.availWidth/2 - wdh/2;
 posT = screen.availHeight/2 - hgt/2;
 str = 'width='+wdh+', height='+hgt+', left='+posL+', top='+posT+', scrollbars=no';
 window.open('popupResize.asp?file='+ imagem, '', str);
}
</script>
</head>

<body>
<!-- #include file="classes/freeaspupload.asp" -->
<!-- #include file="classes/clsImagem.asp" -->
<%
if Request.ServerVariables("REQUEST_METHOD") = "POST" then
 dim Upload, f
 dim originalNameFile, renameFile, thumbAuto, createThumb, x
 
 Set Upload = New FreeASPUpload
 'faz o upload da imagem para a pasta temporária
 Upload.Save(Server.MapPath(".")&"\imagens\temp\")
 'originalNameFile = Upload.UploadedFiles("imagem").FileName
 thumbAuto = upload.form("thumbAuto")
 For Each f In upload.UploadedFiles.Items
 
 originalNameFile = f.FileName
 
 
 'define o novo nome do arquivo
 renameFile = Session.SessionID & ".jpg"&f.ext

 set x = new clsImage
 'verifica se é ou não para criar o thumb automatico
 if thumbAuto="1" then
 thumbAuto = false
 createThumb = false
 else
 thumbAuto = true
 createThumb = true
 end if
 'força o redimensionamento da imagem principal e salva na pasta 
 x.originalNameFile = originalNameFile
 x.imagePath = Server.MapPath(".")&"\imagens\"
 x.newNameFile = renameFile
 x.createThumb = createThumb
 x.thumbAuto = thumbAuto
 x.resizeImage
 set x = nothing
 
 set x = new clsImage
 'força o redimensionamento da imagem principal e salva na pasta com nova dimensão
 x.originalNameFile = renameFile
 x.imagePath = Server.MapPath(".")&"\imagens\150X100\"
 x.tempPath = Server.MapPath(".")&"\imagens\"
 x.newNameFile = renameFile
 x.maxH  = 150
 x.maxW  = 100
 x.createThumb = false
 x.thumbAuto = false
 x.deleteOriginalFile = false
 x.resizeImage
 set x = nothing 
 
 if thumbAuto = false then
 Response.Write("<script>popup('"&renameFile&"',680,550);</script>")
 Response.End()
 else
 response.write "<script>"&_
  " window.location='default.asp?preview="&renameFile&"';"&_
  "</script>"
 Response.End() 
 end if
 
 next 
 set Upload = nothing
end if
%>
<form action="default.asp" method="post" enctype="multipart/form-data" name="form1" id="form1">
 Selecione a imagem desejada<br />
 <input type="file" name="imagem" id="imagem" />
 <br />
 <input name="thumbAuto" type="checkbox" id="thumbAuto" value="1" />
 Personalizar thumb<br />
 <input type="submit" name="Enviar" id="Enviar" value="Enviar" />
 <br />
</form>
<%
if Request.QueryString("preview")<>"" then
%>
Imagem Redimensionada:
<br />
<img src="imagens/<%=Request.QueryString("preview")%>" />
<br />
Imagem Thumb:
<br />
<img src="imagens/thumb/<%=Request.QueryString("preview")%>" />
<%
end if
%>
</body>
</html>

0

#2 Membro offline   Micox Ícone

  • Comunidade de desenvolvedores
  • Ícone
  • Grupo: Administradores
  • Posts: 5511
  • Cadastrado: 03-julho 06
  • Localização:Goiânia-GO
  • Interesses:Webly e elmicox.blogspot.com

Postou 06 fevereiro 2008 - 01:59

Cara, isso é muito muito bom mesmo.
valeus.net/mwords - Links automáticos p/ o MercadoLivre em seu texto

Ajude, responda: mesmo que não saiba exatamente a resposta, seu pitaco pode dar uma luz no problema do outro.
Não respondo dúvidas por MP / Email / MSN e afins. O fórum está aqui pra isto.

elmicox.blogspot.com
0

#3 Membro offline   jonathan Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 40
  • Cadastrado: 04-outubro 06
  • Localização:Porto Alegre - RS

Postou 06 fevereiro 2008 - 02:26

valeu micox, espero que muitos possam usar. Em asp acho que é o pioneiro pois em .net e php sei que tem. Na verdade eu nem fiz muito nesse esquema, só transferi as informações da biblioteca javascript para servirem de parametros do cropp do componente asp. Usem e abusem dos codigos

abraços
0

#4 Membro offline   David Cruvinel Ícone

  • Alguma Coisa!
  • Ícone
  • Grupo: Coordenadores
  • Posts: 1976
  • Cadastrado: 25-agosto 06
  • Localização:Guaxupé - MG

Postou 06 fevereiro 2008 - 04:13

parabéns...

muito bom....com certeza já vou começar a usar...

valew

:thumbsup:
Portal Onde tem Festa - Divulgação e Cobertura de Eventos
www.ondetemfesta.com.br

DEC WebSites - Desenvolvimento de WebSites
www.decwebsites.com.br
0

#5 Membro offline   elbrinner Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 58
  • Cadastrado: 21-julho 06

Postou 09 julho 2008 - 07:28

Muito bom.

Parabéns
0

Página 1 de 1


Resposta rápida

  

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)