Image – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

[画像処理] アナログ画像からデジタル化する手順

1. 標本化(Sampling): ピクセル化
　L 2次元に分割する。これは離散的な点の集合に分割処理する

2. 量子化(Quantization): 画素値離散化
　L 濃度レベルを決める　色の階調の分割をどのくらいにするか

データ量
　画素数 x 濃度レベル(ビット)
　300 x 300 x 8bit(1byte) = 90000byte(90kbyte)
そのほか、ファイル名、作成日、画像の解像度、色数、圧縮の種類、その他必要なデータ

画像
RGBの3つのチャンネルがある
RGBのチャンネルに対して、8bit(256)のデータ幅を持っている
この3つのチャンネルにアルファ（透明度）を組み合わせている

なるほど
勉強すること多すぎる　というか永遠に終わらんなコレ

[img] 画像をbase64にエンコードして書く方法

http://192.168.33.10:8000/img/img1.jpg

“copy image as data URL”でbase64のパスを取得できる。
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJ…

なるほど、こういう方法があるのか。。

[JavaScript] Lazy Loadで画像読み込みを高速化させる

	<div class="container">
		<img data-src="img/img1.jpg" class="lazyload"><br><br>
		<img data-src="img/img2.jpg" class="lazyload"><br><br>
		<img data-src="img/img3.jpg" class="lazyload"><br><br>

	</div>
	<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
	<script>
    lazyload();
</script>

画像のソースをsrcではなく、data-srcと書く。

なるほど、勉強になります。

[PHP] 拡張子不明の画像名を変数として持ち、imgフォルダ内にあれば表示

imgフォルダ内に画像が複数(数千枚)置いてあり、拡張子は不明だが、ファイル名だけ変数として持っており、該当のファイル名があればその画像を表示、無ければplaceholderの画像を表示したい。

まず画像を用意します。

拡張子分foreachで探してみたが、

$name = "cat";
$cfg = array('jpg', 'jpeg', 'png', 'gif');

foreach($cfg as $key){
	if(file_exists("img/" .$name . "." . $key)){
		echo "<img src='img/" . $name . "." .$key."' width='150px' height='100px'>";
	}
}

これだと、拡張子の配列分回さないといけないのと、画像が無ければ、placeholderの表示ができない。

globとワイルドカードを使う

$name = "cat";
$result = glob("img/" . $name . ".*");

if(in_array($result)) {
	echo '<img src="'.$result[0].'" width="150px" height="100px">';
} else {
	echo '<img src="/img/150x150.png">';
}

OK!上等！
続いて、少々細かいことを調査していきます。

デジカメの仕組み

0.シャッターに相当する電子回路が電子の流れをコントロール
1.レンズが被写体から光を集める
2.撮影素子(CCD)が画像を電子的に捉える
3.画像処理エンジンで画像は電子データに変換され、様々な画質処理が行われる
4.メモリーカードなどの記録メディアに電子データとして保存される

フィルムカメラとの違いは、臭化銀(AgBr)の電子反応ではなく、撮影素子でデータを捉えているところか。

### 撮影素子とは？
撮影素子とは、被写体の光を画像データに変換する
イメージセンサーと呼ばれ、ほぼ全てのデジカメに内臓されている

CANON EOS Kiss X5
撮影素子：高感度・高解像度大型単板CMOSセンサー

– 撮影素子サイズ
-> イメージセンサーサイズ、画像センサーサイズと呼ばれる
-> 単位はインチ(2.54cm)で1/4〜2/3インチが一般的
※撮影素子のサイズが大きいほど多く光を集めて色を詳細に表現できる。撮影素子とレンズで画質が決まる

– 走査方式
デジタルデータを画像としてディスプレイに表示する方法
インターレース方式：1枚の画像を横長に細かく分割、奇数段目・偶数段目の2回に分けて転送表示
プログレッシブ方式：分割した部分をまとめて1回で転送表示

– イメージセンサー(個体撮影素子)　Charge Coupled Device
CMOSセンサー：其々のピクセルが独立して電荷の増幅やデジタル変換する回路をもち、デジタル信号としてデータを出力
CCDセンサー：其々のピクセルの電荷は隣接するピクセルに一斉に転送され、バケツリレーのように順次外部に信号を出力する
表現力や画質はCCD(デジカメ主流だった、高価)が、読み出しの速さ消費電力ではCMOS(スマホ主流で普及)の方が優れている

– 撮影素子の働き
被写体からの光線をレンズなどの光学系によって撮影素子の受光平面に結像させ、その像の光による明暗を電荷量に光電変換し、それを順次読み出して電気信号に変換する
-> 外部光電効果：固体の表面にある電子が光子のエネルギーを受けて真空中に放出される現象
-> 内部光電効果：エネルギーの低い方にある電子が、光子のエネルギーにより高いほうに励起される現象
-> CCDイメージ・センサの材料にSi単体結晶(シリコン)が使われる

1枚のシリコン基板上に形成された多数の受光素子の並びで光電変換を行う
CCDはMOSキャパシタを近接して並べた構造が基本
半導体素子の一種で、シリコン基板表面の酸化膜上に多数の電極を設けて、MOS構造
の各電極に隣同士で異なる電圧を与えることにより電位の井戸を作り出す

イメージセンサー自作は完全に電子回路の世界だな。
とりあえずRaspberry Piは買い物リストに追加や。

フィルムカメラの原理

フィルムカメラに光子が入ると、光エネルギーの塊は感光乳剤と呼ばれるプラスチックでカバーされた部分にぶつかる
※感光乳剤は紫外線で固まる乳剤(脂肪、脂肪油または水に不溶性の医薬品を水中に微細均等に分散し乳状とした液剤)。臭化銀(AgBr)などの粒子をゼラチンの中に一様に分散させた乳液状の薬剤。紫外線を当てなければ水で流せる
※感光乳剤は「ジアゾ感光材」と「着色剤」を混ぜ合わせる
※可視光線よりも波長の短いものが紫外線　紫外線の中でみ、波長が長いものからA、B、Cと大別されている
※UV-A(315-400nm)、UV-B(280-315nm)、UV-C(100-280nm)

### 感光剤(AgBr)の特徴
AgBrに光が当たると電子が飛び出す。飛び出た電子が銀イオン(Ag+)に取り込まれると中世の銀原子(Ag)となる。生成した銀原子が数個(n個)集まって、銀原子のクラスターを生成(Agn)。
この銀原子のクラスターを潜像と呼び、還元試薬によるフィルム現像の家庭で、銀原子クラスターが触媒となって潜像の周りで銀イオンの還元が速く進行し、銀原子の数が増加して目に見えるような像が生成さレル。

### フィルム
フィルムストリップをコーディングしているものはサスペンションのようなもの
ハロゲン化銀結晶が浮遊して凝固している(ゼラチン)
光子がフィルムストリップ上で臭化銀結晶にぶつかると、負電荷の臭化物イオンから電子を取り除く。そして、格子の結晶の中の電子が離脱の状態になるまで動き回る。結果的に銀イオンと合わさって中性電荷の銀原子になる。

### 現像とは
現像液が残ったハロゲン化銀結晶と反応する。現像液が還元剤を含む。還元剤は、化学反応の間に他の物質に電子を与えることのできる化学物質。
ネガ像では、光と影の情報が逆になる。
未現像のフィルムを光に当ててはいけない

潜像の状態から像を浮き出すのを現像液

現像を停止させるのを停止液
感光部分をフィルムを長期保存可能な状態に像を固定化するのを定着液という

光が臭化銀(AgBr)に当たった時に電子が飛び出る性質と銀粒子の変化で現像を作っているのか。化学反応の世界なんだな。プログラミングとは違う世界の話ですな。

jpeg/gif/bmp/svg

jpeg: Joint Photographic Experts Group, 24bit 1670万色, 1/10〜1/50圧縮率
gif: Graphic Interchange Format, 8bit 256色、高圧縮可能、ファイルサイズが小さい、ロゴ・ボタン・アイコンなど
png: Portable Network Graphic, 48bit, 280兆色、可逆圧縮、画質劣化がない、透明・不透明・半透明対応
bmp: Microsoft Windows Bitmap Image, 無圧縮、データが大きい
svg: Scalable Vector Graphics, XMLベースの2次元ベクターイメージ

jpg

gif

png

bmp
-> not permitted in wordpress

svgは割と最近使われていると言われているので、基礎は勉強する必要がありそうです。

phpでファイルダウンロード

$file_name = "building.jpg";
$file_path = dirname(__FILE__)."/".$file_name;

$download_file_name = "building.jpg";

header('Content-Type: application/force-download;');
header('Content-Length: '.filesize($file_path));
header('Content-Disposition: attachment; filename="'.$file_name.'"');

readfile($download_file_name);

特に問題なし

うーん、複数のファイルをDLしたいです。

Upload an image from a form with php

Move the uploaded image with move_uploaded_file to the specified fold.
Then let the image be displayed again in the view.

if(file_exists($_FILES['upfile']['tmp_name'])){
	$ext = substr($_FILES['upfile']['name'], strrpos($_FILES['upfile']['name'],'.') + 1);
	echo $ext."<br>";
	if(strtolower($ext) !== 'png' && strtolower($ext) !== 'jpg' && strtolower($ext) !== 'jpeg' && strtolower($ext) !== 'gif'){
		echo '画像以外のファイルが指定されています。画像ファイル(png/jpg/jpeg/gif)を指定して下さい';
		exit();
	}
	$image = "img/".basename($_FILES['upfile']['tmp_name']).".".$ext;
	if(move_uploaded_file($_FILES['upfile']['tmp_name'], $image)){
		echo "アップロード成功！！";
	} else {
		echo "失敗";
	}
	// insert $image into mysql
}


?>
<div id="content">
<h2>画像管理</h2>
<hr>
<form action="#" method="POST" enctype="multipart/form-data">
<div id="drag-drop-area">
 <div class="drag-drop-inside">
  <p class="drag-drop-info">ここにファイルをアップロード</p>
  <p>または</p>
  <!-- <input type="file" value="ファイルを選択" name="image"> -->
  <p class="drag-drop-buttons"><input id="fileInput" type="file" value="ファイルを選択" name="upfile"></p>
      <input type="submit" value="送信">
   </div>
  </div>
  <img src="<?php echo $image; ?>">
</form>

Before

After

Will implement this in laravel.
Or, in the case of laravel, is there a form to upload images?

Category: Image