Ver Mensaje Individual
  #5 (permalink)  
Antiguo 27/09/2012, 13:55
mvagas
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: guardar canvas como imagen en bd

Cita:
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>