перенести img на холст (с плагином jquery), как продолжить работу с холстом?

Question

я написал хороший плагин, который превращает IMG в canvas

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));
            });
        }
     });


    };

пока все хорошо.но я никак не могу продолжать работать с этим холстом.

$('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

не помогает.

что мне нужно сделать, чтобы сохранить архитектуру плагина и продолжать работатьэлементы холста?Вы можете увидеть живое демо здесь http://www.andcontext.com/inimad/sto_demo.php

thx для вашего ввода.

Answer 1

Попробуйте назначить функцию обратного вызова для запуска, когда изображение загружено

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){
    //...
});

Это так, в основном переданная анонимная функция будет вызываться каждый раз, когда изображение загружается и холст создается