晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

JavaScript)2枚の写真の一部を拡大して画質比較できるツールを作成。

ブラウザで、2枚の写真の一部を拡大して画質比較できるツールを作成してみた。

「画像の一部を拡大して別枠に表示する」以下のJavaScriptライブラリ「jquery.ImageExpansion.js」の改修版を使用。

【改修版】

【作成ツール】

スマホでは、正常動作しない。ある程度の大きさのディスプレイのPCでの利用を想定。

※ 写真が重たいので、表示に時間がかかる。

サンプル → https://ok2nd.github.io/tool/photo/compare/sample1.html

サンプル → https://ok2nd.github.io/tool/photo/compare/sample2.html

f:id:art2nd:20210721105848j:plain

 jQueryと「jquery.ImageExpansion.js」の改修版を「jquery.ImageExpansion-multi.js」として読み込む。拡大率を計算してImageExpansion()をコールする部分を「image_expand.js」として読み込む。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery.ImageExpansion-multi.js"></script>
<script src="js/image_expand.js"></script>
<style type="text/css">
#image_expansion1 {
	position: relative;
}
#image_expansion2 {
	position: relative;
}
.pan_image {
	float: left;
	border: 2px solid #FF00B6;
}
.pan_mouse {
	position: absolute;
	border: 2px solid #FF00B6;
	cursor: move;
}
</style>
<table>
<tr>
<td>
	<div id="image_expansion1">
		<div class="pan_mouse"></div>
	<img id="img1" src="img/xxx.jpg">
		<div class="pan_image"></div>
	</div>
</td>
<td>
	<div id="image_expansion2">
		<div class="pan_mouse"></div>
	<img id="img2" src="img/yyy.jpg">
		<div class="pan_image"></div>
	</div>
</td>
</tr>
</table>
<script type="text/javascript">
window.onload = function() {
	image_expand('#image_expansion1', 'img1');
	image_expand('#image_expansion2', 'img2');
}
</script>

【 image_expand.js 】

ディスプレイの解像度が「1920×1080」を想定して、表示される画像の大きさを調整している。

function image_expand(div, img) {
	var ih = document.getElementById(img).naturalHeight;
	var iw = document.getElementById(img).naturalWidth;
	if (ih > iw) {
		var pan = ih / 500;
		var drag = 180000 / ih;
	} else {
		var pan = iw / 600;
		var drag = 240000 / iw;
	}
	$(function() {
		$(div).ImageExpansion({
			'pan' : pan,	//倍率
			'drag' : drag	//ドラッグ枠の大きさ
		});
	});
}

任意のパソコンローカルの2つの写真/画像をドラッグ&ドロップして比較するツールも作成。写真/画像はサーバー側に送られるわけではない。写真/画像サイズが小さいと正常動作しない。

→→→ https://ok2nd.github.io/tool/photo/compare/upload.html

f:id:art2nd:20210722155929p:plain

<script type="text/javascript">
drag_drop('1');
drag_drop('2');
function drag_drop(no) {
	var image_expansion = document.getElementById('image_expansion'+no);
	image_expansion.addEventListener('dragover', function (e) {
		e.preventDefault();
		e.stopPropagation();
		e.dataTransfer.dropEffect = 'copy';
	});
	image_expansion.addEventListener('drop', function (e) {
		e.stopPropagation();
		e.preventDefault();
		const reader = new FileReader();
		reader.onload = function (e) {
			document.getElementById('img'+no).src = e.target.result;
			window.setTimeout( function() { image_expand('#image_expansion'+no, 'img'+no) }, 3 );
		}
		reader.readAsDataURL(e.dataTransfer.files[0]);
	});
}
</script>

GIMP)色調補正「ティール&オレンジ」をトーンカーブで。(2)

昨日、GIMPで「ティール&オレンジ」(Teal and Orange)という海外映画でよく使われる色調補正(カラーグレーディング)を試してみた。

他の写真でも試してみた。神戸三宮で撮影した写真を使ってみた。

f:id:art2nd:20210707085552j:plain

オリジナル写真

f:id:art2nd:20210707085611j:plain

ティール&オレンジ

f:id:art2nd:20210707085624j:plain

オリジナル写真

f:id:art2nd:20210707085636j:plain

ティール&オレンジ

f:id:art2nd:20210707085651j:plain

オリジナル写真

f:id:art2nd:20210707085703j:plain

ティール&オレンジ

f:id:art2nd:20210707085718j:plain

オリジナル写真

f:id:art2nd:20210707085730j:plain

ティール&オレンジ

f:id:art2nd:20210707085743j:plain

オリジナル写真

f:id:art2nd:20210707085756j:plain

ティール&オレンジ

f:id:art2nd:20210707085815j:plain

オリジナル写真

f:id:art2nd:20210707085830j:plain

ティール&オレンジ

f:id:art2nd:20210707085843j:plain

オリジナル写真

f:id:art2nd:20210707085858j:plain

ティール&オレンジ

f:id:art2nd:20210707085922j:plain

オリジナル写真

f:id:art2nd:20210707085933j:plain

ティール&オレンジ

f:id:art2nd:20210707085946j:plain

オリジナル写真

f:id:art2nd:20210707085957j:plain

ティール&オレンジ

f:id:art2nd:20210707090009j:plain

オリジナル写真

f:id:art2nd:20210707090022j:plain

ティール&オレンジ

GIMP)色調補正「ティール&オレンジ」をトーンカーブで。BBCドラマやハリウッド映画風?。

以前、BBCドラマのような落ち着いた色合いの写真にするのを、GIMPPhotoshop Expressで試した。

必ずしも成功したとは言えない。

今回、ティール&オレンジ」(Teal and Orange)(オレンジ&ティールとも言う)という海外映画でよく使われる色調補正(カラーグレーディング)を試してみる。

Tealは、日本語では「鴨の羽色」と表現される青緑色。青緑色の暗部を強めにして、オレンジ色の明部を強めにする。

f:id:art2nd:20210707083844j:plain
f:id:art2nd:20210707083841j:plain
Teal:#008080 | Orange:#FFA500

ティール&オレンジ」の手法は色々あるようだが、手順が多く手間がかかる例が多い。

今回、GIMPトーンカーブのみで簡易的にやってみた。

  • 青:暗部を上げて、明部を下げる。
  • 緑:明部を少し上げる。
  • 赤:暗部を下げて、明部を上げる。

これをプリセットに登録しておけば、ワンタッチで処理できる。

f:id:art2nd:20210706213517j:plain

赤の明部の上げ方を少し下げたタイプ(ティール&オレンジ2)。

f:id:art2nd:20210706214342j:plain

f:id:art2nd:20210706171323j:plain

オリジナル写真

f:id:art2nd:20210706213632j:plain

ティール&オレンジ

f:id:art2nd:20210706171358j:plain

ティール&オレンジ2

場合によっては、さらに彩度を少し下げると落ち着いた雰囲気になる。

f:id:art2nd:20210706213721j:plain

ティール&オレンジ+彩度下げ

f:id:art2nd:20210706171433j:plain

オリジナル写真

f:id:art2nd:20210706213750j:plain

ティール&オレンジ

f:id:art2nd:20210706171447j:plain

ティール&オレンジ2

f:id:art2nd:20210706171500j:plain

オリジナル写真

f:id:art2nd:20210706213817j:plain

ティール&オレンジ

f:id:art2nd:20210706171513j:plain

ティール&オレンジ2

今回のトーンカーブの使い方は、以前試した「写真をレトロっぽくする」(↓)とほぼ同じ。

画像にエフェクトをかけるJavaScriptライブラリ「CamanJS」を使ってみた。ローカルファイルアップロード版も作成。

画像にエフェクトをかけるJavaScriptライブラリ「CamanJS」を使ってみた。

参考にしたページ。

jQueryと合わせてCamanJSライブラリを読み込む。

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/caman.full.min-4.1.1.js"></script>

プリセットの一覧が以下。

CamanJS - Preset サンプル一覧

f:id:art2nd:20210528101401j:plain

※ 以下の2つのWebページは、パソコンのブラウザChromeでは正常動作するが、スマホのブラウザでは正常動作しない。

1枚の写真にボタンでプリセットを変えるサンプル。

CamanJS - Preset サンプル

f:id:art2nd:20210528101414j:plain

ローカルの任意の画像をアップロードしてエフェクトをかけるWebページも作成。エフェクトをかけた画像はクリックでファイル保存できる。処理はローカルのJavaScriptですべて行うので、サーバーサイドに画像が送られることはない。

CamanJS ローカル画像アップロード

f:id:art2nd:20210718140107p:plain

f:id:art2nd:20210718140111p:plain

エフェクトをかけた画像はマウス右クリックでローカルに保存できる。ただし、pngファイルでサイズは大きくなる。

ソースコード

<div id="file-select">
	画像(JPEG)ファイル:<input id="file" name="file" type="file" />
</div>
<div id="clear">
	<button onclick="Clear();">Clear</button>
</div>
<div>
	<button class="preset" data-preset="clarity">Clarity</button>
	<button class="preset" data-preset="oldBoot">Old Boot</button>
	<button class="preset" data-preset="hazyDays">Hazy Days</button>
	<button class="preset" data-preset="sunrise">Sunrise</button>
	<button class="preset" data-preset="vintage">Vintage</button>
	<button class="preset" data-preset="nostalgia">Nostalgia</button>
	<button class="preset" data-preset="hemingway">Hemingway</button>
	<button class="preset" data-preset="love">Love</button>
	<button class="preset" data-preset="jarques">Jarques</button>
	<button class="preset" data-preset="orangePeel">Orange Peel</button>
	<button class="preset" data-preset="crossProcess">Cross Process</button>
	<button class="preset" data-preset="concentrate">Concentrate</button>
	<button class="preset" data-preset="glowingSun">Glowing Sun</button>
	<button class="preset" data-preset="herMajesty">Her Majesty</button>
	<button class="preset" data-preset="grungy">Grungy</button>
	<button class="preset" data-preset="lomo">Lomo</button>
	<button class="preset" data-preset="sinCity">Sin City</button>
	<button class="preset" data-preset="pinhole">Pinhole</button>
	<button onclick="Reset();">Reset</button>
</div>
<div class="content">
	<figure>
		<img id="original" src=""><figcaption id="original-name"></figcaption>
	</figure>
	<figure>
		<img id="effect" src=""><figcaption id="effect-name"></figcaption>
	</figure>
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
	document.querySelector('#file').addEventListener('change', function(e) {
		if (window.File) {
			var input = document.querySelector('#file').files[0];
			var reader = new FileReader();
			reader.addEventListener('load', function(e) {
				document.getElementById('original').src = reader.result;
				document.getElementById('effect').src = reader.result;
				camanSet();
			}, true);
			document.getElementById('original-name').innerHTML = 'Original';
			document.getElementById('effect-name').innerHTML = 'Original';
			reader.readAsDataURL(input);
			$('#clear').show();
			$('#file-select').hide();
		}
	}, true);
});
function camanSet() {
	var caman = Caman('#effect');
	$('.preset').click(function() {
		var preset = $(this).data('preset');
		caman.revert(true);
		caman[preset]();
		caman.render();
		document.getElementById('effect-name').innerHTML = preset;
	});
	$('#effect').css('max-width', '100%');
}
function Reset() {
	document.getElementById('effect-name').innerHTML = 'Original';
	Caman('#effect', function () {
		this.revert(true);
	});
}
function Clear() {
	location.reload();
}
</script>