Question

i wrote a nice plugin which transforms IMG to 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));
            });
        }
     });


    };

so far so good. but there is no way i can continue working with these canvas.

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

does not help.

what do i need to do to keep the plugin architecture and being able to continue working on the canvas elements? you can see a live demo here http://www.andcontext.com/inimad/sto_demo.php

thx for your input.

Answer 1

Try assign a callback feature to run when the Image has loaded

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

This is so basically the anonymous function passed in will be called each time the image has loaded and the canvas has been created