LoginSignup
3
6

More than 3 years have passed since last update.

Cloudinaryのすごい作品集

Last updated at Posted at 2020-01-05

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

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

画像1

画像2

完成品
https://res.cloudinary.com/cld-name/image/upload/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

画像2

画像3

画像4

画像5

完成品

: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

画像2

画像3

画像4

完成品

: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/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

: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. 文字認識をしてモザイクをかける

元画像

完成品

: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. 六角形に切り抜く

元画像

六角形の画像

完成品

: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. プログレスバーを生成する

黒いバー画像

黒のバー画像をグレーに変換

黒のバー画像を青に変換

黒のバー画像を灰色に変換

完成品

: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. 自分の画像を背景にして重ねる1

元画像

背景黒、透明度30

丸く切り抜き

: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. 自分の画像を背景にして重ねる2

元画像
https://res.cloudinary.com/yakir/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/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/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/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

: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/

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6