カテゴリー別アーカイブ: HTML5

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

今回はアップロード時のサムネイル表示です。
以前にも挑戦したことはあるんですが、当時はブラウザによって
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 人がこの 投稿 は役に立ったと言っています。

pjaxもどき

最近はいろんなところで良く「pjax」を使用したサイトを見るようになりました。
ただ「pjax」はプラグインであり、実際には 「ajax」と「pushState(HTML5)」を組み合わせたものの様です。
今回はpjaxもどきを試してみたいと思います。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            var state = '';

            function funcDispChange(pageData) {

                $.ajax({
                    type     : 'POST',
                    dataType : 'text',
                    url      : 'sample_958_' + pageData + '.txt'
                }).done(function(data) {
                    // ajax ok
                    history.pushState(state, '', 'sample_958_' + pageData + '.txt');
                    $("#main_area p").html(data);
                }).fail(function(data) {
                    // ajax error
                    $("#main_area p").html('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

            $(window).on('popstate', function(e) {
                state = e.originalEvent.state;
            });


        --></script>

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

            div {
                margin : 20px;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">
            <h1>Page Title</h1>

            <div id="header_area">
                <p>Head Area</p>
                <p>
                    <a href="javascript:void(0);" onclick="funcDispChange(1);">Click Link 1</a><br />
                    <a href="javascript:void(0);" onclick="funcDispChange(2);">Click Link 2</a><br />
                    <a href="javascript:void(0);" onclick="funcDispChange(3);">Click Link 3</a><br />
                </p>
            </div>

            <div id="main_area">
                <p>Main Area</p>
            </div>

            <div id="footer_area">
                <p>Foot Area</p>
            </div>

        </div>

    </body>
</html>

sample

sample では link を click するとページが変わります。
その際に URL は変更されており、ページもスムーズに入れ替わります。

実際のサイトを作成する時には pjax のプラグインを使用する形だと思います。
すでに複数の Plugin も作成されていますからね・・・

それでも今回の内容を自分でやってみるのは結構面白かったですね。
こういった内容をやるとWebサイトの進歩を感じます。
本当に HTML5 など凄いものですね。

jQuery はここからダウンロードしてください。

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

簡易カラーピッカー(HTML5版)

以前に簡易的なカラーピッカーを作ってみました。
今回は必要のためちょっと変更してみます。
具体的に言うと画像ファイルから行うカラーピッカーです。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var objCanvas = document.getElementById('canvas_area');
                var datContex = objCanvas.getContext('2d');
                var imgData = new Image();
                    imgData.src = './image_jpeg03.jpg';
                    imgData.onload = function() {
                        datContex.drawImage(imgData, 0, 0, imgData.width, imgData.height);
                    };

                var cnvOffset   = $(objCanvas).offset();
                var cnvX        = 0;
                var cnvY        = 0;
                var selectColor = {};
                var pixelColor  = [];
                var setRGBa     = '';

                $('#canvas_area').on('click', function(eObj) {

                    cnvX = Math.floor(eObj.pageX - cnvOffset.left);
                    cnvY = Math.floor(eObj.pageY - cnvOffset.top);

                    selectColor = datContex.getImageData(cnvX, cnvY, 1, 1);    // 1pxData
                    pixelColor  = selectColor.data;
                    setRGBa     = 'rgba(' + pixelColor[0] + ',' + pixelColor[1] + ',' + pixelColor[2] + ',' + pixelColor[3] + ')';
                    $('#color_disp').css('backgroundColor', setRGBa);

                });

            });

        --></script>

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

            #canvas_area {
                cursor           : crosshair;
            }

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #color_disp {
                height           : 150px;
                width            : 150px;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
           <div id="color_disp"></div>
        </div>
        <canvas id="canvas_area" width="740" height="350"></canvas>

    </body>
</html>

sample

sampleで表示されている画像をクリックすると、クリックした箇所の色が上部の色表示エリアに表示します。

今回は微妙に困りました。
canvas で使用している getImageData ですが、いつもの開発環境(chrome)で作成していると、
ローカルでは Error が発生するんですね・・・。原因がわからなかったんで暫く悩んでしましました。
結局 Server に Uplode してからチェックするといった面倒な作業で対応しましたが、
もうちょっと融通が利いてもいいと思うんですが・・・

今回のさらなる課題としては、色彩が豊かな画像の場合、Click したときにどの Pixel を選択したかが
わかりにくい点ですね。
click ではなく mousover の方が良いんでしょうか・・・
マウスの形状を即したものするか、margin, padding でそろえるか少し考えどころですね。

jQuery はここからダウンロードしてください。

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