[herokuアドオン]cloudinaryで画像のアップロードと表示[PHP]

PHPを利用して、cloudinaryにアップロードして、画像を表示させてみた。

インストール

composerを利用。

{
  "require": {
    "cloudinary/cloudinary_php": "dev-master"
  }
}

インストール。

$ composer install
Loading composer repositories with package information
Installing dependencies (including require-dev)
  - Installing cloudinary/cloudinary_php (dev-master cfa2fd7)
    Cloning cfa2fd7d4043844b46411c213795eafb648703df

Writing lock file
Generating autoload files

herokuにインストール

アドオンを追加。

add-on

$ heroku addons:create cloudinary:starter
Creating unwinding-truly-5886... done
Adding unwinding-truly-5886 to your-app-name... done
Setting CLOUDINARY_URL and restarting your-app-name... done, v3
Use `heroku addons:docs cloudinary` to view documentation.

環境変数のCLOUDINARY_URLでアカウント情報を取得できる。

アップロード

以下のコードを記述し、アクセス。
flickr上にある画像をアップロードしている。

<?php
require '../vendor/autoload.php';

use Cloudinary;
use Cloudinary\Uploader;

$account = parse_url(getenv('CLOUDINARY_URL'));

\Cloudinary::config(array(
    "cloud_name" => $account['host'],
    "api_key" => $account['user'],
    "api_secret" => $account['pass']
));

$ret = \Cloudinary\Uploader::upload("https://farm9.staticflickr.com/8748/16531734384_afdd2327e5_z.jpg");

print_r($ret);

で、結果は以下のように返ってくる。

Array ( 
  [public_id] => xa9kfgp9jvxouekmrrqu 
  [version] => 1430964069 
  [signature] => 088135f7c32ad04436a18eb35d05b28bfd9e7870 
  [width] => 640 
  [height] => 480 
  [format] => jpg 
  [resource_type] => image 
  [created_at] => 2015-05-07T02:01:09Z 
  [tags] => Array ( ) 
  [bytes] => 174550 
  [type] => upload 
  [etag] => 6fdff26d1bd4d9cc55c3c613743a8dc1 
  [url] => http://res.cloudinary.com/harslxcej/image/upload/v1430964069/xa9kfgp9jvxouekmrrqu.jpg 
  [secure_url] => https://res.cloudinary.com/harslxcej/image/upload/v1430964069/xa9kfgp9jvxouekmrrqu.jpg 
)

URLでの表示

アップロードが完了したものはアクセスするURLを変更することでサイズなどを変更できる。

オリジナル

http://res.cloudinary.com/dalir2yty/image/upload/xa9kfgp9jvxouekmrrqu_nml8db.jpg

オリジナル

リサイズ

http://res.cloudinary.com/dalir2yty/image/upload/w_100,h_100/xa9kfgp9jvxouekmrrqu_nml8db.jpg

リサイズ

角丸

http://res.cloudinary.com/dalir2yty/image/upload/w_320,h_240,c_fill,r_20/xa9kfgp9jvxouekmrrqu_nml8db.jpg

利用できるタグなどは以下を参照。
Image transformations | Cloudinary

PHPでURLの生成

上記のURLをPHPのコードで生成する。

cl_image_tag

cl_image_tagを利用すると、<img>のタグごと出力される。

$public_id = 'xa9kfgp9jvxouekmrrqu';
echo cl_image_tag($public_id, array( "alt" => "Sample Image" ));

結果

<img src='https://res.cloudinary.com/harslxcej/image/upload/xa9kfgp9jvxouekmrrqu' alt='Sample Image'/>

加工

cl_image_tag($public_id, array(
    "width" => 100,
    "height" => 100,
    "crop" => "fill",
    "effect" => "grayscale"
));

結果

<img src='http://res.cloudinary.com/dalir2yty/image/upload/c_fill,e_grayscale,h_100,w_100/xa9kfgp9jvxouekmrrqu_nml8db.jpg' height='100' width='100'/>

cloudinary_url

URLを直接取得するには、cloudinary_urlを使用する。

echo cloudinary_url($public_id);
echo cloudinary_url($public_id, array(
    "width" => 100,
    "height" => 100,
    "crop" => "fill",
    "effect" => "grayscale"
));

その他、詳しくは以下を参照。

PHP image manipulation | Cloudinary

参考

PHP integration | Cloudinary
PHPフレームワークのPhalconで、写真ストレージクラウドのCloudinaryと連携一言多いプログラマーの独り言
 cloudinary/cloudinary_php