JavaScript Libraries Version 2.4.0

Jan 09, 2018

Our JavaScript libraries have been updated to version 2.4.0

Some new functionalities and features:

  • Support fetch URL in layers
  • Support SEO suffix for private images

Python SDK Version 1.10.0

Jan 01, 2018

Our Python SDK has been updated to version 1.10.0.

New functionalities and features:

  • Add Publish API
  • Add notification_url param for update API
  • Add transformations parameter to delete_resources APIs
  • Add support for fetch overlay/underlay
  • Add allow_missing and skip_transformation_name parameters to Archive API
  • Add support of quality_override param for update and explicit API

iOS & Angular SDK Versions

Dec 26, 2017
  • Our Angular SDK has been updated to match Angular 5.
  • Our iOS SDK has been updated to v2.0.4, support for chunked upload (upload_large) and Swift 4 has been added.

You can also find some new iOS Docs, such as:

.NET SDK v1.1.1

Dec 20, 2017

Our .NET SDK has been updated to v1.1.1, supporting .NET core and standard libraries.

  • The library has been split to a Core Library and Standard Library.
  • The standard library is fully backward compatible with the previous version.

You can read more about .NET Core and .NET Standard and how they differ from the .NET Framework here

Amazon Rekognition Image Moderation, Tagging and Celebrity Detection

Dec 11, 2017

We've added to our add-on marketplace some really cool Amazon Rekognition add-ons that enable you to:

Automate Image Moderation with Amazon Rekognition: Amazon Rekognition's image moderation service is based on deep learning algorithms, and fully integrated into Cloudinary's image management and manipulation pipeline, making sure that no offensive photos are displayed to your web and mobile viewers. Check it out here.

Automatically tag images with Amazon Rekognition: This add-on utilizes deep neural network models to detect and tag thousands of people, objects and scenes in your images, and lets you easily build powerful visual search and discovery into your applications. You can automatically categorize and tag images using the Amazon Rekognition Auto Tagging add-on, and specifically identify celebrities with the Celebrity Detection add-on.

Rekognition Tagging and Celebrity Detection

Cloudinary SDK for Android

Dec 05, 2017

Cloudinary's latest version of the Android SDK introduces the Media Manger, which lets you easily implement background upload functionality and set upload policies in your app to ensure the best user experience. With Cloudinary's Dynamic URL feature, the delivered resource can be generated on the fly, eliminating the need to pre-generate all the various versions of your resources for different mobile devices.

You can read more about the Cloudinary Android SDK v2.0 here and here.

New Android SDK

Introducing the complete video solution for web and mobile developers

Nov 28, 2017

We are excited to introduce the next generation of our cloud-based video management service. Even more advanced real-time video transcoding together with a modern video player, live video streaming, AI-based video tagging and transcription, and more; all aimed at simplifying the video workflow for web and mobile developers while improving and enhancing the end-user experience.

Video Launch

Cloudinary's complete cloud-based video management solution for developers now includes:

  • Customizable video player with user engagement analytics: Check out the Demo and Docs
  • Live video streaming directly from web and mobile apps: Check out the Demo here.
    Note that the Live Video Streaming is currently in Beta.
  • AI based video tagging and transcription Try Tagging and Transcription for free, and read more about it here: Tagging Docs and Transcription Docs
  • Real-time video transcoding and manipulation via CDN delivery URLs: Check out the Demo and Docs
  • Video upload API and UI widget - upload your videos directly to cloud storage
  • Programmable and interactive interface for managing video assets

Read all about it here

HEIF format image upload support

Nov 20, 2017

Support for the new HEIF (HEIC) image format now available for any image uploaded to Cloudinary.

HEIF (High Efficiency Image Format) is an iOS11 iPhone generated format, offering a more streamlined way to store image files. Using advanced, modern compression methods it allows digital photographs to be created in smaller files sizes, all while retaining higher image quality than its JPEG alternative. HEIF is based on the HEVC (High Efficiency Video Compression) or H.265 video format.

Currently only reading (decoding) of the HEIF file is supported, while generating derived images out of the HEIF files using other formats such as JPEG.

Soon to be released - full support for HEIF, stay tuned!

Removal resistant watermarks

Nov 14, 2017

Some of you may have heard of the article recently published On the Effectiveness of Visible Watermarks, showing that watermarks that are consistently used can actually be removed automatically. As this is a concern for many of our customers, we came up with Removal Resistant Watermarks.

This effect smartly and randomly modifies image overlays in order to make the watermarks visible yet much harder to remove.

Running the effect: e_anti_removal generates a different result for each execution even if the transformation is the same. The effect accepts a level parameter: e_anti_removal:[level] between 0-100, with the default level being 50:

With a regular watermark:

Ruby:
cl_image_tag("coast.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>"cloudinary_icon", :width=>200, :effect=>"brightness:200", :opacity=>60}
  ])
PHP:
cl_image_tag("coast.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>"cloudinary_icon", "width"=>200, "effect"=>"brightness:200", "opacity"=>60)
  )))
Python:
CloudinaryImage("coast.jpg").image(transformation=[
  {"width": 500, "crop": "scale"},
  {"overlay": "cloudinary_icon", "width": 200, "effect": "brightness:200", "opacity": 60}
  ])
Node.js:
cloudinary.image("coast.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon", width: 200, effect: "brightness:200", opacity: 60}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay("cloudinary_icon").width(200).effect("brightness:200").opacity(60)).imageTag("coast.jpg");
JS:
cloudinary.imageTag('coast.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon", width: 200, effect: "brightness:200", opacity: 60}
  ]}).toHtml();
jQuery:
$.cloudinary.image("coast.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon", width: 200, effect: "brightness:200", opacity: 60}
  ]})
React:
<Image publicId="coast.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60" />
</Image>
Angular:
<cl-image public-id="coast.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay("cloudinary_icon").Width(200).Effect("brightness:200").Opacity(60)).BuildImageTag("coast.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay("cloudinary_icon").width(200).effect("brightness:200").opacity(60)).generate("coast.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("cloudinary_icon").setWidth(200).setEffect("brightness:200").setOpacity(60)).generate("coast.jpg")!, cloudinary: cloudinary)
Regular Watermark

With a Removal Resistant Watermark at the default value (50):

Ruby:
cl_image_tag("coast.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>"cloudinary_icon", :width=>200, :effect=>"brightness:200", :opacity=>60},
  {:effect=>"anti_removal:50"},
  {:flags=>"layer_apply"}
  ])
PHP:
cl_image_tag("coast.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>"cloudinary_icon", "width"=>200, "effect"=>"brightness:200", "opacity"=>60),
  array("effect"=>"anti_removal:50"),
  array("flags"=>"layer_apply")
  )))
Python:
CloudinaryImage("coast.jpg").image(transformation=[
  {"width": 500, "crop": "scale"},
  {"overlay": "cloudinary_icon", "width": 200, "effect": "brightness:200", "opacity": 60},
  {"effect": "anti_removal:50"},
  {"flags": "layer_apply"}
  ])
Node.js:
cloudinary.image("coast.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon", width: 200, effect: "brightness:200", opacity: 60},
  {effect: "anti_removal:50"},
  {flags: "layer_apply"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay("cloudinary_icon").width(200).effect("brightness:200").opacity(60).chain()
  .effect("anti_removal:50").chain()
  .flags("layer_apply")).imageTag("coast.jpg");
JS:
cloudinary.imageTag('coast.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon", width: 200, effect: "brightness:200", opacity: 60},
  {effect: "anti_removal:50"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("coast.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon", width: 200, effect: "brightness:200", opacity: 60},
  {effect: "anti_removal:50"},
  {flags: "layer_apply"}
  ]})
React:
<Image publicId="coast.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60" />
  <Transformation effect="anti_removal:50" />
  <Transformation flags="layer_apply" />
</Image>
Angular:
<cl-image public-id="coast.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" width="200" effect="brightness:200" opacity="60">
  </cl-transformation>
  <cl-transformation effect="anti_removal:50">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay("cloudinary_icon").Width(200).Effect("brightness:200").Opacity(60).Chain()
  .Effect("anti_removal:50").Chain()
  .Flags("layer_apply")).BuildImageTag("coast.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay("cloudinary_icon").width(200).effect("brightness:200").opacity(60).chain()
  .effect("anti_removal:50").chain()
  .flags("layer_apply")).generate("coast.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("cloudinary_icon").setWidth(200).setEffect("brightness:200").setOpacity(60).chain()
  .setEffect("anti_removal:50").chain()
  .setFlags("layer_apply")).generate("coast.jpg")!, cloudinary: cloudinary)
Anti Removal Watermark

Curving images

Nov 09, 2017

This cool feature allows you to create curved images or text with the transformation e_distort:arc:[degrees].

For example, this image has been curved to 180 degrees:

Ruby:
cl_image_tag("one_way_sign.png", :effect=>"distort:arc:-180")
PHP:
cl_image_tag("one_way_sign.png", array("effect"=>"distort:arc:-180"))
Python:
CloudinaryImage("one_way_sign.png").image(effect="distort:arc:-180")
Node.js:
cloudinary.image("one_way_sign.png", {effect: "distort:arc:-180"})
Java:
cloudinary.url().transformation(new Transformation().effect("distort:arc:-180")).imageTag("one_way_sign.png");
JS:
cloudinary.imageTag('one_way_sign.png', {effect: "distort:arc:-180"}).toHtml();
jQuery:
$.cloudinary.image("one_way_sign.png", {effect: "distort:arc:-180"})
React:
<Image publicId="one_way_sign.png" >
  <Transformation effect="distort:arc:-180" />
</Image>
Angular:
<cl-image public-id="one_way_sign.png" >
  <cl-transformation effect="distort:arc:-180">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("distort:arc:-180")).BuildImageTag("one_way_sign.png")
Android:
MediaManager.get().url().transformation(new Transformation().effect("distort:arc:-180")).generate("one_way_sign.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("distort:arc:-180")).generate("one_way_sign.png")!, cloudinary: cloudinary)
Curved image

And The Beatles loop with lyrics:

Ruby:
cl_image_tag("the_beatles.jpg", :transformation=>[
  {:width=>400, :height=>400, :gravity=>"auto", :crop=>"fill"},
  {:overlay=>"text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on", :color=>"yellow", :effect=>"distort:arc:350"}
  ])
PHP:
cl_image_tag("the_beatles.jpg", array("transformation"=>array(
  array("width"=>400, "height"=>400, "gravity"=>"auto", "crop"=>"fill"),
  array("overlay"=>"text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on", "color"=>"yellow", "effect"=>"distort:arc:350")
  )))
Python:
CloudinaryImage("the_beatles.jpg").image(transformation=[
  {"width": 400, "height": 400, "gravity": "auto", "crop": "fill"},
  {"overlay": "text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on", "color": "yellow", "effect": "distort:arc:350"}
  ])
Node.js:
cloudinary.image("the_beatles.jpg", {transformation: [
  {width: 400, height: 400, gravity: "auto", crop: "fill"},
  {overlay: "text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on", color: "yellow", effect: "distort:arc:350"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(400).height(400).gravity("auto").crop("fill").chain()
  .overlay("text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on").color("yellow").effect("distort:arc:350")).imageTag("the_beatles.jpg");
JS:
cloudinary.imageTag('the_beatles.jpg', {transformation: [
  {width: 400, height: 400, gravity: "auto", crop: "fill"},
  {overlay: "text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on", color: "yellow", effect: "distort:arc:350"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("the_beatles.jpg", {transformation: [
  {width: 400, height: 400, gravity: "auto", crop: "fill"},
  {overlay: "text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on", color: "yellow", effect: "distort:arc:350"}
  ]})
React:
<Image publicId="the_beatles.jpg" >
  <Transformation width="400" height="400" gravity="auto" crop="fill" />
  <Transformation overlay="text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on" color="yellow" effect="distort:arc:350" />
</Image>
Angular:
<cl-image public-id="the_beatles.jpg" >
  <cl-transformation width="400" height="400" gravity="auto" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on" color="yellow" effect="distort:arc:350">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Height(400).Gravity("auto").Crop("fill").Chain()
  .Overlay("text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on").Color("yellow").Effect("distort:arc:350")).BuildImageTag("the_beatles.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(400).height(400).gravity("auto").crop("fill").chain()
  .overlay("text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on").color("yellow").effect("distort:arc:350")).generate("the_beatles.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setHeight(400).setGravity("auto").setCrop("fill").chain()
  .setOverlay("text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on").setColor("yellow").setEffect("distort:arc:350")).generate("the_beatles.jpg")!, cloudinary: cloudinary)
Curved text

More Updates