晴歩雨描

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

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

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

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

http://ok2nd.890m.com/soratama/get.php

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

http://ok2nd.890m.com/soratama/get.php?img=(画像ファイルのURL)

以下は使用例。

http://ok2nd.890m.com/soratama/get.php?img=http://home2nd.html.xdomain.jp/photo/320.jpg

f:id:art2nd:20180816122316j:plain

【技術的な補足】

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;
?>