Use images as text textures

Instead of coloring your text with a solid color, fill it with an image and give it an interesting texture. How? Choose an image as your text texture, dynamically add a text overlay as explained in the Dynamic text overlay blog post, and set the flags parameter to cutter (fl_cutter in URLs).

Cloudinary allows you to dynamically generate an image out of any text string on the fly in the cloud. You can set the text's font color to any solid color. In addition, Cloudinary also supports generating a text while using an image to fill the font instead of a solid color.

Here's an example. This is an image we'd like to use for our text:

Ruby:
cl_image_tag("yellow_tulip.png")
PHP:
cl_image_tag("yellow_tulip.png")
Python:
CloudinaryImage("yellow_tulip.png").image()
Node.js:
cloudinary.image("yellow_tulip.png")
Java:
cloudinary.url().imageTag("yellow_tulip.png")
JS:
cl.imageTag('yellow_tulip.png').toHtml();
jQuery:
$.cloudinary.image("yellow_tulip.png")
React:
<Image publicId="yellow_tulip.png" >

</Image>
Angular:
<cl-image public-id="yellow_tulip.png" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("yellow_tulip.png")
Original image

We add the text by setting the overlay parameter (l in URLs) to text:<text_params>, where 'text_params' are the font style's parameters (e.g., font family, size, decoration and more). Setting the flags parameter to cutter (fl_cutter in URLs) will mask the image by the text string:

Ruby:
cl_image_tag("yellow_tulip.png", :overlay=>"text:Coustard_200_bold:Flowers", :flags=>"cutter")
PHP:
cl_image_tag("yellow_tulip.png", array("overlay"=>"text:Coustard_200_bold:Flowers", "flags"=>"cutter"))
Python:
CloudinaryImage("yellow_tulip.png").image(overlay="text:Coustard_200_bold:Flowers", flags="cutter")
Node.js:
cloudinary.image("yellow_tulip.png", {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Coustard_200_bold:Flowers").flags("cutter")).imageTag("yellow_tulip.png")
JS:
cl.imageTag('yellow_tulip.png', {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"}).toHtml();
jQuery:
$.cloudinary.image("yellow_tulip.png", {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"})
React:
<Image publicId="yellow_tulip.png" >
        <Transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter" />
</Image>
Angular:
<cl-image public-id="yellow_tulip.png" >
        <cl-transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter">
        </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Coustard_200_bold:Flowers").Flags("cutter")).BuildImageTag("yellow_tulip.png")
Text texture


The textures aren't limited to uploaded images only - you can also fetch images from any remote HTTP URL. Here's a remote URL example (from Wikimedia Commons):

Wikimedia commons image

We can use the following to generate a text string out of this remote image. Note that for remotely fetched images, we first converted the image to PNG by setting the fetch_format to png (f_png in URLs). In addition, a nice shadow effect was added:

Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG", :type=>"fetch", :transformation=>[
  {:fetch_format=>"png"},
  {:width=>800, :crop=>"scale"},
  {:overlay=>"text:Unkempt_250_bold:Water", :flags=>"cutter", :effect=>"shadow"}
  ])
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG", array("type"=>"fetch", "transformation"=>array(
  array("fetch_format"=>"png"),
  array("width"=>800, "crop"=>"scale"),
  array("overlay"=>"text:Unkempt_250_bold:Water", "flags"=>"cutter", "effect"=>"shadow")
  )))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG").image(type="fetch", transformation=[
  {"fetch_format": "png"},
  {"width": 800, "crop": "scale"},
  {"overlay": "text:Unkempt_250_bold:Water", "flags": "cutter", "effect": "shadow"}
  ])
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG", {type: "fetch", transformation: [
  {fetch_format: "png"},
  {width: 800, crop: "scale"},
  {overlay: "text:Unkempt_250_bold:Water", flags: "cutter", effect: "shadow"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .fetchFormat("png").chain()
  .width(800).crop("scale").chain()
  .overlay("text:Unkempt_250_bold:Water").flags("cutter").effect("shadow")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG")
JS:
cl.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG', {type: "fetch", transformation: [
  {fetch_format: "png"},
  {width: 800, crop: "scale"},
  {overlay: "text:Unkempt_250_bold:Water", flags: "cutter", effect: "shadow"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG", {type: "fetch", transformation: [
  {fetch_format: "png"},
  {width: 800, crop: "scale"},
  {overlay: "text:Unkempt_250_bold:Water", flags: "cutter", effect: "shadow"}
  ]})
React:
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG" type="fetch">
        <Transformation fetch_format="png" />
        <Transformation width="800" crop="scale" />
        <Transformation overlay="text:Unkempt_250_bold:Water" flags="cutter" effect="shadow" />
</Image>
Angular:
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG" type="fetch">
        <cl-transformation fetch_format="png">
        </cl-transformation>
        <cl-transformation width="800" crop="scale">
        </cl-transformation>
        <cl-transformation overlay="text:Unkempt_250_bold:Water" flags="cutter" effect="shadow">
        </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .FetchFormat("png").Chain()
  .Width(800).Crop("scale").Chain()
  .Overlay("text:Unkempt_250_bold:Water").Flags("cutter").Effect("shadow")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Drops_Imapct.JPG/1200px-Drops_Imapct.JPG")
Fetch + texture

by Itay Taragano