社員ブログ
HOME  社員ブログ

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, 社員:ピーター

エクスプレス交換サービスが便利だった

2015年06月20日 11時23分40秒

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

僕がiPhone 5sを使い始めて1年9ヶ月経つのですが、1年経った頃から電池の減りが早くなりました。最近ようやく電池交換をしようと思い、調べたところ、auのApple保証延長サービスに入っていたので、Apple Storeに持ち込めば無料で電池交換できることがわかりました。

まずは問い合わせしてみました。
iPhoneをオンラインでチェックしたところ、電池に異常はなく、電池交換はできないとのことでした。

電池の減りが早いのをなんとかしたいと伝えたところ、エクスプレス交換サービスで新品同様の同じモデル、同じ色のものと交換してもらえることになりました。ヤマトの方が新しいiPhoneを自宅に持ってきてくれ、今まで使っていたiPhoneと交換します。iPhoneが手元から離れることがないのでとても便利です。Apple保証延長サービスに入っていたのでこれも無料でした。

事前にiPhoneのバックアップを取っておき、新しいiPhoneと交換する際に今まで使っていたiPhoneからSIMカードを抜いて新しいiPhoneに差して、バックアップから復元という流れです。SIMカードを抜くピンは新しいiPhoneに同梱されていました。

新しいiPhoneは申し込んだ翌日に届きました。
もっと早くやっておけばよかったです。


社員:ピーター, 雑記

Windows標準キャプチャソフト 「Snipping Tool」

2015年06月6日 11時15分33秒

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

Windowsに標準であったんですね、画面の一部をキャプチャするソフト。

すべてのプログラム > アクセサリ > Snipping Tool

画面の一部をキャプチャし、画像を保存または共有、あるいは画像にコメントを追加することができます。

無題

キャプチャしたらクリップボードにコピーされてるのもいいですね。


Windows, 社員:ピーター