Холст загружает предыдущее изображение

У меня есть холст с идентификатором 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

Обновленный ответ: событие onload иногда активируется после объявления источника изображения. Вместо этого объявите об этом раньше.

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