社員ブログ
HOME  社員ブログ

アーカイブ

‘JavaScript’ カテゴリ

JavaScriptで画像フォーマット変換と縮小

2015年07月27日 12時15分41秒

こんにちは、ピーターです。

JavaScriptで画像フォーマットの変換と、幅と高さを縮小する必要があったので調べてみました。
今はJavaScriptだけで簡単にできるんですね。
備忘録としてサンプルを作成しました。
このソースだけで試せますのでよかったら試してみてください。
最近は脱jQueryを目指しています。

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title>JavaScriptで画像フォーマット変換と縮小</title>
</head>
<body>
    <form>
        <span id="file-wrapper">
            <input type="file" multiple id="file">
        </span>
        <table>
            <tr>
                <td>縮小率</td>
                <td>
                    <select id="scale">
                        <option>1.0</option>
                        <option>0.5</option>
                        <option>0.25</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>画像フォーマット</td>
                <td>
                    <select id="format">
                        <option value="image/jpeg">JPEG</option>
                        <option value="image/png">PNG</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>品質 (JPEGのみ)</td>
                <td>
                    <select id="quality">
                        <option>1.0</option>
                        <option>0.5</option>
                        <option>0.25</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>

    <!-- ここに画像を表示 -->
    <ol id="images"></ol>

    <script>
        (function($) {
            var fileWrapper = $('file-wrapper');
            var fileSelecter;
            var scaleSelecter = $('scale');
            var formatSelecter = $('format');
            var qualitySelecter = $('quality');
            var images = $('images');

            var fileChangehandler = function () {
                var files = this.files;

                for (var i = 0, n = files.length; i < n; i++) {
                    var reader = new FileReader();

                    reader.onload = function () {
                        var image = new Image();

                        image.onload = function () {
                            image.onload = undefined;

                            // canvasを生成
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');

                            // drawImageでcanvasに画像が描画される。
                            // drawImageの第三引数と第四引数を指定すると
                            // そのサイズに画像が拡大・縮小される。
                            // その場合、拡大・縮小後のサイズと
                            // canvasのサイズを合わせておく必要がある
                            var scale = parseFloat(scaleSelecter.value);
                            canvas.width = image.width * scale;
                            canvas.height = image.height * scale;
                            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

                            // toDataURLの第一引数に変換後の画像フォーマットを指定
                            // jpegの場合、第二引数に品質レベルを0.0から1.0の間で指定可能
                            var quality = parseFloat(qualitySelecter.value);
                            image.src = canvas.toDataURL(formatSelecter.value, quality);

                            var li = document.createElement('li');
                            li.appendChild(image);
                            images.appendChild(li);
                        };

                        image.src = this.result;
                    };

                    reader.readAsDataURL(files[i]);
                }

                resetFileSelecter();
            };

            var resetFileSelecter = function () {
                fileWrapper.innerHTML = fileWrapper.innerHTML;
                fileSelecter = $('file');
                fileSelecter.onchange = fileChangehandler;
            };

            resetFileSelecter();

        })(function (id) {return document.getElementById(id);});
    </script>
</body>
</html>

JavaScript, 社員:ピーター

画像選択ライブラリ iconselect.js

2015年04月12日 15時51分54秒

こんにちは、ピーターです。

htmlのセレクトボックスのような感じで画像を選択したいという話になり、探してみるとiconselect.jsが見つかりました。

スクリーンショット 2015-04-12 14.48.28

しかし、作成中のコードに組み込むと見た目が崩れてしまいます。

 スクリーンショット 2015-04-12 14.48.41

サンプルコードと何が違うのか調べた結果、 <!DOCTYPE html> の有無でした。
サンプルコードには <!DOCTYPE html> がありません。

これはめんどくさそうなバグだなと思い、他のライブラリを使おうかとも思ったのですが、見た目はiconselect.jsが一番気に入っていました。

よくよく見ると、幅と高さの指定が効いていないことに気づきました。
コードを追ってみると、JavaScriptで style.width などに数値を指定していますが、’px’などの単位も必要だった気がしたので’px’を付けてみると直りました。

最終的にiconselect.js内の

style.width = …
style.height = …
style.top = …
style.left = …
style.bottom = …
style.marginLeft = …
style.marginTop = …

といった箇所すべてを

style.width = … + ‘px’;

のように修正して直りました。


JavaScript, 社員:ピーター

javascript 文字列からURLを抽出しAタグを張る関数。

2015年02月26日 11時49分50秒

こんにちは、コブラです。

 

文字列に対して、httpなどで始まる部分を抽出し、Aタグを張る処理をJsで実装しようと思いググったところ、

非常に便利な関数を見つけました。

 

 

function AutoLink(str) {
    var regexp_url = /((h?)(ttps?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+))/g; // ']))/;
    var regexp_makeLink = function(all, url, h, href) {
        return '<a href="h' + href + '">' + url + '</a>';
    }

    return str.replace(regexp_url, regexp_makeLink);
}

 

 

こちらを参考にさせていただきました。

[読み物][prog] 文字列中のURLを探してリンクにするJavaScript – NEST::laboratory様

 

ありがとうございます!


JavaScript, 社員:cobra