Client-side Image (JPG, PNG, BMP) Converter – ImageConverter

An easy and convenient image converter that allows the user to convert image file formats (png, jpg, and bmp) on the client-side.

Dependencies:

• FileSaver.js: HTML5 Save As library.
• JSZip: JavaScript class for generating and reading zip files

How to use it:

1. Load the necessary JavaScript files in the document.

<script src="jszip.min.js"></script>
<script src="FileSaver.min.js"></script>

2. Build the HTML for the image converter.

<select id="exampleFormControlSelect1">
   <option>JPEG</option>
   <option>PNG</option>
   <option>BMP</option>
</select>
<select class="form-control" id="exampleFormControlSelect2">
   <option>PNG</option>
   <option>JPEG</option>
   <option>BMP</option>
</select>
<input type="file" class="file-upload-wrapper" accept="image/*" id="images" type="file" name="pwd" multiple>
<input class="form-check-input" id="tozip" type="checkbox"> Zip files
<button type="button" onclick="convert()">Convert</button>
<div class="jumbotron" id="dropzone" style="text-align:left;">
  <h2>Convert png to jpg online!</h2>
</div>

3. The main JavaScript to enable the image converter.

var droppedFiles = false;
var drop = document.getElementById("dropzone");
var tostop = ["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"];
for (var i in tostop) {
    drop.addEventListener(tostop[i], function(e) {
        e.preventDefault();
        e.stopPropagation();
        e.originalEvent = e;
    });
}
tostop = ["dragover", "dragenter"];
for (var i in tostop) {
    drop.addEventListener(tostop[i], function(e) {
        document.getElementById("dropzone").classList.add("bg-light");
    });
}
tostop = ["dragleave", "dragend", "drop"];
for (var i in tostop) {
    drop.addEventListener(tostop[i], function(e) {
        document.getElementById("dropzone").classList.remove("bg-light");
    });
}
drop.addEventListener("drop", function(e) {
    console.log(e);
    document.getElementById("images").files = e.originalEvent.dataTransfer.files
});
window.convertto = 'png';
window.zip = null;
var JpgToPngConvertor = function() {
    function convertor(imageFileBlob, options) {
        options = options || {};
        const defaults = {
            downloadLinkSelector: '.js-download-' + window.convertto
        };
        const settings = extend(defaults, options);
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext("2d");
        const imageEl = createImage();
        const downloadLink = settings.downloadEl || createDownloadLink();
        function createImage(options) {
            options = options || {};
            const img = (Image) ? new Image() : document.createElement('img');
            const parent = options.parentEl || document.body;
            img.style.width = (options.width) ? options.width + 'px' : 'auto';
            img.style.height = (options.height) ? options.height + 'px' : 'auto';
            return img;
        }
        function extend(target, source) {
            for (let propName in source) {
                if (source.hasOwnProperty(propName)) {
                    target[propName] = source[propName];
                }
            }
            return target;
        }
        function createDownloadLink() {
            return document.createElement('a');
        }
        function isFirefox() {
            return navigator.userAgent.indexOf("Firefox") > -1;
        }
        function download(blob) {
            // Add download link to DOM in case it is not there and on the firefox
            if (!window.zip) {
                if (!document.contains(downloadLink) && isFirefox()) {
                    downloadLink.style.display = 'none';
                    document.body.appendChild(downloadLink);
                }
                if ('click' in downloadLink) {
                    downloadLink.click();
                } else {
                    downloadLink.dispatchEvent(createClickEvent());
                }
            } else {
                zip.file(document.getElementById("images").files[converted].name.substring(0, document.getElementById("images").files[converted].name.indexOf(".")) + "." + window.convertto, blob);
                converted++;
                if (converted == document.getElementById("images").files.length) {
                    zip.generateAsync({
                        type: "blob"
                    }).then(function(content) {
                        saveAs(content, "images.zip");
                    });
                }
            }
        }
        function updateDownloadLink(jpgFileName, pngBlob) {
            console.log(jpgFileName);
            const linkEl = downloadLink;
            var pngFileName = "";
            if (document.getElementById("exampleFormControlSelect1").value.toLowerCase() == 'jpeg') {
                pngFileName = jpgFileName.replace(/jpe?g/i, window.convertto);
            } else {
                pngFileName = jpgFileName.replace(document.getElementById("exampleFormControlSelect1").value.toLowerCase(), window.convertto);
            }
            linkEl.setAttribute('download', pngFileName);
            linkEl.href = window.URL.createObjectURL(pngBlob);
            console.log(pngBlob);
            // If there is custom download link we don't download automatically
            if (settings.downloadEl) {
                settings.downloadEl.style.display = 'block';
            } else {
                download(pngBlob);
            }
        }
        function createClickEvent() {
            if ('MouseEvent' in window) {
                return new MouseEvent('click');
            } else {
                const evt = document.createEvent("MouseEvents");
                evt.initMouseEvent("click", true, true, window);
                return evt;
            }
        }
        function process() {
            const imageUrl = window.URL.createObjectURL(imageFileBlob);
            imageEl.onload = (e) => {
                canvas.width = e.target.width;
                canvas.height = e.target.height;
                ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height);
                console.log('image/' + window.convertto);
                canvas.toBlob(updateDownloadLink.bind(window, imageFileBlob.name), 'image/' + window.convertto, 1);
            };
            imageEl.src = imageUrl;
            if (settings.downloadEl) {
                settings.downloadEl.style.display = 'none';
            }
        }
        return {
            process: process
        };
    }
    return convertor;
}
var conv = new JpgToPngConvertor();
var converted = 0;
window.convert = function() {
    converted = 0;
    window.convertto = document.getElementById("exampleFormControlSelect2").value.toLowerCase();
    console.log(window.convertto);
    if (!document.getElementById("tozip").checked) {
        window.zip = null;
        for (var i = 0; i < document.getElementById("images").files.length; i++) {
            conv(document.getElementById("images").files[i]).process();
        }
    } else {
        window.zip = new JSZip();
        for (var i = 0; i < document.getElementById("images").files.length; i++) {
            conv(document.getElementById("images").files[i]).process(zip);
        }
    }
}