JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<img src="http://darcyclarke.me/work/fi/uploads/images/placeholders/1.jpg">

JavaScript

$.fn.imagesLoaded=function(a,b){var c=arguments,d=this.filter("img"),e=d.length-1;d.bind("load",function(c){if(b){!(e--)&&a.call(d,c)}else{a.call(this,c)}}).each(function(){if(this.complete||this.complete===undefined){this.src=this.src}})}

    $(function(){
        $("img").each(function(i, el){
            el = $(this);
            console.log(el);
            el.imagesLoaded(function(){
                console.log("loaded");
                var canvas = document.createElement("canvas");
                canvas.width = this.width;
                canvas.height = this.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0);
                var data = canvas.toDataURL("image/jpg");
                el.attr('src',data);
                console.log(data);
            });
        });
    });