Canvas > 画像処理 > 線形フィルタ

線形フィルタ - linear filter 変換後のピクセルを変換前のピクセルの近傍を元に計算する。 近傍からの計算を積和を使うものを線形フィルタ。

by s_hiroshi

HTML

<h1>Photo</h1>
<div id="tool-container">
    <div id="drop">File Drop Area</div>
    <div class="panel">
        オリジナル画像の情報<br>
        横のサイズ: <input id="org-width" type="text" size="5" disabled="disabled">&nbsp;
        縦のサイズ: <input id="org-height" type="text" size="5" disabled="disabled">
    </div><!-- /panel -->
    <div class="panel">         
        <button id="linerfilter">線形フィルタ</button>
    </div><!-- /panel -->    
</div><!-- /tool-container -->
<div id="image-container">
    <div id="original">
        <h3>オリジナル画像</h3>
    </div>
    <div id="canvas-container">
        <h3>編集後の画像</h3>
    </div>
</div>

CSS

@charset "utf-8";
/**
 * Copyright 2012 Sawai Hiroshi
 * http://www.info-town.jp
 *
 */

/**
font size
10    77
11    85
12    93 (was 93)
13    100
14    108 (was 107)
15    116 (was 114)
16    123.1 (was 122)
17    131 (was 129)
18    138.5 (was 136)
19    146.5 (was 144)
20    153.9 (was 152)
21    161.6 (was 159)
22    167
23    174
24    182
25    189
26    197
*/

/* -------------------------------------------------------------------
body
 ------------------------------------------------------------------- */
body {
    line-height: 1.5;
}
button {
    width: 140px;
}
/* -------------------------------------------------------------------
tool area
 ------------------------------------------------------------------- */
#tool-container {
    float: left;
    width: 28%;
    padding: 3px;
    margin-bottom: 10px;
    background: #DDD;
    border: 1px solid #BBB;
}
.panel {
    padding: 8px;
    margin: 3px;
    background: #EFEFEF;
}
#org-width, #org-height {
    background: #F4F4F4;
}
#drop {
    height: 100px;
    padding: 15px 8px;
    margin-bottom: 10px;
    background: #EFEFEF;
    border: 5px dotted #DDD;
}
/* -------------------------------------------------------------------
image area
 ------------------------------------------------------------------- */
#image-container {
    overflow: hidden;
    float: right;
    width: 70%;
}
#image-container h3 {
    margin: 10px;
}
#original {
    float: left;
    width: 45%;
    position: relative;
    overflow: auto;
}
#rectangle {
    z-index: 2;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border: 5px solid #999;
}
#canvas-container {
    overflow: auto;
    width: 45%;
    float: right;
}

JavaScript

var photoeditor = {};

(function() {

    var image, canvas, cxt;


    /**
     * exception
     */

    function appError(error) {
        alert(error.message);
    }


    /**
     * file open when file drag canvas
     *
     * drag handler
     * cancel default browser event
     */
    $('#drop').get(0).ondragover = function(event) {
        return false;
    };

    // drop handler
    // read file when file drag&drop to canvas
    $('#drop').get(0).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)) {
            appError({
                message: 'file type error when file drag open'
            });
            return false;
        }

        reader = new FileReader();

        reader.onload = function() {
            if ($(image).length === 0) {
                image = document.createElement('img');
                image.draggable = false;
                $('#original').append(image);
            }
            image.setAttribute('src', reader.result);
            image.onload = function() {
                try {
                    $('#org-width').val(image.width);
                    $('#org-height').val(image.height);
                } catch (e) {
                    appError({
                        message: 'error when load image'
                    });
                }
            };

        };
        // read image file
        reader.readAsDataURL(file);
        return false;
    };


    /**
     * liner filtering. sharpen
     */
    $('#linerfilter').click(function() {
        var i, j, k, l, m, n,
            filter = [];

        if ($(image).length === 0) {
            appError({
                message: 'not original image. drop original file'
            });
            return false;
        }

        if ($('canvas').length === 0) {
           ...