JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<script src="https://raw.github.com/blueimp/JavaScript-Canvas-to-Blob/master/canvas-to-blob.min.js"></script>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Inocybe_saliceticola.jpg/133px-Inocybe_saliceticola.jpg">
<img/>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/00/The_bombed_out_St_Luke%27s_Church_-_geograph.org.uk_-_1206139.jpg/100px-The_bombed_out_St_Luke%27s_Church_-_geograph.org.uk_-_1206139.jpg">
<img/>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Stpetes.JPG/100px-Stpetes.JPG">
<img/>
<canvas id="myCanvas" width="578" height="200"></canvas>

JavaScript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global console, Blob, FileReader, FileWriter, FileError */

(function (global) {
    "use strict";


    var images = document.getElementsByTagName("img");

    function whenLoaded() {
        var canvas = document.getElementById('myCanvas');
        
        canvas.toBlob(function (blob) {
            var newImg = document.createElement("img"),
                url = URL.createObjectURL(blob);
            
            newImg.onload = function () {
                // no longer need to read the blob so it's revoked
                URL.revokeObjectURL(url);
            };
            
            newImg.src = url;
            document.body.appendChild(newImg);
        });
    }

    function loadCanvas(dataURL) {
        var canvas = document.getElementById('myCanvas'),
            context = canvas.getContext('2d'),
            imageObj = new Image();

        imageObj.onload = function () {
            context.drawImage(this, 0, 0);
            whenLoaded();
        };

        imageObj.src = dataURL;
    }

    Array.prototype.forEach.call(images, function (image) {
        var temp,
        name,
        type;

        if (image.src.length > 0) {
            temp = image.src.slice(image.src.lastIndexOf("/") + 1).split(".");
            name = temp[0];
            type = temp[1];
            console.log(name);
            loadCanvas(image.src, name, type);
        }
    });
}(window));