Cloudinaryのデモやドキュメントを見ていると、こんなことできるのか!っていう感動の画像に出会うことがあります。サンプルをメモしておきます。面白いものを見つけたら追加していきます。
1.集合写真の顔を認識して仮面を被らせる
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. 画像を合成して、テキストメッセージを入れる
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. 顔認識で顔周辺だけを抜きだして合成する
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
4. 封筒の画像に、メッセージを合成する
しかも、画像の傾きに沿うように斜めにしつつ、入りきらないところは・・・にしてくれる。
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. 文字認識をしてモザイクをかける
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. 六角形に切り抜く
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. プログレスバーを生成する
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
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
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. 自分の画像の一部を拡大して背景にする
縦長の画像を横幅を合わせるために、自分の画像の一部を透明にして重ねる
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/