Redimensionar foto
01/05/2016
0
Queria ver se alguém pode me dar uma força. Tenho um pequeno cadastro, então cadastro as pessoas e suas fotos. Ele grava somente o caminho no banco de dados e a foto em uma pasta. Até aí tudo bem.
Para fazer isso eu tinha achado um código na internet muito usado, mas ele apenas deixa eu limitar o tamanho da imagem para eu colocar, então deixai em 200px x 170.
Para gravar está bom, mas acontece que até esse tamanho pode varia, posso cadastrar 200 x 170 ou 150 x 100 e por aí vai. Então nos campos que preciso visualizar, ele aparece em tamanhos variados.
Então, eu não quero mexer mais na parte de gravar porque deu muito trabalho, mas sim aonde visualizo.
Na parte que visualizo está assim chamando a foto:
<?php
$id = $_GET['id'];
$s = '<iframe height="150" width="120" src="foto2.php?id=' .$id. '" name="foto" marginheight="0" align="middle" scrolling="No" frameborder="0" id="" allowtransparency="yes"></iframe>';
echo $s;
?>
Eu limitei em 150 x 120, para se ajustar ao local que mostrar o relatorio com a foto, porém quando gravo um arquivo maior de 200 x 170 por exemplo, ele corta a foto, e não redimensiona.
Alguém tem uma solução simples para isso? Não quero em hipótese algum alterar nada na gravação. Se alguém tiver uma solução para a visualização agradeço.
Livia Sampaio
Post mais votado
02/05/2016
Facilita muito a leitura e consequentemente a ajuda.
Provavelmente sou lerdo, para não dizer que sou burro, achei o post confuso e demorei para entender.
Se você quer somente exibir uma imagem com um determinado tamanho pode usar os atributos width e height da tag <img /> que deve funcionar:
<img src="molecula.jpg" alt="molecula" width="200" height="200" />
Veja um exemplo funcionando:
Baixe o exemplo funcionando.
Jothaz
Mais Posts
01/05/2016
Jothaz
Acredito que uma forma de fazer o quer é usando thumbnails.
Existem várias forma de fazê-lo, mas como não conheço qual o nível de seu conhecimento fica complicado sugerir algo,
Eu gosto muito de usar o jQueyr e neste caso existe plugin para criar thumbnails:
[url:descricao=jQuery Plugins Tagged ‘thumbnail’]http://jquery-plugins.net/tag/thumbnail[/url]
jQuery Thumbs
Dê de uma pesquisada e post suas dúvidas, ou vamos aguardar outras sugestões.
01/05/2016
Livia Sampaio
Queria que redimensionasse mas sem cortar, parecido até como nas fotos deste fórum quando se cadastra a foto do perfil.
01/05/2016
Livia Sampaio
Se alguém soubesse nesse código fazer algo para ele redimensionar para um tamanho específico, mesmo a foto sendo maior, me pouparia muito trabalho
Nesse código eu só posso inserir fotos menores que 200 x 170. Limitei isso para forçar a ter de editar primeiro a imagem para o tamanho menor antes do upload. Mas não fica sendo prático.
// Se a foto estiver sido selecionada
if (!empty($foto["name"])) {
// Largura máxima em pixels
$largura = 170;
// Altura máxima em pixels
$altura = 200;
// Tamanho máximo do arquivo em bytes
$tamanho = 1000;
// Verifica se o arquivo é uma imagem
if(!@eregi("^image\/(pjpeg|jpeg|png|gif|bmp)$", $foto["type"])){
$error[1] = "Isso não é uma imagem.";
}
// Pega as dimensões da imagem
$dimensoes = getimagesize($foto["tmp_name"]);
// Verifica se a largura da imagem é maior que a largura permitida
if($dimensoes[0] > $largura) {
$error[2] = "A largura da imagem não deve ultrapassar ".$largura." pixels";
}
// Verifica se a altura da imagem é maior que a altura permitida
if($dimensoes[1] > $altura) {
$error[3] = "Altura da imagem não deve ultrapassar ".$altura." pixels";
}
// Verifica se o tamanho da imagem é maior que o tamanho permitido
if($arquivo["size"] > $tamanho) {
$error[4] = "A imagem deve ter no máximo ".$tamanho." bytes";
}
// Se não houver nenhum erro
if (count($error) == 0) {
// Pega extensão da imagem
preg_match("/\.(gif|bmp|png|jpg|jpeg)$/i", $foto["name"], $ext);
// Gera um nome único para a imagem
$nome_imagem = md5(uniqid(time())) . "." . $ext[1];
// Caminho de onde ficará a imagem
$caminho_imagem = "fotos/" . $nome_imagem;
// Faz o upload da imagem para seu respectivo caminho
move_uploaded_file($foto["tmp_name"], $caminho_imagem);
01/05/2016
Jothaz
Já usei thumbnails do jQuery em dezenas de projetos e nunca tive problemas de corte de imagens. Então sem ver como esta implementado complica, pois pode ser que a implementação não esteja correta. Verificou se retorna algum erro no console do browser?
Para redimensionar as imagens veja se os exemplos lhe ajudam:
http://jsfiddle.net/eric_freitas/24Daa/
Redimensionar imagem antes de enviar com Javascript
Jquery - Redimensionar imagens proporcionalmente.
Outro caminho é usar o canvas do HTML5 em conjunto com JavaScript, nunca usei, mas um pesquisa certamente irá retornar exemplos do uso.
Também nunca usei, mas pode ser feito no PHP:
Redimensionando imagens automaticamente com o PHP
http://www.daviferreira.com/posts/manipulando-e-redimensionando-imagens-com-php
02/05/2016
Livia Sampaio
Mas vamos lá, como mencionei, estou tentando facilitar o que tenho, e não refazer. Então se possível alterar o que já está prontou ou apenas redimensionar para visualização.
Acima você postou essa alternativa. Jquery - Redimensionar imagens proporcionalmente.
Fiz assim, coloquei uma imagem de 400 x 400 na pasta, visualizei com essa tamanho, depois com o código postado ele não altera esse tamanho.
<script>
(function($) { $.fn.imageResize = function(options) { var that = this; var settings = { width: 200, height: 200 }; options = $.extend(settings, options); if (!that.is('img')) { return; } return that.each(function() { var maxWidth = options.width; var maxHeight = options.height; var ratio = 0; var width = $(that).width(); var height = $(that).height(); if (width > maxWidth) { ratio = maxWidth / width; $(that).css('width', maxWidth); $(that).css('height', height * ratio); } if (height > maxHeight) { ratio = maxHeight / height; $(that).css('height', maxHeight); $(that).css('width', width * ratio); } }); };})(jQuery);$('img', '#original').click(function() { $(this).imageResize();});
</script>
<div id="original"><img src="fotos/fototeste.jpg" alt="" /></div>
e baixei o Jquery,js
02/05/2016
Livia Sampaio
Fiz uma mudança e agora está ok.
// Seleciona todos os usuários
$sql = mysql_query("SELECT * FROM clientes WHERE id_cliente=$_GET[id]");
// Exibe as informações de cada usuário
while ($nome = mysql_fetch_object($sql)) {
// Exibimos a foto
if($nome->foto != ""){
echo "<img src='fotos/".$nome->foto."' alt='Foto de exibição' width='135' height='170' /><br />";
}else{
echo "<img src='fotos/sem_foto.jpg' width='135' height='170' />";
}
02/05/2016
Jothaz
03/05/2016
Livia Sampaio
Ainda o uso em certas partes, pois é uma alternativa que é mais simples. No caso só fiz a mudança aonde ele precisava aparecer com um tamanho redimensionado.
Clique aqui para fazer login e interagir na Comunidade :)