Ir ao conteúdo

Gisele Passoni

Membro Júnior
  • Posts

    5
  • Cadastrado em

  • Última visita

Reputação

2
  1. @DiF utilizando sua dica, deu certinho!! Muito obrigada!
  2. @DiF Esse código eu peguei pronto e adaptei. Eu ia usá-lo, porque ele permite carregar qualquer tamanho de imagem. O setor aqui da empresa que vai usar, não quer se preocupar em diminuir as imagens para postar. Querem que seja tudo automático, tipo, descarregar da câmera e postar. Esse foi o único que encontrei nas buscas que fiz. Mas vou seguir o que você me passou, para não perder qualidade, senão ficarão muito ruins as imagens no site. Vou modificar o código e qualquer dúvida, eu volto a postar! Obrigada!
  3. Ok, @DiF segue então os 2 arquivos... arquivo fotos.php <?php $sql="select * from noticias where id = $cod"; //$cod vem por get $resultado = $conexao->query($sql); $d=mysqli_fetch_array($resultado); $pasta=$d['pasta']; $diretorio= "fotos/$pasta"; mkdir("$diretorio", 0777); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cadastro de Foto</title> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/canvas-to-blob.min.js"></script> <script src="js/resize.js"></script> <link rel="stylesheet" href="js/bootstrap.min.css"> <script type="text/javascript"> // Iniciando biblioteca var resize = new window.resize(); resize.init(); // Declarando variáveis var imagens; var imagem_atual; // Quando carregado a página $(function ($) { // Quando selecionado as imagens $('#imagem').on('change', function () { enviar(); }); }); /* Envia os arquivos selecionados */ function enviar() { // Verificando se o navegador tem suporte aos recursos para redimensionamento if (!window.File || !window.FileReader || !window.FileList || !window.Blob) { alert('O navegador não suporta os recursos utilizados pelo aplicativo'); return; } // Alocando imagens selecionadas imagens = $('#imagem')[0].files; // Se selecionado pelo menos uma imagem if (imagens.length > 0) { // Definindo progresso de carregamento $('#progresso').attr('aria-valuenow', 0).css('width', '0%'); // Escondendo campo de imagem $('#imagem').hide(); // Iniciando redimensionamento imagem_atual = 0; redimensionar(); } } /* Redimensiona uma imagem e passa para a próxima recursivamente */ function redimensionar() { // Se redimensionado todas as imagens if (imagem_atual > imagens.length) { // Definindo progresso de finalizado $('#progresso').html('Imagen(s) enviada(s) com sucesso'); // Limpando imagens limpar(); // Exibindo campo de imagem $('#imagem').show(); // Finalizando return; } // Se não for um arquivo válido if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null)) { // Passa para a próxima imagem imagem_atual++; redimensionar(); return; } // Redimensionando resize.photo(imagens[imagem_atual], 600, 'dataURL', function (imagem) { // Salvando imagem no servidor $.post('upload.php', {imagem: imagem}, function() { // Definindo porcentagem var porcentagem = (imagem_atual + 1) / imagens.length * 100; // Atualizando barra de progresso $('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%'); // Aplica delay de 1 segundo // Apenas para evitar sobrecarga de requisições // e ficar visualmente melhor o progresso setTimeout(function () { // Passa para a próxima imagem imagem_atual++; redimensionar(); }, 1000); }); }); } /* Limpa os arquivos selecionados */ function limpar() { var input = $("#imagem"); input.replaceWith(input.val('').clone(true)); } </script> </head> <body> <div class="container"> <h1>Cadastro de Foto</h1> <form method="post" action="#" role="form"> <div class="progress"> <div id="progresso" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div> </div> <div class="form-group row"> <div class="col-xs-12"> <input id="imagem" type="file" accept="image/*" multiple/> </div> </div> </form> </div> </body> </html> Arquivo upload.php <?php $pasta="fotos/$pasta"; // Recuperando imagem em base64 // Exemplo: data:image/png;base64,AAAFBfj42Pj4 $imagem = $_POST['imagem']; // Separando tipo dos dados da imagem // $tipo: data:image/png // $dados: base64,AAAFBfj42Pj4 list($tipo, $dados) = explode(';', $imagem); // Isolando apenas o tipo da imagem // $tipo: image/png list(, $tipo) = explode(':', $tipo); // Isolando apenas os dados da imagem // $dados: AAAFBfj42Pj4 list(, $dados) = explode(',', $dados); // Convertendo base64 para imagem $dados = base64_decode($dados); // Gerando nome aleatório para a imagem $nome = md5(uniqid(time())); // Salvando imagem em disco file_put_contents("$pasta/{$nome}.jpg", $dados); ?>
  4. Ok, farei isso e assim que possível eu aviso se deu certo!! Obrigada! adicionado 33 minutos depois @kabong03 vou ser sincera... não faço ideia onde adaptar isso. Entendo muito pouco de js
  5. bom dia a todos. Sou nova nesse fórum e preciso de um help! Estou desenvolvendo um sistema de postagem de notícias para o setor responsável aqui da empresa onde trabalho e cada notícia possui várias imagens. Eles me pediram que esse sistema de upload deixasse selecionar todas as imagens de uma unica vez e redimensioná-las para o tamanho certo sem que eles tenham que se preocupar com isso. Encontrei um script que faça isso. Para selecionar todas de uma vez, está ok, meu problema é que ao redimensionar as imagens, elas estão perdendo muito a qualidade. Encaminho o arquivo contendo todo o processo que segui para fazer o sistema de upload. Está sendo usado nesse sistema as bibliotecas: canvas-to-blob.min.js e resize.js. Redimensionar imagem antes de enviar com Javascript.docx

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!