comment charger une nouvelle image et dessiner sur la toile?

Question

J'ai une image et je dessine cette image sur la toile. maintenant je veux changer la source de l'image et dessiner à nouveau l'image dans la toile. J'ai essayé le code ci-dessous et voici le jsfiddler. le dessin de la toile ne change pas .... que faire?

HTML

<button onclick="change_2_new_image();">change_image()</button> 
<img id="test" src="http://static.clickbd.com/global/classified/item_img/374646_0_original.jpg" alt="error" title="This is an image" /> 
<canvas id="myCanvas" width="320px" height="275px"><canvas> 

JS

var img; 
$(function() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    img = document.getElementById("test"); 
    img.ready = function() { 
     alert("asasas"); 
    }; 
    ctx.drawImage(img, 0, 0); 

}); 

function change_2_new_image() { 

    $('#test').attr("src", "http://upload.wikimedia.org/wikipedia/en/9/9a/Grameenphone_Logo.png"); 
    img = document.getElementById("test"); 
    ctx.drawImage(img, 0, 0); 
} 

Answer 1

Votre question est à portée variable. Vous ne pouvez pas accéder à ctx à partir de la fonction.

function change_2_new_image() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    $('#test').attr("src", "http://upload.wikimedia.org/wikipedia/en/9/9a/Grameenphone_Logo.png"); 
    img = document.getElementById("test"); 
    ctx.drawImage(img, 0, 0); 
    ctx.render() 
} 

Ce qui précède devrait maintenant fonctionner.

Answer 2

ctx est défini à l'intérieur de votre fermeture et n'est pas défini dans change_2_new_image(), c'est pourquoi le message d'erreur ReferenceError: ctx is not defined apparaît dans la console. Après avoir corrigé cela, vous remarquerez peut-être que l'image n'a pas encore été chargée. utilisez jQuery sur ('load', ...) event. pour plus d'informations, vous pouvez jeter un oeil à ce fil: jQuery event for images loaded

Espérons que ça aide!