transféré img to canvas (avec un plugin jquery), comment continuer à travailler avec la toile?

Question

i a écrit un bon plugin qui transforme IMG à la toile

jQuery.fn.img2canvas = function() { 

     return this.each(function(){ 

     if($(this).get(0).tagName=='IMG'&&$(this).parent().get(0).tagName!='CANVAS') 
     { 
      //alert($(this).get(0).tagName); 
      $(this).load(function() 
      { 
       var c = $("<canvas class=' img2canvas'>"+$(this).outerHTML()+"</canvas>"); 
       //var c = $("<canvas></canvas>"); 
       $(c).attr('width', this.width); 
       $(c).attr('height', this.height); 
       var ctx = $(c)[0].getContext("2d"); 
       var img = new Image(); 
       img.src = $(this).attr('src'); 
       ctx.drawImage(img, 0, 0); 
       $(c).data('imgsrc', this.src); 
       $(c).attr('id', $(this).attr('id')+'_canvas'); 
       $(this).replaceWith($(c)); 
      }); 
     } 
    }); 


    }; 

jusqu'à présent si bon. mais il n'y a aucun moyen que je puisse continuer à travailler avec ces toiles.

$('img').img2canvas(); //creating the canvas 
$('.img2canvas').css('border', '6px solid red'); //but there is no canvas yet 
$('canvas').each(function(){alert($(this).data('imgsrc'));}); // still no canvas 
$('.img2canvas').each(function(){alert($(this).data('imgsrc'));}); //still no canvas 

ne aide pas.

Que dois-je faire pour conserver l'architecture du plugin et pouvoir continuer à travailler sur les éléments canvas? vous pouvez voir une démo en direct ici http://www.andcontext.com/inimad/sto_demo.php

thx pour votre saisie.

Answer 1

Essayez assigner une fonction de rappel à exécuter lorsque l'image a chargé

jQuery.fn.img2canvas = function(callback) 
{ 

     return this.each(function(){ 

     if($(this).get(0).tagName=='IMG'&&$(this).parent().get(0).tagName!='CANVAS') 
     { 
      //alert($(this).get(0).tagName); 
      $(this).load(function() 
      { 
       var c = $("<canvas class=' img2canvas'>"+$(this).outerHTML()+"</canvas>"); 
       //var c = $("<canvas></canvas>"); 
       $(c).attr('width', this.width); 
       $(c).attr('height', this.height); 
       var ctx = $(c)[0].getContext("2d"); 
       var img = new Image(); 
       img.src = $(this).attr('src'); 
       ctx.drawImage(img, 0, 0); 
       $(c).data('imgsrc', this.src); 
       $(c).attr('id', $(this).attr('id')+'_canvas'); 
       $(this).replaceWith($(c)); 
       callback(this); 
      }); 
     } 
    }); 
}; 

$('img').img2canvas(function(canvas){ 
    //... 
}); 

Il en est ainsi essentiellement la fonction anonyme passée sera appelé à chaque fois que l'image a été chargée et la toile a été créé