Nueva pregunta

Pregunta:

 
  1  
 
 
Jonnatan Gomez Karma: 719 Guatemala
 
 Fecha: 02-06-2015 07:06:06 (En Español)

¿Cómo guardar una imagen en el servidor con javascript o ajax generada por un canvas?[Resuelta]

El codigo javascript que tengo es este

crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
window.open(crop_canvas.toDataURL("image/png"));


Como pueden ver ya obtengo la imagen y la muestro en otra ventana, ok todo alli va bien ahora lo que necesito hacer es en vez de abrir la imagen en otra ventana poder guardarla en mi servidor como un jpg comun y corriente si alguien encuentra como hacerlo o tiene experiencia en esta situacion porfavor comentar gracias.



Saludos compañeros. Etiquetas: AJAX - HTML5 - HTML5 canvas - Javascript - PHP - Pregunta Votos: 1 - Respuestas: 5 - Vistas: 13 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  •  
      3  
     
     
    Jonnatan Gomez Karma: 719 Guatemala
     
    Fecha: 03-06-2015 06:42:46 Por si a alguien le interesa esta pregunta y no sabe como solucionarla aqui dejo el codigo que utilize para hacerlo:


    Codigo JavaScript

    
 try {
           canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
           
            var dataUrl = canvas.toDataURL("image/png"); 
   
            $.ajax({
                    url: '../php/saveFile.php',  
                    data:{ 
                        img: dataUrl
                    },                     
                    type: 'POST',   
                    success: function(data)
                    {
                      alert("Imagen guardada en servidor");                       
                    }
                });                
    }
    catch(err) {
          alert("Ocurrio un error");
    }


    Y este es mi codigo PHP que ejecuta el ajax

    <?php
/* saveFile.php */

//Obtener variable POST e desemcriptarla
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
 
$im = imagecreatefromstring($data);  //convertir text a imagen

if ($im !== false) {

    imagejpeg($im, '../img/nombre_imagen.jpg'); //guardar a server 
    imagedestroy($im); //liberar memoria  

    echo 'Todo salio bien tu imagen ha sido guardada';
}else {
    echo 'Un error ocurrio al convertir la imagen.';    
}
      Votos: 3 - Link respuesta
     
  •  
      0  
     
     
    Chrismart Anji Karma: 1473 México
     
    Fecha: 28-08-2015 04:45:58 Hola Jony, me podrias ayudar en esto es lo que buscaba para convertir imagenes creadas a canvas a jpeg o png pero lo copie tal como esta y falla en algunas lineas de saveFile.php ademas no se como llamarlo :/   Votos: 0 - Link respuesta
     
  •  
      2  
     
     
    Jonnatan Gomez Karma: 719 Guatemala
     
    Fecha: 28-08-2015 06:55:57 Faltaba una comilla en el codigo ya lo edite, proba alli, ahora bien la llamada se hace dentro de una funcion de javascript y la llamas con un onclick de un boton   Votos: 2 - Link respuesta
     
  •  
      0  
     
     
    Chrismart Anji Karma: 1473 México
     
    Fecha: 28-08-2015 11:47:58 si jony me di cuenta que le faltaba una comilla n.n y a ver un onclick tras una funcion en javascript que cree la imagen canvas? algo asi, a ver si me puedess ayudar:

    <!DOCTYPE html>
<html lang="es">
<head>
<title>Canvas HTML5 Video</title>

<meta charset="UTF-8" />
<script>
window.addEventListener("load", init);

function init() {
var video = document.getElementById("v");
canvas = document.getElementById("c");
btn = document.getElementById("t");
img = document.getElementById("img");


video.addEventListener("loadedmetadata", function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
}, false);

btn.addEventListener("click", function() {
canvas.getContext("2d").drawImage(video,0,0);
var imgData = canvas.toDataURL("image/png");
dato = dato.replace("image/jpeg", "image/octet-stream");
document.location.href = dato;
var src = "http://youanimeoficial.webcindario.com/imagenes/blurred.jpg";
img.setAttribute(src, imgData);
img.crossOrigin = 'Anonymous';
});
}
</script>
</head>
<body>
<img src="" id="img" />
<video id="v" controls>
<source src="https://dl.dropboxusercontent.com/s/n2kcohl8suolpsg/angel-b-1.mp4?dl=10000000000000000000000000" type="video/mp4"/>
</video>
<canvas id="c">
</canvas>
<button id="t">Toma Una Foto</button>
</body>
</html>


    esto que puse tiene codigo que ni al caso trataba de hacer la imagen canvas en jpeg o png pero simplemente con canvas falle busque en internet y nada :/ en php ni en nada, me podias dar una idea de donde se podria implementar el onclick para que esta imagen se convierta en imagen con el codigo que tu hicistes?

    supongo que el onclick iria en el button que yo puse para tomar la foto pero , como? a ver...

    ya despues yo haria mas efectos con canvas en onvertir la imagen a blanco y negro y en sepa ect todo lo que dispone la etiqueta canvas, y por qu php =) incluso hacer gif eso seria genial.... ver tus series ect y ademas puedas hacer gifs de esos momentos que te causan risas ect :')

    Te lo agradeceria enserio mucho Jony =') *.*       Votos: 0 - Link respuesta
     
  •  
      0  
     
     
    Jonnatan Gomez Karma: 719 Guatemala
     
    Fecha: 02-09-2015 06:56:32 Lo siento por no contestar , no he tenido mucho tiempo estos dias , cuando me libere un poco te respondere ...   Votos: 0 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com