HTML5で簡単なフォトエディターを作成 : JavaScript

Tweet

Pocket

canvasを使った簡単な画像エディターを作成。機能はリサイズのみ(リサイズの方法に誤りがある。最新の記事を下記に掲載。

» canvas画像をリサイズ : JavaScript

新しいエントリー
» HTML5で簡単なフォトエディターを作成 : JavaScript

» jsFiddle

<h1>PhotoEditor</h1>

<div id="view"><canvas id="canvas" width="240" height="200"></canvas></div>

<div id="tool">
    
        WIDTH:  <input type="text" id="width" size="5"><br />
        HEIGHT: <input type="text" id="height" size="5"><br />
        <button id="resize" disabled="disabled">RESIZE</button>
    
    <button id="clear" disabled="disabled" size="5">CLEAR</button>
</div>

<h1>view {</h1>

<pre><code>margin-right: 20px;
float: left;
width: 320px;
height: 240px;
background: #EEE;
border: 3px dotted #DDD;
</code></pre>

}

/**
 * photoeditor - v0.0.1 beta - 2012-04-30
 * http://www.info-town.jp
 *
 * Copyright (c) 2012 Sawai Hiroshi
 */

// 下記のサイトを参考にしている。
// http://www.programmingmat.jp/webhtml_lab/canvas_image.html

// photoeditor aplication top level object
var photoeditor = {};

(function() {

<pre><code>var view = $('#view').get(0),
    canvas = $('#canvas').get(0),
    clear = $('#clear').get(0),
    context = canvas.getContext('2d');

photoeditor.image = new Image();


/**
 * file open
 */
// drag event handler
view.ondragover = function(event) {
    event.preventDefault();
};

// read file and display image data to canvas
view.ondrop = function(event) {
    var file, reader;

    if (!event.dataTransfer.files.length) {
        return false;
    }

    file = event.dataTransfer.files[0];
    if (!/^image/(png|jpeg|gif)$/.test(file.type)) {
        return false;
    }

    reader = new FileReader();
    reader.onload = function() {
        photoeditor.image.onload = function() {
            context.drawImage(photoeditor.image, 0, 0); // set image data to canvas
        };
        photoeditor.image.src = reader.result;
    };
    reader.readAsDataURL(file); // read image
    event.preventDefault();
};


/**
 * image edit
 */
// button active if Canvas and ImageData is usable
if (canvas.getContext &amp;&amp; canvas.getContext('2d').createImageData) {
    $('#clear').removeAttr('disabled');
    $('#resize').removeAttr('disabled');

    context = canvas.getContext('2d');
}

function _clear() {
    context.clearRect(0, 0, $(view).width(), $(view).height());
}

// clear canvas
(function() {
    $(clear).click(_clear);
}());

// resize
(function() {
    $('#resize').click(function() {
        var width = $('#width').val(),
            height = $('#height').val();
        _clear();
        context.drawImage(photoeditor.image, 0, 0, width, height);
    });
}());
</code></pre>

}());