アップロード時のサムネイル表示

今回はアップロード時のサムネイル表示です。
以前にも挑戦したことはあるんですが、当時はブラウザによって
HTML5 に対応していないものもあり ajax と PHP での処理を行い
それなりに手間がかかった覚えがあります。

別のプロジェクトにて同僚が使っているのを見て、ちょっと感動した
ため備忘録として記載します。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                // Image Get
                $('#uploadFile').change( function( eObj ) {

                    var objFile = eObj.target.files && eObj.target.files[0];
                    if (objFile != null) {
                        var fReader = new FileReader();
                            fReader.onload = onImageLoad;
                            fReader.readAsDataURL(objFile);
                    }

                });

                // Image Load
                var maxThumWidth = 250;
                var objCanvas = document.getElementById('viewThumbnail');
                function onImageLoad( eObj ) {

                    // Work Image
                    var objImage  = document.createElement('img');
                    objImage.src  = eObj.target.result;
                    var ImgRate   = ( objImage.naturalWidth  / maxThumWidth );
                    var ImgWidth  = ( objImage.naturalWidth  / ImgRate );
                    var ImgHeight = ( objImage.naturalHeight / ImgRate );

                    // Canvas drawImage
                    objCanvas.width  = ImgWidth;
                    objCanvas.height = ImgHeight;
                    objCanvas.getContext('2d').clearRect(0, 0, ImgWidth, ImgHeight);
                    objCanvas.getContext('2d').drawImage(objImage, 0, 0, ImgWidth, ImgHeight);

                }

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin     : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="input_area">
                <input type="file" id="uploadFile">
            </div>
            <div id="view_area">
                <canvas id="viewThumbnail"></canvas>
            </div>

        </div>
    </body>
</html>

sample

sample を開くと File の Upload ボタンがあります。
該当の input に対して画像を Upload することで対象画像のサムネイルが表示されます。

正直 jQuery はほとんど使用していません(笑)
html5 と Javascript が基本ですね。

今後は HTML5 が使えない環境もあまり考慮する必要はなくなります。
お客様よりの要望としては、結構多い機能です。
今後は上記の方法にて対応できるようにして行きたいですね。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です