Hola me preguntaba como hacer para qué la imagen de una canvas cambie al seleccionar una opcion de mi menu select()
pueden ver lo que estoy haciendo http://www.zombie-revolution.net/memes/index.php <- aqui
mi código del javascript que crea el canvas:
Código Javascript
:
Ver original//<![CDATA[
meme_seleccionado = "memes/meme_5.jpg"; // creo que esto debe cambiar pero nose como hacerlo =/
$(window).load(function(){
$(function() {
var cvs = $("canvas"),
cvsWidth = cvs.width(),
cvsHeight = cvs.height(),
ctx = cvs[0].getContext("2d"),
top = $("#top"),
bottom = $("#bottom");
function writeCaptionDOWN( text, y ) {
var size = 100;
do {
size--;
ctx.font = size + 'px Impact';
ctx.lineWidth = size / 32;
} while ( ctx.measureText( text ).width > cvsWidth )
ctx.fillText( text, cvsWidth / 2, y-20 );
ctx.strokeText( text, cvsWidth / 2, y-20 );
}
function writeCaptionTOP( text, y ) {
var size = 100;
do {
size--;
ctx.font = size + 'px Impact';
ctx.lineWidth = size / 32;
} while ( ctx.measureText( text ).width > cvsWidth )
ctx.fillText( text, cvsWidth / 2, y );
ctx.strokeText( text, cvsWidth / 2, y );
}
function writeCaptionEx( text, y ) {
var size = 20;
do {
size--;
ctx.font = size + 'px Impact';
ctx.lineWidth = size / 50;
} while ( ctx.measureText( text ).width > cvsWidth )
ctx.fillText( text, 720 / 2, y-2 );
ctx.strokeText( text, 720 / 2, y-2 );
}
// Setup basic canvas settings
$.extend( ctx, {
strokeStyle : "#000000",
textAlign : 'center',
fillStyle : "#ffffff",
lineCap : "round"
})
$("<img />").load(function() {
var img = this;
$(document.body).on("keyup", function() {
var topText = top.val(),
bottomText = bottom.val();
ctx.clearRect( 0, 0, cvsWidth, cvsHeight );
ctx.drawImage( img, 0, 0 );
ctx.textBaseline = 'top';
writeCaptionTOP( topText, 0 )
ctx.textBaseline = 'bottom';
writeCaptionDOWN( bottomText, cvsHeight )
ctx.textBaseline = 'creditos';
writeCaptionEx("facebook.com/DarkuzsSanchez", 380)
}).trigger("keyup");
})
.attr("src", meme_seleccionado);
});
});//]]>
el código del menu:
Código PHP:
<center>
<p>
<h1>Selecciona Personaje</h1>
<?php
$dir = "memes";//directorio de donde se extraeran las imagenes
$array = scandir($dir); // lo escaneo xd
$cnt = sizeof($array); // lo guardo
echo "
<form name='memeSelect'>
<select name='Memes' onChange='ChangeMeme()'>
";
for($x=2;$x<$cnt;$x++)
{
$tMemes++;
/* obtengo su URL: "$dir/$array[$x]" con comillas para cambiar la imagen canvas o nose... */
echo "
<option id='meme_img' value='"$dir/$array[$x]"'>Meme - $tMemes</option>
";
}
echo "
</select>
</form>
";
?>
</p>
<p>
<textarea id=top>TEXTO 1</textarea>
<textarea id=bottom>TEXTO 2</textarea>
<br><br><br><br>
<canvas id="meme_generado" width=508 height=379></canvas>
</p>
<p>
<input type="button" name="download" value="Descargar" id="download"/>
</p>
</center>