[SOLUCIONADO] Cambiar imagen canvas html5 javascript?

[flomix77]

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:

//<![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>  

[flomix77]

ayudenme ya paso un dia solo me hize la cuenta por esto ayudaaaaa

[hackjose]

Para cambiar la imagen debes borrar la primera y dibujar la otra.

As algo del tipo

Cuando el valor de select cambie
Entonces borrar imagen actual con clearRect
Despues pintar nuevamente la imagen digamos con drawImage

[flomix77]

Iniciado por hackjose

Para cambiar la imagen debes borrar la primera y dibujar la otra.

As algo del tipo

Cuando el valor de select cambie
Entonces borrar imagen actual con clearRect
Despues pintar nuevamente la imagen digamos con drawImage

ooh buenisima idea lo intentare y te aviso!, Gracias.

edito: no tengo idea de como hacerlo x_x ayudame porfa

[hackjose]

Pones el evento onchange al select

Al listener del onchange le pones este "codigo"
Borrar la imagen que se hace con clearRect(canvas.height,canvas,width);
Pinta la nueva imagen drawImage(url imagen, tamaño);

Asi quedaria, salu2

[flomix77]

Iniciado por hackjose

Pones el evento onchange al select

Al listener del onchange le pones este "codigo"
Borrar la imagen que se hace con clearRect(canvas.height,canvas,width);
Pinta la nueva imagen drawImage(url imagen, tamaño);

Asi quedaria, salu2

no hize eso .. era más simple ya lo solucione :3