任意のサイトの写真で宙玉(そらたま)写真が作れるサイトを作ってみた。

昨日、JavaScriptで宙玉(そらたま)写真を作れる「SORA-TAMA Transform (Fish-Eye)」を試してみた。

この機能を、写真のアップロードではなく、任意のサイトの写真のURLを直接指定して使えるものを作ってみた。

https://ok2nd.sakura.ne.jp/soratama/

以下のようにして使う。JPEG画像のみ対応。指定した画像の取り込みにかなり時間がかかります。極力小さな画像でお試しください。下の例で使っている画像は320x214ピクセルです。指定したURLの画像ファイルの有無チェック等エラー処理はしていません。

https://ok2nd.sakura.ne.jp/soratama/get.php?img=（画像ファイルのURL）

以下は使用例。

https://ok2nd.sakura.ne.jp/soratama/get.php?img=https://ok2nd.sakura.ne.jp/soratama/photo/320.jpg

【技術的な補足】

HTMLの<img>タグのsrcに直接別サイトの画像のURLを入れて処理しようとすると、クロスドメイン（CORS：Cross-Origin Resource Sharing）の制約にはじかれる。なので、PHPのfile_get_contents()で取り込む方式でこれを回避。そのために、画像の取り込みに時間がかかる。

PHPコードサンプル：エラー処理は省略。

≪hoge.php?img=hoge.ipeg≫

	<img src="image.php?img=<?= $_GET['img'] ?>">

≪image.php≫

<?php
	$img = file_get_contents($_GET['img']);
	header('Content-type: image/jpeg');
	echo $img;
?>