JavaScriptの覚書

画像を重ねて表示

CSSだけで、複数の画像を１つに重ねることができる。
画像は透過ありのpng形式である。（gifも可能と思われる）

Sample

ソースコード

	<style>
		#img_div{
			width:200px;
			height:200px;
		}
		.test1{
			position:absolute;
		}
	</style>
	
	
	<div id="img_div">
		<img src="toumei1.png" class="test1" />
		<img src="toumei2.png" class="test1" />
		<img src="toumei3.png" class="test1" />
		<img src="toumei4.png" class="test1" />
	</div>
	

2016-11-4

画像を重ねて表示 | 文字も重ねる

重ねた画像に、さらに文字を重ねることができる。
文字の位置はimg_divのwidthとheightで調整する。

Sample

ソースコード

	<style>
		#img_div{
			width:200px;
			height:50px;
		}
		.test1{
			position:absolute;
		}
	</style>
	
	
	
	<div id="img_div">
		<img src="toumei1.png" class="test1" />
		<img src="toumei2.png" class="test1" />
		<img src="toumei3.png" class="test1" />
		<img src="toumei4.png" class="test1" />
	</div>
	いろは<br>
	<br>
	

2016-11-4

画像を重ねて、1枚の画像としてIMG要素に表示

複数の透過付きPNG画像を重ね、それを1枚の画像データとしてIMG要素に表示することができる。
DOM要素からバイナリ（画像データ）に変換するのにhtml2canvas.jsを使っている。

Sample

ソースコード

	<script src="jquery.js"></script>
	<script src="html2canvas.js"></script>
	
	
	<style>
		#img_div{
			width:200px;
			height:200px;
		}
		.test1{
			position:absolute;
		}
	</style>
	
	<script>
	function test2(){
		
		// 画像を重ねて表示しているDIV要素を取得する。
		var element = $('#img_div')[0];
  
		// DIV要素を画像のバイナリデータに変換する。
		html2canvas(element, { onrendered: function(canvas) {
			// 変換後に呼び出されるコールバック
		
			// 変換後、バイナリデータをデータURLスキームとして取得する。
			var data_url_scheme= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
			
			// IMG要素へデータURLスキームをセットして画像表示する。
			$('#img2')[0].src = data_url_scheme;

		}});
	}
	</script>
	
	～略～
	
	<input type="button" class="btn btn-success btn-xs" value="テスト" onclick="test2()" /><br>
	<div  style="width:200px;height:200px;background-color:#cdebd9">
		<div id="img_div2">いろは</div>
		<div id="img_div">
			<img src="toumei1.png" class="test1" />
			<img src="toumei2.png" class="test1" />
			<img src="toumei3.png" class="test1" />
			<img src="toumei4.png" class="test1" />
		</div>
	</div>
	
	<img id="img2" src="" alt="" /><br>
	

2016-11-4

画像を重ねて、1枚の画像としてダウンロードする

複数の透過付きPNG画像を重ね、それを1枚の画像ファイルに変換し、ダウンロードすることができる。
DOM要素からバイナリ（画像データ）に変換するのにhtml2canvas.jsを使っている。
Sample

ソースコード

	<script src="jquery.js"></script>
	<script src="html2canvas.js"></script>
	
	<style>
		#img_div{
			width:200px;
			height:200px;
		}
		.test1{
			position:absolute;
		}
	</style>
	
	<script>
	function test2(){
		// 画像を重ねて表示しているDIV要素を取得する。
		var element = $('#img_div')[0];
	
		//DOM要素を画像のバイナリデータに変換する。
		html2canvas(element, { onrendered: function(canvas) {
			// 変換後に呼び出されるコールバック
		
			// 変換後、バイナリデータをデータURLスキームとして取得する。
		  	var data_url_scheme= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
		  	
			// データURLスキームをロケーションにセットすることにより、画像ファイルダウンロードを行う。
			window.location.href = data_url_scheme;
	
		}});
	}
	</script>
	
	
	～略～
	
	
	<input type="button" class="btn btn-success btn-xs" value="ダウンロード" onclick="test2()" /><br>
	<div  >
		<div id="img_div2">いろは</div>
		<div id="img_div">
			<img src="toumei1.png" class="test1" />
			<img src="toumei2.png" class="test1" />
			<img src="toumei3.png" class="test1" />
			<img src="toumei4.png" class="test1" />
		</div>
	</div>

	

2016-11-4

画像を重ねて、1枚の画像としてダウンロードする | ファイル名指定可能

複数の画像を重ねて1枚画像に変換する。
変換した一枚画像をファイル名指定してファイルダウンロードする。

DOM要素からバイナリ（画像データ）に変換するのにhtml2canvas.jsを使っている。
また、ダウンロードファイルにファイル名を指定可能にするため、FileSaver.jsも使っている。

Sample

ソースコード

	<script src="jquery.js"></script>
	<script src="html2canvas.js"></script>
	<script src="FileSaver.js"></script>
	
	<style>
		#img_div{
			width:200px;
			height:200px;
		}
		.test1{
			position:absolute;
		}
	</style>
	
	<script>
	function test2(){
		// 画像を重ねて表示しているDIV要素を取得する。
		var element = $('#img_div')[0];
	
		//DOM要素を画像のバイナリデータに変換する。
		html2canvas(element, { onrendered: function(canvas) {
			// 変換後に呼び出されるコールバック
		
			// MIMEタイプ
			var type = 'image/png';
			
			/// 変換後、バイナリデータをデータURLスキームとして取得する。
			var data_url_scheme= canvas.toDataURL(type).replace("image/png", "image/octet-stream");
	
			// データURLスキームのデータ部分をバイナリデータとして抜き出す。
			var bin = atob(data_url_scheme.split(',')[1]);
			
			// 空の Uint8Arrayビューを作る
			var buffer = new Uint8Array(bin.length);
			
			// バイナリデータの値をUint8Arrayビューに 1 バイトずつ値を埋めいく。
			for (var i = 0; i < bin.length; i++) {
			  buffer[i] = bin.charCodeAt(i);
			}
			
			// Uint8Arrayビューのバッファーを抜き出し、それを元に Blob を作る
			var blob = new Blob([buffer.buffer], {type: type});
	
			// FileSaver.jsの機能を利用し、Blob化したデータをファイルダウンロードする。（ここでファイル名を指定できる）
				saveAs(
					  blob
					, "test_usagi.png"
				);
	
		}});
	}
	</script>
	
	～略～
	
	<input type="button" class="btn btn-success btn-xs" value="ダウンロード" onclick="test2()" /><br>
	<div>
		<div id="img_div2">いろは</div>
		<div id="img_div">
			<img src="toumei1.png" class="test1" />
			<img src="toumei2.png" class="test1" />
			<img src="toumei3.png" class="test1" />
			<img src="toumei4.png" class="test1" />
		</div>
	</div>
	

2016-11-4

画像を重ねて、1枚の画像とし、Ajaxでサーバーに送信する

複数の画像を重ねて1枚画像に変換する。
さらに、変換した一枚画像をAjaxでサーバへ送信する。

DOM要素からバイナリ（画像データ）に変換するのにhtml2canvas.jsを使っている。

Sample

ソースコード

	<script src="jquery.js"></script>
	<script src="html2canvas.js"></script>
	
	<style>
		#img_div{
			width:200px;
			height:200px;
		}
		.test1{
			position:absolute;
		}
	</style>
	
	<script>
	function test2(){
		// 画像を重ねて表示しているDIV要素を取得する。
		var element = $('#img_div')[0];
	
		//DOM要素を画像のバイナリデータに変換する。
		html2canvas(element, { onrendered: function(canvas) {
			// 変換後に呼び出されるコールバック
		
			// MIMEタイプ
			var type = 'image/png';
			
			// DOM要素からバイナリの一種であるデータURLスキームに変換する
		  	var data_url_scheme= canvas.toDataURL(type).replace("image/png", "image/octet-stream");
	
			// データURLスキームからbase64形式のバイナリデータに変換する
			var base64 = btoa(data_url_scheme);
			base64 = base64.replace(/^.*,/, '');
			
			// ファイル名を指定
			var file_name = "demo6.png";
			file_name = encodeURIComponent(file_name);// URLエンコード
			
			// base64形式のバイナリデータをAjaxでサーバーに送信する。
			$.ajax({
				type: "POST",
				url: "upload.php",
				data: 'base64=' + base64 + '&file_name=' + file_name,
				cache: false,
				dataType: "text",
				success: function(res, type) {
					$('#res').html('サーバーへファイルを保存しました。→ '+res);
				},
				
				error: function(xmlHttpRequest, textStatus, errorThrown){
					console.log(xmlHttpRequest.responseText);
					alert(textStatus);
				}
				
			});// ajax
	
		}});
	}
	</script>
	
	～略～
	
	<input type="button" class="btn btn-success btn-xs" value="AJAX" onclick="test2()" /><br>
	<div>
		<div id="img_div2">いろは</div>
		<div id="img_div">
			<img src="toumei1.png" class="test1" />
			<img src="toumei2.png" class="test1" />
			<img src="toumei3.png" class="test1" />
			<img src="toumei4.png" class="test1" />
		</div>
	</div>
	

upload.php

	<?php
	$base64=$_POST['base64'];
	$file_name=$_POST['file_name'];
	
	$file_name = urldecode ($file_name);
	$file_name = 'upload_img/'.$file_name;
	echo $file_name;
	
	
	// BASE64バイナリ文字列をファイルに変換して書き出す
	$base64 = base64_decode($base64);
	$base64 = preg_replace("/data:[^,]+,/i","",$base64);
	$base64 = base64_decode($base64);
	file_put_contents($file_name, $base64);
	

2016-11-4

TableDataK.js | テーブル要素からフィールドを指定してデータを取得する

Download
TableDataK.js

	/**
	 * TableDataK.js | テーブル要素からフィールドを指定してデータを取得する
	 * 
	 * @version 0.5 未テスト
	 * @date 2016-11-8
	 */
	var TableDataK =function(option){
		
		
		this.option = option;
		
		var myself=this; // Instance of myself.
	
		/**
		 * initialized.
		 */
		this.constract=function(){
			
			// If Option property is empty, set a value.
			this.option = setOptionIfEmpty(this.option);
			
		};
		
		// If Option property is empty, set a value.
		function setOptionIfEmpty(option){
			
			if(option == undefined){
				option = {};
			}
			
			if(option['flg'] == undefined){
				option['flg'] = 0;
			}
			
			return option;
		};
		
		
		
	
		/**
		 *  一覧からデータを取得する
		 *  
		 *  @version 1.0
		 *  
		 *  @param tbl_slt テーブルのセレクタ
		 *  @param fields フィールドリスト
		 *  @param 一覧のデータ
		 */
		this.getDataFromTable = function(tbl_slt,fields){
			
			var data = [];
			$(tbl_slt + ' tbody tr').each(function(){
				var tr = $(this);
				
				// TR要素からフィールド名を指定して、エンティティを取得する
				var ent = myself.getEntity(tr,fields);
				
				data.push(ent);
			});
			
	
			return data;
		};
		
		
		/**
		 * 親要素からフィールド名を指定して、エンティティを取得する
		 *  @param parElm 親要素
		 *  @param fields フィールドリスト
		 *  @return エンティティ
		 */
		this.getEntity = function(parElm,fields){
			
			
			
			var ent = {}; // エンティティ
			
			for(var i in fields){
				
				var f = fields[i];
		
				// name属性またはclass属性を指定して値要素を取得する。
				var valueElm = getValueElm(parElm,f);
				
	
				// 値要素が取得できなければcontinueする。
				if(valueElm[0]==undefined){
					continue;
				}
				
				
				// 値要素のタグ名を取得する
				var tagName = valueElm.get(0).tagName; 
	
				// 値を取得する
				var v = null;
				if(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'){
					
					// type属性を取得する
					var typ = valueElm.attr('type');
					
					if(typ=='file'){
	
						// アップロードファイル系である場合、ひもづいているlabel要素から値を取得する。
						v = getValFromLabel(parElm,f);
	
					}
					
					else if(typ=='checkbox'){
						v = 0;
						if(valueElm.prop('checked')){
							v = 1;
						}
						
					}
					
					else if(typ=='radio'){
						var opElm = parElm.find("[name='" + f + "']:checked");
						v = 0;
						if(opElm[0]){
							v = opElm.val();
						}
			
					}
					
					else{
						v = valueElm.val();
						
					}
				}
				
				// IMGタグへのセット
				else if(tagName == 'IMG'){
					
					//IMG系である場合、ひもづいているlabel要素から値を取得する。
					v = getValFromLabel(parElm,f);
	
				}
				
				else{
					v = valueElm.html();
				}
				
				ent[f] = v;
	
			}
	
	
			return ent;
		};
		
		
		/**
		 * フィールド名から親要素内をname属性またはclass属性で探し、該当する要素を値要素として取得する
		 * 
		 * @param parElm 親要素
		 * @param feild フィールド名（name属性またはclass属性）
		 * @return jquery_object 値要素
		 */
		function getValueElm(parElm,feild){
			
			
			var valueElm = parElm.find("[name='" + feild + "']");
			if(valueElm[0]==undefined){
				valueElm = parElm.find('.' + feild);
			}
			return valueElm;
		};
		
		
		/**
		 * フィールドを指定してlabel要素から値を取得する
		 * @param parElm フォーム要素オブジェクト
		 * @param field フィールド名
		 * @return labelから取得した値
		 */
		function getValFromLabel(parElm,field){
			var v = null;
			var label = parElm.find("[for='" + field + "']");
			if(label[0]){
				v = label.html();
			}
			
			return v;
					
		};
		
		
		
		
		// call constractor method.
		this.constract();
	};
	

2016-11-8

カテゴリ連動型SELECT | CSelectLinkage.js

GitHub
サンプル

カテゴリ連動型SELECTはカテゴリSELECTと主SELECTの２つから構成される。
カテゴリSELECTで選択を行うと、連動して主SELECTの選択リストはカテゴリに属したリストに切り替わる。


2016-11-11

ラジオボタンのイベント挙動を調査

サンプル

ソースコード

	<script>
	function test1(e){
		var radio = $(e);
		var v = radio.attr('value');
		$('#res1').html(v);
	}
	</script>
	
	<label class="animal_label"><input type="radio"  name="animal2" value="1" onclick="test1(this)" />ネコ</label>
	<label class="animal_label"><input type="radio"  name="animal2" value="2" checked onclick="test1(this)" />ヤギ</label>
	<label class="animal_label"><input type="radio"  name="animal2" value="3" onclick="test1(this)" />カニ</label>
	<div id="res1"></div>
	

2016-11-15

ラジオボタンを扱いやすくする方法 | ラジオボタンをhidden要素と連動する

ラジオボタンは他のテキスト要素など他の入力要素と比べるとかなり特異で扱いにくい。
hidden要素と連動する方式は、この弱点を解決できる。

ラジオボタンをユーザーがクリックしたとき、hidden要素に値をセットする。
他のプログラムは、そのhidden要素から値を取得するようにする。
hidden要素は扱いやすいので、シンプルで分かりやすいソースコードになる。

サンプル

ソースコード

	<script>
	/**
	* ラジオボタンの選択値を指定したhidden要素にセットする
	* @param e ラジオボタン要素
	* @param hdd_slt hidden要素のセレクタ
	*/
	function setHidden(e,hdd_slt){
		var radio = $(e);
		var v = radio.attr('value');
		$(hdd_slt).val(v);
	}
	</script>
	
	<input id="animal1" type="hidden" value="2" />
	<label class="animal_label"><input type="radio"  name="animal1" value="1" onclick="setHidden(this,'#animal1')" />ネコ</label>
	<label class="animal_label"><input type="radio"  name="animal1" value="2" checked onclick="setHidden(this,'#animal1')" />ヤギ</label>
	<label class="animal_label"><input type="radio"  name="animal1" value="3" onclick="setHidden(this,'#animal1')" />カニ</label>
	

2016-11-15

ラジオボタンをhidden要素と連動する | リフレッシュ

サンプル

ソースコード

	<script>
	/**
	* ラジオボタンの選択値を指定したhidden要素にセットする
	* @param e ラジオボタン要素
	* @param hdd_slt hidden要素のセレクタ
	*/
	function setHidden(e,hdd_slt){
		
		var radio = $(e);
		var v = radio.attr('value');
		$(hdd_slt).val(v);
	}
	
	function refresh(){
		var v = $('#animal1').val();
		$("[name='animal1']").val([v]);
	}
	</script>
	
	<input id="animal1" type="number" min="0" max="4" value="2" />
	<input type="button" class="btn btn-primary btn-sm" value="リフレッシュ" onclick="refresh()" /><br>
	<label class="animal_label"><input type="radio" name="animal1" value="1" onclick="setHidden(this,'#animal1')" />ネコ</label>
	<label class="animal_label"><input type="radio" name="animal1" value="2" checked onclick="setHidden(this,'#animal1')" />ヤギ</label>
	<label class="animal_label"><input type="radio" name="animal1" value="3" onclick="setHidden(this,'#animal1')" />カニ</label>
	

2016-11-16

name属性名とvalueを指定してラジオボタンにチェックを入れる

	/**
	 * name属性名とvalueを指定してラジオボタンにチェックを入れる
	 * @param name ラジオボタンのname属性名
	 * @param value value属性の値
	 * @returns
	 */
	function _putCheckedToRadio(name,value){
		var slt = "[name='" + name +"'][value='" + value + "']";
		$(slt).prop({'checked':true});
	}
	

2017-2-27

xxx