Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gustavo Kirk

[Resolvido] canvas html 5

Por , em Desenvolvimento frontend

Recommended Posts

gustavo Kirk    1

gustavo Kirk
Postado

E ai pessoal, estou ultilizando a tag canvas do html5 para criar uma imagem e nela aplico alguns filtros, porem apos criar a imagem, a mesma não aparece na tag canvas se olharmos no codigo fonte gerado, clicando na imagem "no firefox" e exibindo somente ela, notamos que o endereço dela é "data:image/png;base64,...", gostaria de saber se alguem sabe como salvar a imagem, o que eu preciso é do novo endereço dela la no meu JS pois assim posso enviar o endereço por ajax pra um php e salvar a nova imagem, abaixo segue um codigo semelhante apenas mais simples para melhor entendimento, quem quiser pode simplismente copiar e colar em um arquivo html que ira funcionar, lembrando que o navegador tem que suportar html

 

<html>
 <head>
   <style>
     body {
       margin: 0px;
       padding: 0px;
     }
     #myCanvas {
       border: 1px solid #9C9898;
     }
   </style>
   <script>
     window.onload = function() {
       var canvas = document.getElementById('myCanvas');
       var context = canvas.getContext('2d');
       var imageObj = new Image();

       imageObj.onload = function() {
         context.drawImage(imageObj, 69, 50);

       };
       imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
     };

   </script>
 </head>
 <body>
   <canvas id="myCanvas" width="578" height="400"></canvas>
 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gustavo Kirk    1

gustavo Kirk
Postado

JCMais obrigado pela dica, um pouco a diante estou com um outro problema, não estou conseguindo salvar o arquivo na pasta, a imagem fica em branco apesar de estar com 600kb abaixo segue o JS

 

$('#salvar').click(function(){

var canvas  = document.getElementById("preset-example");

	var data = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

	$.ajax({
		type: "post",
		data: "url=" + data,
		url: "salve_image.php",
		success: function(msg){
			alert(msg);
		}
	});	
});

 

ja testei assim também

 

$('#salvar').click(function(){

	var canvas  = document.getElementById("preset-example");
	var data    = canvas.toDataURL();

	$.ajax({
		type: "post",
		data: "url=" + data,
		url: "salve_image.php",
		success: function(msg){
			alert(msg);
		}
	});	
});

 

agora o PHP que recebe o ajax

 

$url = $_POST['url'];

function createImage($origem, $destino){ 
	$orig = fopen($origem, "r"); 
	$dest = fopen($destino, "w"); 
	while (!feof($orig)) { 
		$line = fread ($orig, 1024); 
		fwrite($dest, $line); 
	} 
	fclose($orig); 
	fclose($dest); 
} 

$formato = substr($url,-4,4);
$origem = $url; 
$destino = "img/teste".$formato; 
createImage($origem, $destino);

Compartilhar este post

Link para o post
Compartilhar em outros sites

gustavo Kirk    1

gustavo Kirk
Postado

Resolvido, vou mostrar abaixo a solução, funciona perfeitamente.

 

$('#salvar').click(function(){

	var data = document.getElementById("preset-example").toDataURL();
	$.post("save_image.php", {
		imageData : data
	}, function(data) {
		alert('imagem salva');
	});
});

 

$data = substr($_POST['imageData'], strpos($_POST['imageData'], ",") + 1);
$decodedData = base64_decode($data);
$fp = fopen("img/NOMEDAIMAGEM", 'wb');
fwrite($fp, $decodedData);
fclose($fp);

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito