Платното зарежда предишно изображение

Имам платно с id cnv.

<canvas id='cnv'></canvas>

Имам функция на javascript, която променя изображението в платно. Изображенията варират.

function changeImageInACanvas(dynamicSource){     
     var myid_signature = document.getElementById("cnv");    
     var myid_ctx_signature= myid_signature.getContext('2d');
     var myid_signature_image  = document.getElementById("img_mysignature");                                                
     myid_signature_image.src = dynamicSource;                    

     myid_ctx_signature.clearRect(0, 0, myid_signature.width, myid_signature.height);               

     if (myid_signature_image.complete){
         myid_ctx_signature.drawImage(myid_signature_image,0,0,  myid_signature_image.width,  myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);                                                                                                
     }else{
         myid_signature_image.onload = function () {                            
             myid_ctx_signature.drawImage( myid_signature_image,0,0,  myid_signature_image.width,  myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);                                                                                                   
         };                                              
     }
}

Първият път функцията беше изпълнена, изображението се зарежда правилно в платното, но при втория път предишното изображение беше показано, а новото изображение не беше показано.

Отстранявам грешки, като поставям точка на прекъсване във всеки ред на функцията. Открих, че новото изображение се зарежда при второто изпълнение на функцията, но след функцията платното отново зарежда предишното/първото изображение. Къде съм изчезнал?


javascript canvas html html5-canvas
person alyssaeliyah    schedule 29.05.2015    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Трябва да промените декларацията на вашата променлива за изображение от

var myid_signature_image  = document.getElementById("img_mysignature");

To

var myid_signature_image  = new Image();

След това ще можете да използвате функцията по предназначение.

Бърз пример в този Jsfiddle

Актуализиран отговор: Събитието за зареждане понякога се активира, след като източникът на изображението е деклариран. Вместо това го декларирайте преди.

function changeImageInACanvas(dynamicSource){     
     var myid_signature = document.getElementById("cnv");    
     var myid_ctx_signature= myid_signature.getContext('2d');
     var myid_signature_image  = new Image();  
  
     myid_signature_image.onload = function () { //declare the onload-event                      
        myid_ctx_signature.clearRect(0, 0, myid_signature.width, myid_signature.height); 
       myid_ctx_signature.drawImage( myid_signature_image,0,0,  myid_signature_image.width,  myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);
                      
     }
     myid_signature_image.src = dynamicSource; //declare the source last
}


changeImageInACanvas('http://pattersonrivervet.com.au/sites/default/files/pictures/Puppy-10-icon.png');      

setTimeout(function () {
 changeImageInACanvas('https://38.media.tumblr.com/avatar_2be52b9ba912_128.png');  
},3000);
                                          
<canvas id='cnv'></canvas>

person Niddro    schedule 29.05.2015
comment
Нищо не се е променило, някаква обосновка на вашия отговор? - person alyssaeliyah; 01.06.2015
comment
Съжалявам за късния отговор, но вашият html код не включва никакви img-тагове, така че вашата променлива myid_signature_image ще бъде недефинирана и следователно няма да показва изображение. Вместо това дефинирах променливата като изображение в JavaScript кода. Нещо друго, което може да създава проблеми, е, че вие ​​във вашия else-изявление декларирате събитието onload, което се декларира СЛЕД декларирането на източника на изображение. - person Niddro; 04.06.2015