JavaScript｜VB.NET-TIPS などプログラミングについて

■JavaScript

[2025/01/18] [PR] (No.)
[2019/12/06] JavaScript jQueryで password 入力を見える様にする方法 (No.144)
[2019/11/19] JavaScript jQueryでFileReaderを使いcanvasに画像ファイルを表示する方法 (No.139)
[2019/11/16] JavaScript jQueryでcanvasを使い画像ファイルを表示する方法 (No.138)
[2019/11/16] JavaScript jQueryでcanvasを使い図形を描画する方法 (No.137)
[2019/08/28] JavaScript 数値の小数点以下の丸め処理(Math.floor, Math.round, Math.ceil) (No.117)

≪ [7] [8] [9] [10] [11] [12] [13] [14] [15] ≫

- 2025/01/18
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM
- 2019/12/06
JavaScript jQueryで password 入力を見える様にする方法
HTML で用意されているパスワード入力に input type="password" があるのですが、この入力では通常入力内容が ●●●●… と表示されます。

これを見える様にしたいと思います。
よくあるのはパスワード入力の下にチェックボックスを設置し、チェックされていない時は通常で、チェックされた場合に内容を表示させるやり方です。

方法はパスワード入力の type 属性を password から text に変更します。これで input がパスワード入力から普通のテキスト入力に変わり、入力内容が見えることになります。

■チェックボックスの変化時にパスワード入力を可視化

<html> <head> <meta charset="utf-8"> <title>test canvas</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function() { //チェックボックスの変化時関数 $("#password-check").change(function() { if ($(this).prop("checked")) { //チェックONの場合 $("#password-test").attr("type","text"); } else { //チェックOFFの場合 $("#password-test").attr("type","password"); } }); }); </script> </head> <body> <h2>test password</h2> <input type="password" id="password-test" name="Password" value="" placeholder="パスワード入力" /><br /> <label>パスワードを表示する<input type="checkbox" id="password-check" /></label> </body> </html>

以下のパスワード入力に文字を入れてみて下さい。その後で、チェックボックスをON／OFFすることでパスワードの中身が見えると思います。

パスワードを表示する
PR
- JavaScript
- 0CM

2019/11/19

JavaScript jQueryでFileReaderを使いcanvasに画像ファイルを表示する方法

FileReader オブジェクトを使うと、ローカルなコンピューター内にある画像ファイルをウェブアプリケーションから非同期的に読み込むことが出来ます。今回はこの FileReader を使って canvas に画像ファイルを描画する方法について説明します。尚、画像ファイルの指定は input タグで type="file" とします。

処理の手順は以下の通りです

FileReader を生成画像の描画
FileReader の readAsDataURL メソッドでファイル読込
FileReader の onload イベントで canvas への画像表示関数の実行

■FileReaderを使いcanvasに画像ファイルを表示

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage(imageFile) {
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    //イメージオブジェクト
    var img1 = new Image();
    //画像ファイル指定でファイル読込開始
    img1.src = imageFile;

    //画像ロード後に画像を描画できる。
    img1.onload = function(){
        //画像の大きさを設定
        width  = img1.width;
        height = img1.height;
        canvas.attr('width' , width);
        canvas.attr('height', height);
        //画像を描画
        ctx.drawImage(img1, 0, 0, width, height);
    }
    return false;
}
//ページロード時イベント宣言
$(function() {
    var file = null; // 選択されるファイル

    //ファイル選択時イベント宣言
    $("input[type=file]").change(function() {
        //ファイルを取得
        file = $(this).prop("files")[0];
        //FileReader API
        var reader = new FileReader();
        //ファイルロード終了時イベント宣言
        reader.onload = function(e) {
            //画像表示関数コール
            drawImage(e.target.result);
        };
        //fileを読込の開始
        reader.readAsDataURL(file);
    });
});
</script>
</head>
<body>
    <h2>test canvas</h2>
    <canvas id="canvas" width="100" height="100" ></canvas>
    <br />
    <input type="file" accept="image/*" />
</body>
</html>

JavaScript
0CM

2019/11/16

JavaScript jQueryでcanvasを使い画像ファイルを表示する方法

今回は HTML5 で用意されている canvas を使って画像ファイルを描画する方法について説明します。 canvas の使い方ですが、以下の様に順を追って説明します。

画像の描画
画像の大きさにcanvasを合わせる描画
ページロード直後の描画

■画像の描画

直線の描画を行う為のコンテキストオブジェクトのメソッドは以下のものがあります。

メソッド	書式	説明
drawImage	drawImage(image, x, y) 　image:画像オブジェクト　x:描画開始の x 座標　y:描画開始の y 座標	シンプルな描画
drawImage	drawImage(image, x, y, dWidth, dHeight) 　image:画像オブジェクト　x:描画開始の x 座標　y:描画開始の y 座標　dWidth:描画する横幅　dHeight:描画する縦幅	描画開始位置と縮小幅を指定した描画
drawImage	drawImage(image, sx, sy, sWidth, sHeight, 　　　　　　dx, dy, dWidth, dHeight) 　image:画像オブジェクト　sx:描画元の x 座標　sy:描画元の y 座標　sWidth:描画する元画像の横幅　sHeight:描画する元画像の縦幅　dx:描画開始の x 座標　dy:描画開始の y 座標　dWidth:描画する横幅　dHeight:描画する縦幅	元画像の取り出し位置と幅、及び描画開始位置と幅指定

上記の drawImage の3種類の例として以下のソースを示します。
尚、今回使用した画像ファイルは以下の様なものです。

この処理の肝は、イメージオブジェクトへの画像ファイルを指定しす直後には描画処理を行わないことです。
画像ファイルの読込には時間が掛かるので、ファイルのロードが終わったタイミングで描画処理をする必要があります。
ソース上では img1.src = の直後に img1.onload がありますので、勘違いされないないように。
img1.onload ではロード直後に呼ばれる関数を宣言しています。（実際のファイルロード後この関数が実行されます）

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage(iSwitch) {
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    //イメージオブジェクト
    var img1 = new Image();
    //画像ファイル指定でファイル読込開始
    img1.src = "./canvastest1.jpg";

    //画像ロード後に画像を描画できる。
    img1.onload = function(){
        //画像の大きさを設定
        width  = img1.width;
        height = img1.height;
        canvas.attr('width' , width);
        canvas.attr('height', height);
        //画像を描画
        switch (iSwitch) {
        case 1:
            ctx.drawImage(img1, 0, 0);
            break;
        case 2:
            ctx.drawImage(img1, 50, 50, 100, 100);
            break;
        case 3:
            ctx.drawImage(img1,  0,  0, 150, 150, 10, 10, 150, 150);
            break;
        }
        
    }
    return false;
}
</script>
</head>
<body>
    <h2>test canvas</h2>
    <canvas id="canvas" width="200" height="200" ></canvas>
    <br />
    <button onclick="drawImage(1);">開始座標指定のみ</button>
    <button onclick="drawImage(2);">開始座標,幅指定</button>
    <button onclick="drawImage(3);">元画像,描画先の指定</button>
</body>
</html>

■画像の大きさにcanvasを合わせる描画

画像の大きさに合わせて canvas の横と縦の幅を合わせる例を示します。

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage(imageFile) {
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    //イメージオブジェクト
    var img1 = new Image();
    //画像ファイル指定でファイル読込開始
    img1.src = imageFile;

    //画像ロード後に画像を描画できる。
    img1.onload = function(){
        //画像の大きさを設定
        width  = img1.width;
        height = img1.height;
        canvas.attr('width' , width);
        canvas.attr('height', height);
        //画像を描画
        ctx.drawImage(img1, 0, 0, width, height);
    }
    return false;
}
</script>
</head>
<body>
    <h2>test canvas</h2>
    <canvas id="canvas" width="200" height="200" ></canvas>
    <br />
    <button onclick="drawImage('./canvastest1.jpg');">Image1</button>
    <button onclick="drawImage('./canvastest2.jpg');">Image2</button>
</body>
</html>

「Image1」をクリックすると上記の画像が表示され、「Image2」をクリックすると少し大きい画像が表示されます。

■ページロード直後の描画

画像ファイルの表示には Img タグを使えばいいのですが、javascript による描画をしたい時があります。その場合にはページがロードされた直後に canvas への画像を行います。
上記の画像表示関数を流用すれば特に難しくなく、ページロード時の $(function() { でその描画関数を呼出せば行えます。

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage() {
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    //イメージオブジェクト
    var img1 = new Image();
    //画像ファイル指定でファイル読込開始
    img1.src = "./canvastest1.jpg";

    //画像ロード後に画像を描画できる。
    img1.onload = function(){
        //画像の大きさを設定
        width  = img1.width;
        height = img1.height;
        canvas.attr('width' , width);
        canvas.attr('height', height);
        //画像を描画
        ctx.drawImage(img1, 0, 0, width, height);
    }
    return false;
}

$(function() {
    //描画関数をCALL
    drawImage();
});
</script>
</head>
<body>
    <h2>test canvas</h2>
    <canvas id="canvas" width="200" height="200" ></canvas>
</body>
</html>

JavaScript
0CM

2019/11/16

JavaScript jQueryでcanvasを使い図形を描画する方法

今回は HTML5 で用意されている canvas を使って図形を描画する方法について説明します。
この canvas は以前の様に Flash や Java を使わずに JavaScript で図形を描画することができます。
canvas の使い方ですが、以下の様に順を追って説明します。

canvasを使う準備
直線の描画
四角形の描画
円の描画

■canvasを使う準備

以下の様に HTML ソースの中に canvas タグを定義します。タグIDは取敢えず canvas とし width height で領域の大きさを設定します。
その後 javascript で canvas にアクセスする為に canvas オブジェクトを取得します。さらに canvas オブジェクトからグラフィック用コンテキストオブジェクトを取得します。
コンテキストオブジェクトの中のメソッドを使って各種の描画を行います。

<canvas id="canvas" width="200" height="200" ></canvas>
...

<script type="text/javascript">
    ...
    var canvas = $("#canvas");              //canvasオブジェクトを取得
    var ctx = canvas[0].getContext("2d");   //コンテキストオブジェクトを取得
                                            //"2d":2次元グラフィック
    ...
</script>

■直線の描画

直線の描画を行う為のコンテキストオブジェクトのメソッドは以下のものがあります。

メソッド	書式	説明
beginPath	beginPath()	線処理の開始指定
moveTo	moveTo(x, y) 　x:点の x (水平) 座標　y:点の y (鉛直) 座標	点の移動
lineTo	lineTo(x, y) 　x:線の終点の x 座標　y:線の終点の y 座標	現在の点と指定された座標で直線を描画（この線は実際には描画されません）
closePath	closePath()	beginPathで始めたパスを最後に閉じる（閉じた図形が描画される）
stroke	stroke()	現在まで蓄積された描画情報で実際に描画する

直線の例として以下のソースを示します。 closePath の部分がコメントになっていますが、このまま実行すると、ソースの下の実際のボタンの「Line」の処理となり、コメントを解除すると三角形を描画する「Triangle」の処理となります。

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Line関数
function drawLine() {
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    //パス開始
    ctx.beginPath();
    //パス始点の座標
    ctx.moveTo( 10, 10);
    //線の終点の座標
    ctx.lineTo(190,190);
    //引き続いて線の終点の座標
    ctx.lineTo( 10,190);
    //パス終了
    //ctx.closePath();
    //パスの輪郭の描画
    ctx.stroke();
    return false;
}
</script>
</head>
<body>
    <h2>test canvas</h2>
<canvas id="canvas" width="200" height="200" ></canvas>
    <br />
    <button onclick="drawLine();">Line</button>
</body>
</html>

「Line」をクリックすると2本の線が「Triangle」をクリックすると三角形の線が描画されます。

■四角形の描画

四角形の描画を行う為のコンテキストオブジェクトのメソッド・プロパティは以下のものがあります。

メソッド・プロパティ	書式	説明
strokeStyle	strokeStyle = color 　color:cssで用いる色指示	枠線の色指定
strokeRect	strokeRect(x, y, width, height) 　x:四角形の左上の x (水平) 座標　y:四角形の左上の y (鉛直) 座標　width:四角形の横幅　height:四角形の高さ	四角形の描画線の色は直前のstrokeStyleで指定されたもの
fillStyle	fillStyle = color 　color:cssで用いる色指示	塗りつぶしの色指定
fillRect	fillRect(x, y, width, height) 　x:四角形の左上の x (水平) 座標　y:四角形の左上の y (鉛直) 座標　width:四角形の横幅　height:四角形の高さ	四角形の描画し内部を塗りつぶす塗りつぶす色は直前のfillStyleで指定されたもの
clearRect	clearRect(x, y, width, height) 　x:四角形の左上の x (水平) 座標　y:四角形の左上の y (鉛直) 座標　width:四角形の横幅　height:四角形の高さ	四角形の領域をクリアする

四角形の例として以下のソースを示します。
strokeStyle で線の色を設定し strokeRect で四角い枠を描画します。
fillStyle で塗りつぶす色を設定し fillRect で四角い領域を塗りつぶします。
最後に clearRect で四角い領域をクリアします。

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Rect関数
function drawRect() {
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    //[strokeRect]用色指定
    ctx.strokeStyle = "red";
    //四角形・枠のみ描画
    ctx.strokeRect( 10, 10, 180, 180);
    //[fillRect]用色指定
    ctx.fillStyle = "green";
    //四角形・全体を塗りつぶす
    ctx.fillRect( 50, 50, 100, 100);
    //四角形・全体をクリア
    ctx.clearRect( 75, 75, 50, 50);
    return false;
}
</script>
</head>
<body>
    <h2>test canvas</h2>
<canvas id="canvas" width="200" height="200" ></canvas>
    <br />
    <button onclick="drawRect();">Rectangle</button>
</body>
</html>

「Rectangle」をクリックすると3種類の四角形が描画されます。

■円の描画

円の描画を行う為のコンテキストオブジェクトのメソッド・プロパティは以下のものがあります。

メソッド・プロパティ	書式	説明
arc	arc(x, y, radius, startAngle, endAngle [, anticlockwise]) 　x:円の中心の x (水平) 座標　y:円の中心の y (鉛直) 座標　radius:円の半径　startAngle:円の開始角度(ラジアン:πの値で指定) 　endAngle:円の終了角度(ラジアン:πの値で指定) 　anticlockwise:trueで時計回り、falseで反時計回りの描画	円の描画

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Circle関数
function drawCircle() {
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    //[strokeRect]用色指定
    ctx.strokeStyle = "red";
    //[fillRect]用色指定
    ctx.fillStyle = "yellow";
    //線の幅は3px
    ctx.lineWidth = 3; 

    //パス開始
    ctx.beginPath();
    //円描画:中心(100, 100)で半径50pxの円
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    //パス終了
    ctx.closePath();
    //塗りつぶす
    ctx.fill();
    //パスの輪郭の描画
    ctx.stroke();
    return false;
}
</script>
</head>
<body>
    <h2>test canvas</h2>
<canvas id="canvas" width="200" height="200" ></canvas>
    <br />
    <button onclick="drawCircle();">Circle</button>
</body>
</html>

「Circle」をクリックすると円が描画されます。

JavaScript
0CM

2019/08/28

JavaScript 数値の小数点以下の丸め処理(Math.floor, Math.round, Math.ceil)

数値の小数点以下の丸め処理を行うには Math オブジェクトを使います。 Math オブジェクトは数学的な定数と関数を提供する組み込みのプロパティとメソッドを持っています。
今回の丸め処理には、以下の様に切り捨て 四捨五入 切り上げ を行うメソッドがあります。

Math.floor() メソッド : 引数として与えた数以下の最大の整数を返します。
Math.round() メソッド : 引数として与えた数を四捨五入して、もっとも近似の整数を返します。
Math.ceil() メソッド : 引数として与えた数以上の最小の整数を返します。

今回は、これらのメソッドを使って丸め処理の関数を作成してみました。

丸め処理の関数

/*
 * 丸め処理
 *   P_dblVal   : 対象値
 *   P_intRound : 小数点以下丸め処理(1:切り捨て, 2:四捨五入, 3:切り上げ)
 *   return     : 丸めた値
 */
function calcRound(P_dblVal, P_intRound) {
    var dblRet;
    // 丸め処理
    switch (parseInt(P_intRound)) {
        case 1:
          dblRet = Math.floor(P_dblVal);
          break;
        case 2:
          dblRet = Math.round(P_dblVal);
          break;
        case 3:
          dblRet = Math.ceil(P_dblVal);
          break;
        default:
          dblRet = Math.round(P_dblVal);
          break;
    }
    // 戻り値
    return dblRet;
}

上記の関数を実行させてみます。

    console.log('切り捨て:(10.4) = ' + calcRound(10.4, 1));
    console.log('四捨五入:(10.4) = ' + calcRound(10.4, 2));
    console.log('切り上げ:(10.4) = ' + calcRound(10.4, 3));

    console.log('切り捨て:(10.5) = ' + calcRound(10.5, 1));
    console.log('四捨五入:(10.5) = ' + calcRound(10.5, 2));
    console.log('切り上げ:(10.5) = ' + calcRound(10.5, 3));

    console.log('切り捨て:(-10.5) = ' + calcRound(-10.5, 1));
    console.log('四捨五入:(-10.5) = ' + calcRound(-10.5, 2));
    console.log('切り上げ:(-10.5) = ' + calcRound(-10.5, 3));

実行結果がコンソールには以下の結果が表示されます。

切り捨て:(10.4) = 10
四捨五入:(10.4) = 10
切り上げ:(10.4) = 11
切り捨て:(10.5) = 10
四捨五入:(10.5) = 11
切り上げ:(10.5) = 11
切り捨て:(-10.5) = -11
四捨五入:(-10.5) = -10
切り上げ:(-10.5) = -10

小数点以下１位の丸めは出来たのですが、小数点以下２位や３位での丸めはどうすればいいのでしょうか。方法としては、小数点以下２位での丸めは数値を一旦１０倍してから、丸め処理を行いその結果を１０で割れば出来るようです。

    var valTest = 10.15;
    console.log('切り捨て:(10.15) = ' + Math.floor(valTest * 10) / 10);
    console.log('四捨五入:(10.15) = ' + Math.round(valTest * 10) / 10);
    console.log('切り上げ:(10.15) = ' + Math.ceil(valTest * 10) / 10);

実行結果がコンソールには以下の結果が表示されます。

切り捨て:(10.15) = 10.1
四捨五入:(10.15) = 10.2
切り上げ:(10.15) = 10.2

これを参考に上記の関数を変更してみます。

丸め処理の関数２（小数点以下桁数の引数追加）

/* 
 * 丸め処理・小数点以下の桁数指定
 *   P_dblVal   : 対象値
 *   P_intRound : 小数点以下丸め処理(1:切り捨て, 2:四捨五入, 3:切り上げ)
 *   P_intDpUnit: 小数点以下桁数
 *   return     : 丸めた値
 */
function calcRoundDp(P_dblVal, P_intRound, P_intDpUnit) {
    var dblRet;
    var dblPow = Math.pow(10, P_intDpUnit);
    P_dblVal = P_dblVal * dblPow;
    // 丸め処理
    switch (parseInt(P_intRound)) {
        case 1:
          dblRet = Math.floor(P_dblVal);
          break;
        case 2:
          dblRet = Math.round(P_dblVal);
          break;
        case 3:
          dblRet = Math.ceil(P_dblVal);
          break;
        default:
          dblRet = Math.round(P_dblVal);
          break;
    }
    // 戻り値
    return dblRet / dblPow;
}

上記の関数を実行させてみます。

    var valTest = 10.15;
    console.log('小数点以下２位を丸め処理');
    console.log('切り捨て:(10.15) = ' + calcRoundDp(valTest, 1, 1));
    console.log('四捨五入:(10.15) = ' + calcRoundDp(valTest, 2, 1));
    console.log('切り上げ:(10.15) = ' + calcRoundDp(valTest, 3, 1));

    console.log('小数点以下１位を丸め処理');
    console.log('切り捨て:(10.15) = ' + calcRoundDp(valTest, 1, 0));
    console.log('四捨五入:(10.15) = ' + calcRoundDp(valTest, 2, 0));
    console.log('切り上げ:(10.15) = ' + calcRoundDp(valTest, 3, 0));

    console.log('１の位を丸め処理');
    console.log('切り捨て:(10.15) = ' + calcRoundDp(valTest, 1, -1));
    console.log('四捨五入:(10.15) = ' + calcRoundDp(valTest, 2, -1));
    console.log('切り上げ:(10.15) = ' + calcRoundDp(valTest, 3, -1));

    console.log('１０の位を丸め処理');
    console.log('切り捨て:(10.15) = ' + calcRoundDp(valTest, 1, -2));
    console.log('四捨五入:(10.15) = ' + calcRoundDp(valTest, 2, -2));
    console.log('切り上げ:(10.15) = ' + calcRoundDp(valTest, 3, -2));

実行結果がコンソールには以下の結果が表示されます。

小数点以下２位を丸め処理
切り捨て:(10.15) = 10.1
四捨五入:(10.15) = 10.2
切り上げ:(10.15) = 10.2
小数点以下１位を丸め処理
切り捨て:(10.15) = 10
四捨五入:(10.15) = 10
切り上げ:(10.15) = 11
１の位を丸め処理
切り捨て:(10.15) = 10
四捨五入:(10.15) = 10
切り上げ:(10.15) = 20
１０の位を丸め処理
切り捨て:(10.15) = 0
四捨五入:(10.15) = 0
切り上げ:(10.15) = 100

結果から見て、上手く動作している様です。
小数点以下の桁数に大きな値を与えると、関数内の Math.pow で桁あふれが発生する様です。そのため、桁数指定は10桁以内ぐらいが妥当かと思います。（もっともそこまでの桁数で計算する処理も無いとは思いますが...）

JavaScript
0CM

■チェックボックスの変化時にパスワード入力を可視化

■FileReaderを使いcanvasに画像ファイルを表示

■画像の描画

■画像の大きさにcanvasを合わせる描画

■ページロード直後の描画

■canvasを使う準備

■直線の描画

■四角形の描画

■円の描画

丸め処理の関数

丸め処理の関数２（小数点以下桁数の引数追加）