Eu achava que já tinha visto de tudo, mais dessa vez me surpreendi.
Sempre estou a procura de coisas que irão facilitar a vida de nossos clientes, e um dos pontos que eu sempre achei que fosse necessário nos sistemas era o tratamento das imagens enviadas pelo usuário.
Como assim ?
Imagina, um usuário comum que acessa o seu sistema de gerencia de conteudo, o mesmo envia uma imagem sem nenhum padrão (dimensão – acontece SEMPRE) para dar enfoque as notícias , e você já sabendo disso limitou na exibição usando a biblioteca GD do PHP as dimensões, seja cortando a imagem ou seja re-dimensionando, agora vamos aos problemas:
Cortei a imagem : Como se sabe que ta recortando nas posições certas ? Se voce recorta por exemplo, partindo do centro, e o grande tchan da imagem ta nos cantos então já era, usuário insatisfeito (o usuário não tem a obrigação de saber tratar imagens).
Re-dimensionei a imagem: Ai como sempre o usuário manda aquela imagem de 5000×5000 vinda de sua camera ultra fod*, voce redimensiona mais demora tanto pra carregar e ela sai tão distorcida que o usuário fica insatisfeito.
Dentre outros sistemas dessa nova fase apelidade de Web 2.0 alguns, como o orkut, utilizam atualmente do que será demonstrado aqui, que é justamente deixar o usuário escolher qual pedaço da imagem será utilizada.
Dave Spurr, criou justamente um script em javascript utilizando o Prototype e o Script.aculo.us (again dude) e ficou sinceramente muito insano.
Eu não irei explicar o funcionamento por ter um link onde já está tudo muito detalhado, então vamos ao que interessa, material:
Imagem Ilustrativa
Reparem que no exemplo tem até PREVIEW (+doido)
Demo (Impressionar Amigos)
Clique Aqui (DEfusion.org.uk)
RequisitosScript.aculo.us 1.6.1 ou mais atual. (Prototype Incluso)
Download e Tutorial (Simples)
Clique Aqui (DEfusion.org.uk)
muito bacanas as dicas.. principalmente javascript.. uso dos frameworks de auxílio, exemplos.. etc
parabéns
Ta ok!
é muito útil esta ferramenta!
mas agora como faço para usá-la!?!?
como redimensiono no php pegando a parte que eu quero?
alguém sabe algum script?
vlw
Na parte onde tem “Download e Tutorial (Simples)” quando eu disse Simples eu quis dizer MUITO simples, bastar dar uma olhadinha e ver como funciona, é dois pulos e duas chamadas função.
Esse script redimensiona antes de chegar ao php, ou seja, voce já irá receber a imagem tratada.
O objetivo dele é deixar o tratamento da imagem por parte do usuário.
; )
show de bola o tutorial velho.. mas como sou MT fraco em js queria pedir uma mão
ehhehe…
não consegui fazer o crop da imagem…
tipo.. tenho a imagem “grande” ai o cara seleciona a parte q qé…
queria coloca um botão “cortar” ai a imagem seria cortada na parte da seleção… isso não consegui fazer… e outra coisa… saberia me dizer se
esse codigo tem como modificar para ele trabalhar com dimesões!? por exemplo o cara pega uma imagem de 2000×1800 MT grande… pra não ficar aberta todo esse tamanho… teria como deixar a preview dela com X%?
valeu a dica ai velho… e desculpa ta encomodando ai!…
atualiza ae
Ola pessoal, sou meio franco com JavaScript alguem podia me ajudar… quero saber apos selecionar, que função eu chamo para dar um submit e depois pegar a parte selecionada da imagem.. agradeço muito se alguem me ajudar com isso…
Olá pessoal, estou com o mesmo problema, eu não consigo salvar o arquivo gerado. Vi o tutorial, e tentei fazer pelo script que encontrei la, ele gera a imagem corretamente, mas não salva ela em lugar nenhum, nem na pasta que mandei salvar.
Alguem pode ajudar?
Segue o código abaixo:
$sizes['x1'] = $_POST['x1'];
$sizes['y1'] = $_POST['y1'];
$sizes['x2'] = $_POST['x2'];
$sizes['y2'] = $_POST['y2'];
$sizes['width'] = 300;
$sizes['height'] = 300;
$novo = “../fotos/anuncios/new/imagem.jpg”;
function CropImage($imagePath, $sizes) {
$originalPath = $imagePath; // location of image to be cropped
$newPath = $novo; // where to put cropped image
@unlink($newPath); // unlink destination image if possible
$originalImage = imagecreatefromjpeg($originalPath); // create image from original
$thumbImage = imagecreatetruecolor($sizes['width'], $sizes['height']); // create thumbnail image
// perform crop (modified from code posted here, eg. this one doesn’t stretch the image)
imagecopyresampled($thumbImage, $originalImage, 0, 0, $sizes['x1'], $sizes['y1'], $sizes['width'], $sizes['height'], $sizes['x2']-$sizes['x1'], $sizes['y2']-$sizes['y1']);
imagedestroy($originalImage); // destroy image resource
imagejpeg($thumbImage, $newPath, 100); // save thumbnail to newPath
imagedestroy($thumbImage); // destroy thumbnail resource
}
CropImage(“../fotos/anuncios/imagem.jpg”, $sizes);
sou novato em javaScript e ate onde eu estou olhado vc em que esta a frente
com seu Script só gostaria de sabe cm vc fez pra cota a imagem abraço cara
ok
Fábio Penna acho que vc esqueceu de colocar o tipo de arquivo na hora de mudar a foto.
Só colocar isso acima de tudo:
header(“Content-type: image/jpeg”);
SEGUE ABAIXO O CÓDIGO QUE FIZ EM CIMA DO SEU E DEU CERTO.
DEIXEI O CODIGO AQUI MAS FOI APAGADO!!!
QUEM QUISER VISITE AI MEU SITE E ME MANDE UMA MENSAGEM!!!
FALOWS
Caro Hugo,
Seu comentario foi apagado acidentalmente por mim.
Fique a vontade para comentar novamente.
Abracos,
Galera, usei o código acima e só tive um probleminha, a imagem criada com as novas dimensões fica toda preta.
Sou novato em php e ainda não achei como resolver. Alguem pode me ajudar?
Abrçs
Valew Couto!!!
Peguem ai o código implementado em cima do exemplo anterior:
Qualquer duvida poste aqui que, se conseguir, ajudarei…
A URL nao apareceu no post anterior, so copiar e colar no navegador:
Teste.php
www. axysonline.com.br/gophp/teste.php_txt
Image.php
www. axysonline.com.br/gophp/image.php_txt
Qualquer duvida poste aqui que, se conseguir, ajudarei…
Olá Pessoal, estou com um projeto e preciso de um sistema para esse tratamento, será que poderiam me enviar por email ou o script que vc´s desenvolveram, seria muito útil para mim .. sou meio leigo nesses assuntos e acredito que nao teria problemas em me enviar
]
Obrigado;
Olá Hugo!
Estou a um tempo já tentando utilizar esse sitema de cortar imagens mas não estou conseguindo! já tentei centenas de formas de faze-lo funcionar e nada.
O que estou fazendo é o seguinte:
primeiramente tenho um formulario em uma pagina html e com um campo File para o usuário pegar a foto, depois de clicar em enviar, o formulário redireciona até uma página php onde faz o upload dessa imagem no tamanho normal, e nessa mesma pagina coloquei o script que carrega a foto do upload e faz a seleção para corta-la, nessa pagina, veio junto com o script os campos (imputbox) x1,x2,y1,y2,width e height, então coloquei um botão “Concluir”. Até ai tudo bem, o kra envia a foto e na pagina seguinte é mostrada essa foto no scipt para corta-la e as coordenadas são mostradas nos textbox abaixo.. Mas não consigo de forma alguma fazer para que o script consiga pegar a imagem que usuário acabou de mandar e corta-la de acordo com o que usuário selecionou!
Alguma sugestão?
estou tentando fazer o download dos arquivos de código mas o arquivo image.php está fora!
Obrigado desde já.
Couto to é um boco , com otua apaga o troço, e como fica op essoal que aqui pesquisa. sai da lacaio.
Caro Luiz,
Após aprender a escrever, volte e faça um comentário digno de ser lido pelas prezadas pessoas que utilizam esse blog.
Att,
Caro Couto,
Eu aprender a escrever, hahahahahah
Coitado, então eu vou traduzir pra você
Couto tu é um bocó , como tu apaga o troço, e como fica o pessoal que aqui pesquisa. sai da lacaio.
se alterar as pastas dos js e css da erro, mesmo alterando o caminho dos js
Sabe se tem que fazer alguma alteração no arquivo cropper.js para que funcione corretamente?
Visitando pela primeira vez, gostei da escrita, irreverente sem ser “palhaço”.
Volto mais vezes. +)
adorei o tuto valeu mesmo, eu estava procurando a tempos um script assim
ain valeu mesmo amei o blog .. bjus