Cloudinaryのすごい作品集

Cloudinaryのデモやドキュメントを見ていると、こんなことできるのか！っていう感動の画像に出会うことがあります。サンプルをメモしておきます。面白いものを見つけたら追加していきます。

#1.集合写真の顔を認識して仮面を被らせる

画像1
![](https://res.cloudinary.com/cld-name/w_300/team.jpg)

画像2
![](https://res.cloudinary.com/cld-name/w_300/harlequinmask.jpg)

完成品
![https://res.cloudinary.com/cld-name/image/upload/l_harlequinmask,w_1.7,g_adv_eyes,fl_region_relative/team.jpg](https://res.cloudinary.com/cld-name/image/upload/c_scale,w_300/l_harlequinmask,w_1.7,g_adv_eyes,fl_region_relative/team.jpg)

:white_check_mark:Cloudinary URL
https\://res.cloudinary.com/cld-name/image/upload/l_harlequinmask,w_1.7,g_adv_eyes,fl_region_relative/team.jpg

参照元：
https://www.noupe.com/development/fly-image-overlays-using-cloudinary.html

#2. 画像を合成して、テキストメッセージを入れる

画像1
![](https://res.cloudinary.com/demo/w_300/brown_sheep)
画像2
![](https://res.cloudinary.com/demo/w_300/horses)
画像3
![](https://res.cloudinary.com/demo/w_300/white_chicken)
画像4
![](https://res.cloudinary.com/demo/w_300/butterfly.png)
画像5
![](https://res.cloudinary.com/demo/w_300/yellow_tulip.jpg)

完成品
![](https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/w_400,h_260,c_crop,r_20/l_text:Parisienne_35_bold:Memories%20from%20our%20trip,co_rgb:990C47,y_155/e_shadow/yellow_tulip.jpg)

:white_check_mark:Cloudinary URL
https\://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/w_400,h_260,c_crop,r_20/l_text:Parisienne_35_bold:Memories%20from%20our%20trip,co_rgb:990C47,y_155/e_shadow/yellow_tulip.jpg

参照元
https://cloudinary.com/documentation/image_transformation_reference

#3. 顔認識で顔周辺だけを抜きだして合成する
画像1
![](http://res.cloudinary.com/demo/w_300/face_left)
画像2
![](http://res.cloudinary.com/demo/w_300/butterfly)
画像3
![](http://res.cloudinary.com/demo/w_300/woman1)
画像4
![](http://res.cloudinary.com/demo/w_300/front_face)

完成品
![](http://res.cloudinary.com/demo/image/upload/c_thumb,g_faces,h_160,w_200/c_thumb,g_faces,h_160,l_butterfly,w_200/fl_layer_apply,g_north_west,x_210/c_thumb,g_faces,h_160,l_woman1,w_200/fl_layer_apply,g_north_west,y_170/c_thumb,g_faces,h_160,l_front_face,w_200/fl_layer_apply,g_north_west,x_210,y_170/face_left)

:white_check_mark:Cloudinary URL
http\://res.cloudinary.com/demo/image/upload/c_thumb,g_faces,h_160,w_200/c_thumb,g_faces,h_160,l_butterfly,w_200/fl_layer_apply,g_north_west,x_210/c_thumb,g_faces,h_160,l_woman1,w_200/fl_layer_apply,g_north_west,y_170/c_thumb,g_faces,h_160,l_front_face,w_200/fl_layer_apply,g_north_west,x_210,y_170/face_left

参照元：
https://support.cloudinary.com/hc/en-us/articles/203411372-How-can-I-create-a-collage-out-of-several-uploaded-images-

#4. 封筒の画像に、メッセージを合成する
しかも、画像の傾きに沿うように斜めにしつつ、入りきらないところは・・・にしてくれる。

元の画像
![https://res.cloudinary.com/demo/envelope.jpg](https://res.cloudinary.com/demo/w_300/envelope.jpg)

完成品
![https://res.cloudinary.com/demo/image/upload/w_200,y_30,a_9,h_150,g_north,c_fit,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat./w_300/envelope.jpg](https://res.cloudinary.com/demo/image/upload/w_300/w_200,y_30,a_9,h_150,g_north,c_fit,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat./w_300/envelope.jpg)

:white_check_mark:Cloudinary URL
https\://res.cloudinary.com/demo/image/upload/w_300/w_200,y_30,a_9,h_150,g_north,c_fit,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat./envelope.jpg

参照元：
https://cloudinary.com/documentation/image_transformations#adding_multi_line_text

#5. 文字認識をしてモザイクをかける

元画像
![](https://res.cloudinary.com/demo/w_300/black_car.jpg)

完成品
<img src="https://res.cloudinary.com/demo/image/upload/w_1520,h_1440,c_crop,g_west,x_50/e_pixelate_region:15,g_ocr_text/black_car.jpg" width="300px">

:white_check_mark:Cloudinary URL
https\://res.cloudinary.com/demo/image/upload/w_1520,h_1440,c_crop,g_west,x_50/e_pixelate_region:15,g_ocr_text/black_car.jpg

参照元：
https://cloudinary.com/documentation/ocr_text_detection_and_extraction_addon

#6. 六角形に切り抜く

元画像
![](https://res.cloudinary.com/demo/w_300/pasta.png)

六角形の画像
![](https://res.cloudinary.com/demo/hexagon_sample)

完成品
![](https://res.cloudinary.com/demo/image/upload/w_173,h_200,c_fill/l_hexagon_sample,fl_cutter/pasta.png)

:white_check_mark:Cloudinary URL
https\://res.cloudinary.com/demo/image/upload/w_173,h_200,c_fill/l_hexagon_sample,fl_cutter/pasta.png

参照元：
https://cloudinary.com/cookbook/custom_shapes_cropping

#7. プログレスバーを生成する

黒いバー画像
![](https://res.cloudinary.com/demo/black_bar.png)

黒のバー画像をグレーに変換
![](https://res.cloudinary.com/demo/w_300,h_40,c_scale,e_colorize,co_rgb:949494/black_bar.png)

黒のバー画像を青に変換
![](https://res.cloudinary.com/demo/w_0.5,h_1.0,c_scale,e_colorize,co_rgb:0D4190/black_bar.png)

黒のバー画像を灰色に変換
![](https://res.cloudinary.com/demo/w_400,h_100,c_scale,e_colorize,co_rgb:E9E8E8/black_bar.png)

完成品
![](https://res.cloudinary.com/demo/image/upload/w_300,h_40,c_scale,e_colorize,co_rgb:949494/l_black_bar,w_0.5,h_1.0,c_scale,e_colorize,co_rgb:0D4190,fl_relative,g_west/r_10/u_black_bar,w_400,h_100,c_scale,e_colorize,co_rgb:E9E8E8/l_text:Audiowide_20:50%2525,co_white,o_70/l_facebook:billclinton.png,w_40,h_40,r_max,g_north_west,x_7,y_7/r_20/e_shadow/w_300/black_bar.png)

:white_check_mark:Cloudinary URL
https\://res.cloudinary.com/demo/image/upload/w_300,h_40,c_scale,e_colorize,co_rgb:949494/l_black_bar,w_0.5,h_1.0,c_scale,e_colorize,co_rgb:0D4190,fl_relative,g_west/r_10/u_black_bar,w_400,h_100,c_scale,e_colorize,co_rgb:E9E8E8/l_text:Audiowide_20:50%2525,co_white,o_70/l_facebook:billclinton.png,w_40,h_40,r_max,g_north_west,x_7,y_7/r_20/e_shadow/black_bar.png

参照元：
https://cloudinary.com/cookbook/generate_a_profile_completeness_meter

#8. 自分の画像を背景にして重ねる１
元画像
![](https://res.cloudinary.com/demo/image/upload/w_300/sheep.jpg)

背景黒、透明度30
![](https://res.cloudinary.com/demo/image/upload/b_black,o_30/w_300/sheep.jpg)

丸く切り抜き
![](https://res.cloudinary.com/demo/image/upload/w_400,h_400,r_max,c_crop,e_vignette/w_300/sheep.jpg)

https://res.cloudinary.com/demo/image/upload/w_1520,h_1440,c_crop,g_west,x_50/e_pixelate_region:15,g_ocr_text/black_car.jpg


![](https://res.cloudinary.com/demo/image/upload/b_black,o_30/l_sheep.png,w_400,h_400,r_max,c_crop,e_vignette/w_300/sheep.jpg)

:white_check_mark:Cloudinary URL
https\://res.cloudinary.com/demo/image/upload/b_black,o_30/l_sheep.png,w_400,h_400,r_max,c_crop,e_vignette/sheep.jpg

参照元：
https://cloudinary.com/cookbook/change_image_opacity

#9. 自分の画像を背景にして重ねる２

元画像
![https://res.cloudinary.com/yakir/gradient_fade](https://res.cloudinary.com/yakir/w_300/gradient_fade)

再生マーク（ただし、黒線を白線に変換して重ねる）
![](https://res.cloudinary.com/yakir/play)

完成品
![https://res.cloudinary.com/yakir/image/upload/w_860,h_500,c_fill,g_auto,f_auto/e_gradient_fade,x_0.7,b_black/l_play,e_replace_color:white,g_south_east,x_50,y_50/v1544536291/gradient_fade](https://res.cloudinary.com/yakir/image/upload/w_860,h_500,c_fill,g_auto,f_auto/e_gradient_fade,x_0.7,b_black/l_play,e_replace_color:white,g_south_east,x_50,y_50/w_300/v1544536291/gradient_fade)

:white_check_mark:Cloudinary URL
https\://res.cloudinary.com/yakir/image/upload/w_860,h_500,c_fill,g_auto,f_auto/e_gradient_fade,x_0.7,b_black/l_play,e_replace_color:white,g_south_east,x_50,y_50/v1544536291/gradient_fade

参照元：
https://www.facebook.com/groups/CloudinaryCommunity/permalink/2255629794715762/


#10. 自分の画像の一部を拡大して背景にする
縦長の画像を横幅を合わせるために、自分の画像の一部を透明にして重ねる

元画像
![https://res.cloudinary.com/yakir/image/upload/axnt9emax1endre3m1wr](https://res.cloudinary.com/yakir/image/upload/w_300/axnt9emax1endre3m1wr)

薄くした画像
![https://res.cloudinary.com/yakir/c_fill,g_auto,h_628,w_1200,e_blur:500,b_white,o_80/e_art:al_dente/axnt9emax1endre3m1wr](https://res.cloudinary.com/yakir/c_fill,g_auto,h_628,w_1200,e_blur:500,b_white,o_80/e_art:al_dente/w_300/axnt9emax1endre3m1wr)

完成品
![https://res.cloudinary.com/yakir/image/upload/f_auto,q_auto/$img_current/c_fill,g_auto,h_628,w_1200,e_blur:500,b_white,o_80/e_art:al_dente/l_$img,h_628/axnt9emax1endre3m1wr](https://res.cloudinary.com/yakir/image/upload/f_auto,q_auto/$img_current/c_fill,g_auto,h_628,w_1200,e_blur:500,b_white,o_80/e_art:al_dente/l_$img,h_628/w_300/axnt9emax1endre3m1wr)

:white_check_mark:Cloudinary URL
https\://res.cloudinary.com/yakir/image/upload/f_auto,q_auto/\$img_current/c_fill,g_auto,h_628,w_1200,e_blur:500,b_white,o_80/e_art:al_dente/l_$img,h_628/axnt9emax1endre3m1wr

参照元：
https://www.facebook.com/groups/CloudinaryCommunity/permalink/2244940385784703/