CodeIgniter guardar canvas como imagen en bd

[mvagas]

ola a todos lo que pasa es que estoy pintando un avatar en canvas y quisiera saber como hago para guardar esto en una ase de datos como imagen no importa la extencion si alguno de ustedes tiene algo parecido porfa aviarme lo nesecito urgentemente puede ser en codeignaiter o php oo

[pateketrueke]

Amarra tu caballo bribón.

Primero separa responsabilidades y luego mezclas todo.

Canvas es un elemento de HTML5 y es accesible, desde luego, con Javascript y no con PHP.

Consulta una referencia de Javascript para canvas y primero aprende a distinguir entre lenguajes y contextos.

PHP aquí no te va a servir de nada si no sabes usar dicha API.

PDTA: ¿que significa esto?

porfa aviarme lo nesecito urgentemente puede ser en codeignaiter o php oo

Si crees que vamos a darte algún código ya hecho estás mal, te invito a leer las normas del foro antes de continuar pensando así.

[mvagas]

que pena lo que queria decir era que me respondieran urgente mente y pues mostrame un ejemplo de imagenes y claro que si se pude desde javascript enviarlo por via post a una variable y luego guardar esa variable en una base de datos pero no lo tengo muy claro y claro que no necesito que me mande el codigo solo una explicacion de como utilizar canvas y php esperava respuestas no regaños

[pateketrueke]

No estamos obligados a responder, y mucho menos si nos dicen que lo hagamos con urgencia.

Entiende que todos usamos del tiempo libre que disponemos y sin recibir nada cambio, se trata de compartir conocimiento y nada más.

Volviendo al punto.

¿Ya sabes como exportar la imagen con Javascript?

Cuando nos muestres como lo haces podremos ayudarte, gracias por tu tiempo.

[mvagas]

var canvas;
var context;
var images = {};
var x = 245;
var y = 185;
var breathAmt = 0;
var hair1;
///////////*********************************/////////////////
function prepareCanvas(canvasDiv, canvasWidth, canvasHeight){
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
context = canvas.getContext("2d");

hair1=document.getElementById("hair");
//PRIMERA PARTE DE LAS IMAGENES
cargaImagen("leftArm");
cargaImagen("legs");
cargaImagen("torso");
cargaImagen("rightArm");
cargaImagen("head");
cargaImagen('hair');
//SEGURNDA PARTE DE LAS IMAGENES
cargaImagen("leftArm1");
cargaImagen("legs1");
cargaImagen("torso1");
cargaImagen("rightArm1");
cargaImagen("head1");
cargaImagen('hair1');
}
/////////////****************************/////////////////
function cargaImagen(name) {

images[name] = new Image();
images[name].src = "images/" + name + ".png";
images[name].onload = function() {

var hair = document.getElementById("hair");
hair.addEventListener("click",function(){context.b eginPath(); context.drawImage(images["hair"], x - 37, y - 138 - breathAmt); close.beginPath();
},false);
///////////////////////////////////////
var leftArm = document.getElementById("leftArm");
leftArm.addEventListener("click",function(){contex t.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt);
},false);
///////////////////////////////////////
var legs = document.getElementById("legs");
legs.addEventListener("click",function(){context.d rawImage(images["legs"], x, y);},false);
///////////////////////////////////////
var torso = document.getElementById("torso");
torso.addEventListener("click",function(){context. drawImage(images["torso"], x, y - 50);},false);
///////////////////////////////////////
var head = document.getElementById("head");
head.addEventListener("click",function(){context.d rawImage(images["head"], x - 10, y - 125 - breathAmt);
},false);
///////////////////////////////////////
var rightArm = document.getElementById("rightArm");
rightArm.addEventListener("click",function(){conte xt.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt);
},false);
////////************************************************** ******////////////////////
///////////////////////////////////////////////////////////////////////////////////
//var prueva =document.getElementById("hair1");
////////////////////////////////////////////////////////////////////////////////////1
var hair1 = document.getElementById("hair1");
hair1.addEventListener("click",function(){ context.drawImage(images["hair1"], x - 37, y - 138 - breathAmt);
},false);
///////////////////////////////////////
var leftArm1 = document.getElementById("leftArm1");
leftArm1.addEventListener("click",function(){conte xt.drawImage(images["leftArm1"], x + 40, y - 42 - breathAmt);
},false);
///////////////////////////////////////
var legs1 = document.getElementById("legs1");
legs1.addEventListener("click",function(){context. drawImage(images["legs1"], x, y);},false);
///////////////////////////////////////
var torso1 = document.getElementById("torso1");
torso1.addEventListener("click",function(){context .drawImage(images["torso1"], x, y - 50);},false);
///////////////////////////////////////
var head1 = document.getElementById("head1");
head1.addEventListener("click",function(){context. drawImage(images["head1"], x - 10, y - 125 - breathAmt);
},false);
///////////////////////////////////////
var rightArm1 = document.getElementById("rightArm1");
rightArm1.addEventListener("click",function(){cont ext.drawImage(images["rightArm1"], x - 15, y - 42 - breathAmt);
},false);


//////////////////funtion de borra lo que hay en canvas
var borra = document.getElementById("borra");
borra.addEventListener("click",function(){ canvas.width = canvas.width; },false);
////////////////////////funcion de convertir a imagen pnh o jpg
var img = document.getElementById("avatar");
var png = document.getElementById("png");
var jpeg = document.getElementById("jpeg");

png.addEventListener("click",function(){
img.src = canvas.toDataURL("image/png");
},false);


jpeg.addEventListener("click",function(){
img.src = canvas.toDataURL("image/jpeg");
},false);
}
}

mira este es el codigo de armar el avatar y conel evento clic las convierto en png o jpg esta es mostratada en una etiqueta <img> y no se si pueda crear un metodo que me guarde lo que tenga esa etiqueta asi como hacemos son lo <input type=text>

[pateketrueke]

Volvemos a lo mismo, aquí tratamos temas exclusivos de PHP.

Tu problema actual consiste en pasar dicha imagen a un formulario para que sea procesada como un upload cualquiera, eso lo debes hacer con Javascript.

Por favor consulta en una referencia de canvas para Javascript cómo hacer eso que te falta.

[GatorV]

Puedes usar algo así: http://www.nihilogic.dk/labs/canvas2image/

Luego recibes la cadena en PHP, como esta codificada en base64, usas base64decode y la guardas en disco

[mvagas]

gracias por tu ayuda es que tendo una ṕregunta esa imagen que he creado la muestro en una etiqueta img esta cuando guardamos un valor de un intput text lo guardamos normal con el nombre del input lo mismo sucede con las etiquetas img

[mvagas]

Iniciado por GatorV

Puedes usar algo así: [url]http://www.nihilogic.dk/labs/canvas2image/[/url]

Luego recibes la cadena en PHP, como esta codificada en base64, usas base64decode y la guardas en disco

ola gracias ese base64 la guardo en un campo oculto para luego ser guardado en la base de datos y para volverla a mostar es lo mismo que una imgen normal

[GatorV]

Puedes usar este ejemplo para ver como almacenar y desplegar: http://www.forosdelweb.com/f18/tutor...inario-127775/

Saludos.

[Hunter11Rilley]

I am also interested in the hair wigs and as I like to change my look sometimes with a new hair style, but having the hair cut is really a trouble, but each time I just buy cheap hair wigs online and told the seller the style I want and then soon I can find the one satify me. So I have never met the problem as you. Not long ago I get a synthetic wig for myself and it bring me a new style as before.