redimensionar imagens antes de fazer upload

acao · October 1, 2013 at 12:28 PM

boas

tenho necessidade de redimensionar imagens antes de fazer upload das mesmas.

a minha dificuldade é conseguir abrir a tela de busca dos ficheiros e retornar o caminho dos mesmos.

para depois fazer o upload com a lib GD.

estou a pensar em utilizar a tela de busca do windows mas não sei por aonde começar.

se alguém tiver uma pedra e a queira partilhar agradeço.

cumps

acao

yoda · October 1, 2013 at 10:03 PM

O que queres é impossível. O PHP só consegue manipular na imagem depois do upload feito.

taviroquai · October 1, 2013 at 11:49 PM

@acao

Queres redimensionar automaticamente ou manualmente?

Se quiseres automaticamente podes muito bem fazê-lo no servidor com PHP. A desvantagem é que para chegar ao servidor, pode demorar mais conforme o tamanho do ficheiro.

Se for manualmente, existem ferramentas javascript para isso, algumas quase plug n' play com jQuery. Ainda manualmente, podes usar por exemplo o Paint.

faianca · October 2, 2013 at 12:30 AM

Fazes com qualquer software, EX: Actions em photoshop.

Mas porque é que não podes fazer upload delas primeiro e dps redimensionares com o php? Ficava tudo muito mais simples.

Já não vejo assim tantos problemas com Bandwidth estes dias.

Abraço

acao · October 2, 2013 at 08:16 AM

boas

tenho necessidade de redimensionar imagens antes de fazer upload das mesmas.

a minha dificuldade é conseguir abrir a tela de busca dos ficheiros e retornar o caminho dos mesmos.

para depois fazer o upload com a lib GD.

estou a pensar em utilizar a tela de busca do windows mas não sei por aonde começar.

se alguém tiver uma pedra e a queira partilhar agradeço.

cumps

acao

obrigado pensei que fosse possivel, como eu não vou utilizar um tamanho superior a 2mb ficava mais rápido o upload.

@acao

Queres redimensionar automaticamente ou manualmente?

Se quiseres automaticamente podes muito bem fazê-lo no servidor com PHP. A desvantagem é que para chegar ao servidor, pode demorar mais conforme o tamanho do ficheiro.

era pela desvantagem que citaste.

Fazes com qualquer software, EX: Actions em photoshop.

Mas porque é que não podes fazer upload delas primeiro e dps redimensionares com o php? Ficava tudo muito mais simples.

Já não vejo assim tantos problemas com Bandwidth estes dias.

Abraço

isto já tenho, a razao era devido ao tempo do upload para carregar as imagens, estou acarregar mb para depois colocar no lixo.

cumps

acao

HappyHippyHippo · October 2, 2013 at 09:34 AM

o que pretendes é agora possível com html5 : FileAPI + Canvas

<?php
if (isset($_POST['imgBase64'])) {
   if (strpos($_POST['imgBase64'], "data:image/png;base64,") === 0) {
       $fd = fopen("files/image.png", "wb");
       $data = base64_decode(substr($_POST['imgBase64'], strlen("data:image/png;base64,")));
   } else if (strpos($_POST['imgBase64'], "data:image/jpg;base64,") === 0) {
       $fd = fopen("files/image.jpg", "wb");
       $data = base64_decode(substr($_POST['imgBase64'], strlen("data:image/jpg;base64,")));
   }

   if ($fd) {
       fwrite($fd, $data);
       fclose($fd);

       echo "Resized image saved on server";
   } else {
       echo "Error crating the file on server";
   }
   die();
}
?>
<html>
   <head>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
       <script>
           function resize_image(input, width, height) {
               if (input.files[0].type.match(/image.*/)) {
                   $("#message").html("");

                   var canvas = $("#resizer")[0].getContext('2d');
                   canvas.canvas.width = width;
                   canvas.canvas.height = height;

                   var img = new Image;
                   img.src = URL.createObjectURL(input.files[0]);
                   img.onload = function() {
                       canvas.drawImage(img, 0, 0, width, height);
                   }

                   $('#sender').show();
               } else {
                   $("#message").html("File not a image");
               }
           }

           function send_image() {
               var image_base64 = $("#resizer")[0].toDataURL();

               $.post(
                   "index.php",
                   { imgBase64: image_base64 },
                   function(response) {
                       $("#message").html(response);
                   }
               );
           }
       </script>
       <style>
           #resizer { display: none; }
           #sender { display: none; }
       </style>
   </head>
   <body>
       <div>
           <input type="file" id="input" onchange="resize_image(this, 40, 40);" />
       </div>
       <div>
           <canvas id="resizer"></canvas>
           <div id="message"></div>
           <input type="button" id="sender" value="send" onclick="send_image();" />
       </div>
   </body>
</html>

não vou estar a explicar o código, porque não tenho muito tempo, mas qualquer dúvida avisa que eu ou outra pessoa poderá te ajudar

acao · October 2, 2013 at 06:38 PM

o que pretendes é agora possível com html5 : FileAPI + Canvas

<?php
if (isset($_POST['imgBase64'])) {
if (strpos($_POST['imgBase64'], "data:image/png;base64,") === 0) {
	$fd = fopen("files/image.png", "wb");
	$data = base64_decode(substr($_POST['imgBase64'], strlen("data:image/png;base64,")));
} else if (strpos($_POST['imgBase64'], "data:image/jpg;base64,") === 0) {
	$fd = fopen("files/image.jpg", "wb");
	$data = base64_decode(substr($_POST['imgBase64'], strlen("data:image/jpg;base64,")));
}

if ($fd) {
	fwrite($fd, $data);
	fclose($fd);

	echo "Resized image saved on server";
} else {
	echo "Error crating the file on server";
}
die();
}
?>
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>
		function resize_image(input, width, height) {
			if (input.files[0].type.match(/image.*/)) {
				$("#message").html("");

				var canvas = $("#resizer")[0].getContext('2d');
				canvas.canvas.width = width;
				canvas.canvas.height = height;

				var img = new Image;
				img.src = URL.createObjectURL(input.files[0]);
				img.onload = function() {
					canvas.drawImage(img, 0, 0, width, height);
				}

				$('#sender').show();
			} else {
				$("#message").html("File not a image");
			}
		}

		function send_image() {
			var image_base64 = $("#resizer")[0].toDataURL();

			$.post(
				"index.php",
				{ imgBase64: image_base64 },
				function(response) {
					$("#message").html(response);
				}
			);
		}
	</script>
	<style>
		#resizer { display: none; }
		#sender { display: none; }
	</style>
</head>
<body>
	<div>
		<input type="file" id="input" onchange="resize_image(this, 40, 40);" />
	</div>
	<div>
		<canvas id="resizer"></canvas>
		<div id="message"></div>
		<input type="button" id="sender" value="send" onclick="send_image();" />
	</div>
</body>
</html>

não vou estar a explicar o código, porque não tenho muito tempo, mas qualquer dúvida avisa que eu ou outra pessoa poderá te ajudar

obrigado pelo post colocado.

1 - se alguem tiver a amabilidade de explicar como funciona.

referente à GD qual é a função que retorna o tamanho do ficheiro os mb.

cumps

acao

HappyHippyHippo · October 2, 2013 at 07:35 PM

referente à GD qual é a função que retorna o tamanho do ficheiro os mb.

no código de envio, image_base64 é uma string práticamente com o número de catacteres igual ao tamanho do ficheiro criado.

na realidade o tamanho pedido enviado é praticamente o tamanho dessa string

acao · October 2, 2013 at 08:34 PM

boas

peço desculpa pela confusao que lhe estou a causar.

a função referente à GD era para outra situação e não referente ao exemplo que você teve a amabilidade de disponibilizar.

eu necessitava de retornar o tamanho do ficheiro despois de ter sido movido para a pasta destino.para depois conseguir calcular a percentagem da qualidade da imagem.

por isso queria utilizar a GD.

referente ao seu post tentei alterar o isset(post) para o poste do meu formulario mas não consegui nada.

ainda não estou a enxergar o funcionamento.

cumps

acao

Sign In

redimensionar imagens antes de fazer upload

Recommended Posts

acao

yoda

taviroquai

faianca

acao

HappyHippyHippo

acao

HappyHippyHippo

acao

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information