PHP+jQueryで画像もクロスサイトの壁を超える！

前回の記事から発展して、外部サイトの画像も同一ドメイン内にある扱いにしてしまおうという内容です。

やっていることは前回とほぼ同じです。
1.PHPで外部サイトの画像を取得
2.jQueryでajax

手順1：PHPで外部サイトの画像を取得

<?php
    if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
        $img = file_get_contents($_GET["url"]);
        $enc_img = base64_encode($img);
        $imginfo = getimagesize('data:application/octet-stream;base64,' . $enc_img);
        echo '<img src="data:' . $imginfo['mime'] . ';base64,'.$enc_img.'">';
    }else{
        echo "error";
    }
?>

前回よりもちょっとだけコードが増えました。
増えた部分について、順に解説していきます。

$enc_img = base64_encode($img);

読んだまま…ではあるのですが、取得した画像データを「base64」に変換します。
これで同一ドメイン内で画像を生成した扱いになるというわけです。
正確にはhtml（php）内に画像を埋め込んだ…でしょうか。

$imginfo = getimagesize('data:application/octet-stream;base64,' . $enc_img);

画像として扱うのに必要な情報を取得します。
getimagesizeという関数名ですが、画像の幅や高さ、MIMEタイプも返してくれます。
返り値は配列になっています。
具体的な内容は以下のとおり。

3番目とmimeだけあれば一通り事は足りそうですが、参考まで。

echo '<img src="data:' . $imginfo['mime'] . ';base64,'.$enc_img.'">';

取得したMIMEタイプとbase64のコードを利用して、通常の画像として出力します。
ここまでで、外部サイトの画像を同一ドメイン内の画像として出力まで完了したことになります。

$imginfo = pathinfo($_GET["url"]);
$img_name = $imginfo['basename'];

file_put_contents('保存先ディレクトリ' . $img_name, $img)

echoで出力しないで画像としてディレクトリ内に保存するパターンだと、上記のようなコードとなります。
私は時々やらかすのですが、保存先ディレクトリのパーミッション設定をお忘れなく。

ファイル名を変更しないとセキュリティ的によろしくないようなので、保存するときはファイル名を指定してあげましょう。
タイムスタンプで変更するのがお手軽ではないでしょうか。

保存したあとで普通にimgタグのsrc属性に指定してあげれば、画像として表示できるはずです。

手順2：jQueryでajax

echoで出力した場合、ajaxでsrc属性を読み取ることができますので、imgタグをappendなどして、src属性に入れてあげる形でも利用できます。
その場合、普通にHTML内にbase64形式で記述するのと同様の扱いになります。

$.ajax({
    url: "前述のPHPファイル名?url="+url
}).then(function(huga){
        $('hogehoge').append(huga);
    }
});

素直にimgタグをまるごと読み込むならこれだけでOKです。
楽ちん！

ちょっと工夫すればeachを利用して全ての画像をbase64に変換することも可能です！
外部サイトの画像を読み込んでいる部分だけ変換するのが現実的だとは思いますが…