previously canvasFromImage

image2canvas.js

var image2canvas = (function ( global, document, undefined )
{
    // parseUri 1.2.2
    // (c) Steven Levithan <stevenlevithan.com>
    // MIT License
    function parseUri (str)
    {
        var o   = parseUri.options,
            m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
            uri = {},
            i   = 14;

        while (i--) uri[o.key[i]] = m[i] || "";

        uri[o.q.name] = {};
        uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
            if ($1) uri[o.q.name][$1] = $2;
        });

        return uri;
    };

    parseUri.options = {
        strictMode: false,
        key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
        q:   {
            name:   "queryKey",
            parser: /(?:^|&)([^&=]*)=?([^&]*)/g
        },
        parser: {
            strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
            loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
        }
    };

    var hasSameOrigin = (function ( global, document )
    {
        var local = parseUri(document.location.href),
            closure = function ( remote_url )
            {
                var remote = parseUri(remote_url),
                    local_origin = local.protocol +'//'+ local.authority,
                    remote_origin = remote.protocol +'//'+ remote.authority,
                    is_relative = (! remote.authority) && remote.relative,
                    is_data = (remote.protocol === 'data'),
                    is_local = is_data || is_relative,
                    is_same = local_origin === remote_origin;

                return is_local || is_same;
            };

        return closure;

    })( global, document );

    function url2data( img_url, onLoad, onError )
    {
        var cb = function (o)
            {
                var results = o.query.results;
                if (results.error){ onError( results.error ); }
                if (results.url){ onLoad( results.url ); }
            },
            cb_stack_name = "url2data_callbacks",
            cb_stack = cb_stack_name in global ? global[cb_stack_name] : global[cb_stack_name] = [],
            cb_name = cb_stack_name +'['+ cb_stack.length +']',
            service_root = '//query.yahooapis.com/v1/public/yql',
            query = 'select * from data.uri where url="'+ img_url +'"',
            service_url = service_root + "?q=" +escape(query) + "&format=json&callback=" + cb_name,
            script = document.createElement('script');

            cb_stack.push( cb );
            script.onerror = onError;
            script.src = service_url;
            document.body.appendChild(script);
    };

    function loadImage( img, onLoad, onError )
    {
        var onImageLoaded = function( e ){ onLoad( e.target ); },
            onDataLoaded = function ( obj )
            {
                img.addEventListener( 'load', onImageLoaded, false );
                img.src = obj.data;
            };

        if ( !hasSameOrigin( img.src ) ) {
            url2data( img.src, onDataLoaded, onError );
        } else {
            img.complete
                ? onLoad( img )
                : img.addEventListener( 'load', onImageLoaded, false );
        }
    }

    function image2canvas( img, onCanvasReady, onImageLoaded, onImageError )
    {
        onImageLoaded = onImageLoaded || function ( img )
        {
            var canvas = document.createElement('canvas'),
                ctx = canvas.getContext('2d');

            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage( img, 0, 0 );
            onCanvasReady( canvas, img );
        };

        loadImage( img, onImageLoaded, onImageError );
    }

    return image2canvas;

})(window, document);