Agregar imagen desde una url

ver ejemplo

POST /image/add HTTP/1.1
Host: static.loadingplay.com
Content-Type: application/json; charset=utf-8
url=[url a la foto encodeada]&name=[nombre de la imagen]

{
    "id"        : "fd8e76836893ccfa44c6805d63ee18e3",
    "url"       : "[url a imagen original]",
    "name"      : "fd8e76836893ccfa44c6805d63ee18e3_test.png",
    "image"     : "/static/images/fd8e76836893ccfa44c6805d63ee18e3_test.png",
    "thumb_1"   : "/static/images/1_fd8e76836893ccfa44c6805d63ee18e3_test.png",
    "thumb_200" : "/static/images/200_fd8e76836893ccfa44c6805d63ee18e3_test.png",
    "thumb_500" : "/static/images/500_fd8e76836893ccfa44c6805d63ee18e3_test.png",
}

error:

POST /image/add HTTP/1.1
Host: static.loadingplay.com
Content-Type: application/json; charset=utf-8
url=&name=

{
    "error": 
    {
        "message"   : "image can't be loaded", 
        "code"      : 100, 
        "type"      : ""
    }
}

Agregar imagen a través de post request

POST /image/upload HTTP/1.1
Host: static.loadingplay.com
name=[nombre de la imagen]&extension=[extension utilizada]&data=[cuerpo de la imagen en base64]

{
    "id"        : "fd8e76836893ccfa44c6805d63ee18e3",
    "url"       : "[url a imagen original]",
    "name"      : "fd8e76836893ccfa44c6805d63ee18e3_test.png",
    "image"     : "/static/images/fd8e76836893ccfa44c6805d63ee18e3_test.png",
    "thumb_1"   : "/static/images/1_fd8e76836893ccfa44c6805d63ee18e3_test.png",
    "thumb_200" : "/static/images/200_fd8e76836893ccfa44c6805d63ee18e3_test.png",
    "thumb_500" : "/static/images/500_fd8e76836893ccfa44c6805d63ee18e3_test.png",
}

error:

POST /image/upload HTTP/1.1
Host: static.loadingplay.com
Content-Type: application/json; charset=utf-8
name=&extension=&data=

{
    "error": 
    {
        "message"   : "image can't be loaded", 
        "code"      : 100, 
        "type"      : ""
    }
}

Cargar imagen en 2 pasos

ver ejemplo

para incluir el plugin se debe agregar lo siguiente antes de la etiqueta </body>

<script type="text/javascript" src="/static/js/lp.preload.image.js" ></script>
<script>
    $(document).ready(function()
    {
        $( "img" ).preload_image();
    });
</script>

código html

<img class="image-fixed-width" src="[url a imagen pequeña]" lp-load-big="[url a imagen grande]" />

archivo lp.preload.image.js

(function($) {

    $.fn.preload_image = function() {

        $(this).each(function()
        {
            var image_src = $(this).attr( "lp-load-big" );
            var _img = $(this);

            var newImg = new Image;

            newImg.onload = function() 
            {
                var new_src = this.src;

                // fadeout animation 
                _img.fadeOut( 250, function()
                {
                    _img.attr("src", new_src);

                    // fadein animation
                    _img.fadeIn( 250, function()
                    {
                        // nothing here
                    });
                });
            }
            newImg.src = image_src;
        });
    };

})(jQuery);