DataURL Converter

Drag&Dropで画像をまとめてDataURLに変換する

by Tenderfeel

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
 <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">dataURL Converter</a>
        </div>
      </div>
    </div>
<div class="container">
<section id="options">
    <h2>Option</h2>
    <form class="well form-inline">
    <fieldset>
        
    <div class="control-group">
        <div class="controls">
            <label class="checkbox inline">
            <input type="checkbox"  id="reduce" name="reduce" value="" checked="checked">
            50%縮小
            </label>
            <label class="checkbox inline">
            <input type="checkbox"  id="sizeattr" name="sizeattr" value="" checked="checked">
            width, height属性
            </label>
        </div>
        <div class="controls">
            <label class="checkbox inline">
            <input type="checkbox"  id="filemetas" name="filemetas" value="" checked="checked">Result File Meta
            </label>
            <label class="checkbox inline">
            <input type="checkbox"  id="filesizes" name="filesizes" value="" checked="checked">Result File Size
            </label>
            <label class="checkbox inline">
            <input type="checkbox"  id="imagetag" name="imagetag" value="" checked="checked">Result Image Tag
            </label>
        </div>
    </div>
    <div class="row">        
     <div class="control-group span4">
        <label for="dirname" class="control-label">DirName</label>
        <div class="controls">
            <input type="text" id="dirname">
            <p class="help-block">
            ファイルパスのimgタグだけを生成する
            </p>
        </div>
      </div>
            <div class="control-group span4">
                <label for="classname" class="control-label">ClassName</label>
                <div class="controls">
                    <input type="text" id="classname">
          ...

CSS

html,body {
    width:100%;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    
}
.hover{
    border:solid 2px blue;
}

.wrapper {
    border-bottom:dashed 1px #ccc;
    position:relative;
}

.wrapper .preview {
    background:#efefef;
    margin-top:20px;
    border:solid 1px #ccc;
    -webkit-margin-top-collapse: separate;
    -moz-margin-top-collapse: separate;
    -ms-margin-top-collapse: separate;
    margin-top-collapse: separate;
}

.preview > img {
    margin:10px;
}

.wrapper .close {
    position:absolute;
    right:10px;
    top:10px;
}

#options {
    padding-top:60px;
}

footer{
    text-align:center;
}

JavaScript

Element.NativeEvents['drop'] = 2;
Element.NativeEvents['dragover'] = 2;
Element.NativeEvents['dragleave'] = 2;


var dataURL = new Class({
    Implements: [Options, Events],
    options: {
        reduce: true,
        sizeattr: true,
        filemetas:true,
        filesizes:true,
        imagetag:true,
        container: 'file-list'
    },
    initialize: function(options) {
        this.setOptions(options);
        this.files = [];
        this.container = $(this.options.container);
    },

    setOption: function(name, value) {
        this.options[name] = value;
    },

    //@param files {array} dataTransfer.files
    convert: function(files) {
        var self = this;
        this.files = [];
        if (typeOf(files) === 'collection') {
            this.container.empty();
            Object.each(files, function(file, key) {
                self.readFile(file, key);
                self.files.push(file);
            });
        } else {
            return false;
        }
    },

    //@param file {object} 
    readFile: function(file, key) {
        var reader = new FileReader();
        reader.key = key;
        reader.onload = this._fileLoadHandler.bind(this);
        reader.readAsDataURL(file);
    },

    _fileLoadHandler: function(e) {
        var reader = e.target;
        var file = this.files[reader.key];
        var key = reader.key;
        var dataurl = reader.result;

        var preview = new Element('img', {
            'src': dataurl,
            'data-key': key,
            'events': {
                'load': this._imgLoadHandler.bind(this)
            }
        });


        var wrapper = new Element('fieldset', {
            'class': 'wrapper form-inline',
            'id': 'result-' + key
        });
        
        this.wrapper = wrapper;

        var close = new Element('button', {
            'text': '×',
            'type': 'button',
            'class': 'close'
        });
        close.addEvent('click', function() {
           ...