Drawing in canvas from base 64 image as source

Question

I'm using cropping plugin from http://deepliquid.com/content/Jcrop.html to select an image area. When working with a common URL src image, the cropping preview works. When the src is a base 64 string, it doesn't. Been Googling about possible reasons, but no luck. Code looks like this:

function updatePreview(c) 
{
    if(parseInt(c.w) > 0) 
    {
        var img = new Image,
        src = $('.jcrop-holder img').attr('src'),
        cvs = document.getElementById('preview'),
        ctx = cvs.getContext('2d');
        img.crossOrigin = "Anonymous";
        img.onload = function() 
        {
            console.log('Onload event fired!');
            var ctx = cvs.getContext("2d");
            ctx.drawImage(img, c.x, c.y, c.w, c.h, 0, 0, cvs.width, cvs.height);    
            var dataURL = cvs.toDataURL();
            new_image = dataURL;    
        }
        img.src = src;
        if ( img.complete || img.complete === undefined ) 
        {
            console.log('Undefined!');
            img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
            img.src = src;
        }

    }
};

Also, when I start dragging the area selector, with the code64 image it suffers from certain delay.

Answer 1

The base 64 I have comes from another canvas, I have found here: Display canvas image from one canvas to another canvas using base64 that the best option is to use the originary canvas as source for the drawimage(). The problem is still the performance, but I will write another question more specific.