[Resolvido] Cropper(cortar) de imagem com asp+javascript+freeaspupload

jrcardozo · Fevereiro 6, 2008

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.allmarketweb.com/jonathandj/exemplos/cropper/

Download do material completo: http://www.allmarketweb.com/jonathandj/cod...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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
option explicit
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

Entrar

Arquivado

[Resolvido] Cropper(cortar) de imagem com asp+javascript+freeaspupload

Recommended Posts

jrcardozo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante