WebP Converter

README

#WebP Converter

なんかよさげなコンバータがなかったのでJSで作ってみた。
Chrome限定だけど、そもそもWebP見れるブラウザ限定なので問題ないかな。

今のところ、WebPからPNGに変換して自動的にダウンロードが開始されます。

jsdoit.css

@import "compass/reset";

html, body {
    height: 100%;
}

body {
  background-color: #000;
  color: #fff;
}

#drop {
    $pad: 10px;
    position: absolute;
    top: $pad;
    bottom: $pad;
    left: $pad;
    right: $pad;
    color: #999;
    border: solid 3px #444;
    background: url(http://jsrun.it/assets/5/B/K/g/5BKg3.png) left top repeat;
    text-align: center;
    
    .title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .inner {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -10px;
        text-align: center;
    }
}

jsdoit.html

<div id="drop">
    <div class="inner">
        <p class="title">Drop WebP image here.</p>
        <p>This is a converter from WebP to PNG.</p>        
    </div>
</div>

<script>
(function () {
    'use strict';

    function onDrop(e) {
        var files = e.dataTransfer.files;

        var reader = new FileReader();
        reader.onload = function (f) {
            var fileContent = reader.result;
            var img = new Image();
            
            img.onload = function () {
                var conv = new WebPConverter(this, WebPConverter.imageType.PNG);
                conv.download();
            };
            
            img.src = fileContent;
        };
        reader.readAsDataURL(files[0]);
    }

    document.body.addEventListener('dragover', function (e) {
        e.preventDefault();
        return false;
    }, false);
    
    document.body.addEventListener('drop', function (e) {
        e.preventDefault();
        return false;
    }, false);
    
    var target = document.getElementById('drop');
    target.addEventListener('drop', onDrop, false);
    
}());
</script>

jsdoit.js

(function (win, doc, exports) {
    'use strict';

    /**
     * @class
     * @constructor
     * @param {Image} webp
     * @param {String} type
     * @param {String} filename
     */
    function WebPConverter(webp, type, filename) {
        this._init(webp, type, filename);
    }

    WebPConverter.imageType = {
        PNG: 'png',
        JPG: 'jpg',
        GIF: 'gif',
        WEBP: 'webp'
    };

    WebPConverter.prototype = {
        constructor: WebPConverter,
        
        /**
         * Initialize a constructor.
         * @param {Image} webp
         * @param {String} type
         * @param {String} filename
         */
        _init: function (webp, type, filename) {
            this._type = type || WebPConverter.imageType.PNG;
            this._mime = 'image/' + this._type;
            this._filename = filename || 'convertedfile';
            this._cv   = doc.createElement('canvas');
            this._ctx  = this._cv.getContext('2d');

            this._cv.width  = webp.width;
            this._cv.height = webp.height;
            this._webp = webp;
            this._ctx.drawImage(webp, 0, 0);
        },

        convert: function () {
            var dataURI = this._cv.toDataURL('image/' + this._mime);

            var tmp = dataURI.split(',');
            var data = atob(tmp[1]);
            var buff = new ArrayBuffer(data.length);
            var arr = new Uint8Array(buff);

            for (var i = 0, l = data.length; i < l; i++) {
                arr[i] = data.charCodeAt(i);
            }

            return new Blob([arr], {type: this._mime});
        },

        download: function () {
            var blob = this.convert();
            var url = URL.createObjectURL(blob);
            var a = document.createElement('a');
            
            a.href = url;
            a.download = this._filename + '.' + this._type;
            
            var evt = document.createEvent('MouseEvent');
            evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(evt);

            blob = null;
            evt  = null;
            a    = null;
        },

        dispose: function () {
            this._cv   = null;
            this._ctx  = null;
            this._webp = null;
        }
    };

    /*! -------------------------------------------
        EXPORTS
    ----------------------------------------------- */
    exports.WebPConverter = WebPConverter;

}(window, document, window));