Jump to content
acao

redimensionar imagens antes de fazer upload

Recommended Posts

acao

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

Share this post


Link to post
Share on other sites
taviroquai

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

Share this post


Link to post
Share on other sites
faianca

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

Share this post


Link to post
Share on other sites
acao

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

Share this post


Link to post
Share on other sites
HappyHippyHippo

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

  • Vote 1

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
acao

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

Share this post


Link to post
Share on other sites
HappyHippyHippo

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


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
acao

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.