Javascript, Recortar Imagem (+Preview)

Prototype

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

Prototype Script aculo us Crop Image

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)


28 Comentários on “Javascript, Recortar Imagem (+Preview)”

  1. rafael disse:

    muito bacanas as dicas.. principalmente javascript.. uso dos frameworks de auxílio, exemplos.. etc

    parabéns

  2. Fabrizio disse:

    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

  3. 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.

    ; )

  4. Bastard disse:

    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!…

  5. joao disse:

    atualiza ae🙂

  6. jonas disse:

    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…

  7. Fábio Penna disse:

    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);

  8. Hugo Nery disse:

    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.

  9. Hugo Nery disse:

    DEIXEI O CODIGO AQUI MAS FOI APAGADO!!!

    QUEM QUISER VISITE AI MEU SITE E ME MANDE UMA MENSAGEM!!!

    FALOWS

  10. Couto disse:

    Caro Hugo,
    Seu comentario foi apagado acidentalmente por mim.
    Fique a vontade para comentar novamente.
    Abracos,

  11. Robinho disse:

    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

  12. Hugo Nery disse:

    Valew Couto!!!

    Peguem ai o código implementado em cima do exemplo anterior:

    Qualquer duvida poste aqui que, se conseguir, ajudarei…

  13. Hugo Nery disse:

    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…

  14. Rafael Dantas disse:

    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;

  15. Marcus disse:

    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á.

  16. luiz disse:

    Couto to é um boco , com otua apaga o troço, e como fica op essoal que aqui pesquisa. sai da lacaio.

  17. Couto disse:

    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,

  18. Luiz disse:

    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.

  19. Natanael disse:

    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?

  20. Luiz Claudio disse:

    Visitando pela primeira vez, gostei da escrita, irreverente sem ser “palhaço”.
    Volto mais vezes. +)

  21. adorei o tuto valeu mesmo, eu estava procurando a tempos um script assim
    ain valeu mesmo amei o blog .. bjus

  22. Luiz disse:

    Hugo Nery, valeu pela dica

  23. Sergio Nascente Filho disse:

    Estou com um problema pessoal, no javascript a imagem com o crop só carrega ao dar refresh, quando vem diretamente referenciada por um link ela simplesmente nao carrega, dai tenho que dar um refresh para aparecer as coisas, muito estranho, só acontece no IE, alguem pode dar uma força?

  24. Luiz disse:

    Tem como apagar um comentário deixado aqui.

  25. Rodrigo disse:

    Manero mesmo, muito útil para quem precisa desta ferramenta !


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s