{"id":21472,"date":"2017-02-23T15:55:40","date_gmt":"2017-02-23T15:55:40","guid":{"rendered":"http:\/\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary"},"modified":"2023-08-30T04:06:27","modified_gmt":"2023-08-30T11:06:27","slug":"the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary","title":{"rendered":"The power of ImageMagick with the speed and simplicity of Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Most developers are familiar with <a href=\"https:\/\/www.imagemagick.org\/script\/index.php\">ImageMagick<\/a>, a very capable open source software suite that they can use to manage and transform images.<\/p>\n<p>The functionality of ImageMagick is typically utilized from the command-line, but wrappers have been written for a wide selection of programming languages, making ImageMagick a very popular choice among developers.<\/p>\n<p>Often programmers use ImageMagick for simple operations such as scaling or stretching an image to fit specific dimensions.\nBut as we\u2019ll see in this post, there are many advanced techniques available, such as <a href=\"https:\/\/cloudinary.com\/glossary\/unsharp-masking\">\u2018masking\u2019<\/a>, pixel \u2018blending\u2019 and others that enable you to achieve more complex and extremely useful effects.<\/p>\n<p>In this post, I\u2019ll share three examples of image transformations using <a href=\"https:\/\/github.com\/rmagick\/rmagick\">RMagick<\/a> (a Ruby wrapper for ImageMagick). I will start with a sepia effect combined with an overlay image, and follow that with increasingly complex transformations such as creating text textures and pixelating faces.  For each of these examples, I\u2019ll compare what it takes to address the same challenges using Cloudinary.  With its cloud-based platform, Cloudinary eliminates the complexity of coding and the hassles associated with installation. Cloudinary also saves developers time, enabling them to leverage a single line of code to complete the image transformations .<\/p>\n<h3>Dependencies and Installation<\/h3>\n<p>You can find the full source code for this blog post in <a href=\"https:\/\/github.com\/Cloudinary\/imagemagick_blog\">Cloudinary\u2019s official repository in Github<\/a>.\nInstalling the dependencies for the examples is not a trivial task, mostly because of OpenCV. But for simplicity\u2019s sake, I\u2019ve containerized both ImageMagick and OpenCV dependencies, so you only need to have <a href=\"https:\/\/www.docker.com\/\">Docker<\/a> installed.<\/p>\n<h2>Example 1: Sepia effect with text overlay<\/h2>\n<p>The first example describes a common use case: Adding a photographer\u2019s name to the bottom right corner of an image.<br \/>\nTo make the example more interesting, we first want to apply a sepia effect.<br \/>\nThe final result should look something like this:<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/sepia_and_overlay.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/sepia_and_overlay.png\" alt=\"Sepia and Overlay\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"333\"\/><\/a><\/p>\n<h3>The ImageMagick way:<\/h3>\n<p>The example is built using two main methods:<\/p>\n<ul>\n<li>\n<strong><code>add_author_to_image!<\/code><\/strong>, which receives a <code>Magick::Image<\/code> object and the <code>author<\/code> name and returns a new <code>Magick::Image<\/code> object that contains the resulting image &#8211; the original image with the author name overlay applied.<\/li>\n<li>\n<strong><code>sepiatize_image!<\/code><\/strong>, which receives a <code>Magick::Image<\/code> object and returns the modified image object with the sepia effect applied.<\/li>\n<\/ul>\n<p>First, let\u2019s describe <strong><code>add_author_to_image!<\/code><\/strong>:<br \/>\nUsing ImageMagick, I create a <code>Draw<\/code> object, which will enable me to put the text over the original image.<br \/>\nI also select the color \u201cwhite\u201d, \u201cArial\u201d as the font, and choose my font size.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">text = Magick::Draw.<span class=\"hljs-keyword\">new<\/span>\ntext.fill = <span class=\"hljs-string\">\"white\"<\/span>\ntext.font_family = <span class=\"hljs-string\">\"Arial\"<\/span>\ntext.pointsize = <span class=\"hljs-number\">30<\/span>\ntext.gravity = Magick::CenterGravity\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The overlay image size should match the text dimensions, so I need to calculate the text dimensions before creating the overlay image:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">metrics = text.get_type_metrics(author)\n<\/code><\/span><\/pre>\n<p>I then create the overlay image and set its background color to a semi-transparent black to ensure that the text will be visible on top of any image.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">author_overlay = Magick::Image.<span class=\"hljs-keyword\">new<\/span>(metrics.width, metrics.height) {\n  <span class=\"hljs-keyword\">self<\/span>.background_color = <span class=\"hljs-string\">\"#00000080\"<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, I draw the text over the the semi-transparent background.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">text<\/span><span class=\"hljs-selector-class\">.annotate<\/span>(<span class=\"hljs-selector-tag\">author_overlay<\/span>, 0, 0, 0, 0, <span class=\"hljs-selector-tag\">author<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then I position the author overlay on top of the image:<\/p>\n<p>I use the <code>composite<\/code> method to combine the two images in a certain way.  The destination image is our input image.  I have to tell ImageMagick that I want to position the author overlay in the \u201csoutheast\u201d edge of the image.\n<code>Magick::OverCompositeOp<\/code> tells ImageMagick that the source image (<code>author_overlay<\/code>) should override the destination image (our input image) with the source image\u2019s pixels, which makes the author name visible on top of the image.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">image<\/span><span class=\"hljs-selector-class\">.composite<\/span>!(<span class=\"hljs-selector-tag\">author_overlay<\/span>, <span class=\"hljs-selector-tag\">Magick<\/span><span class=\"hljs-selector-pseudo\">::SouthEastGravity<\/span>, <span class=\"hljs-selector-tag\">Magick<\/span><span class=\"hljs-selector-pseudo\">::OverCompositeOp)<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The final step is destroying the author image object overlay. It\u2019s important to clean up any temporary image objects. I don\u2019t need the overlay anymore because I\u2019ve combined the images and flattened them. Destroying an image object is done using the <code>destroy!<\/code> method:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">author_overlay<\/span><span class=\"hljs-selector-class\">.destroy<\/span>!\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>What\u2019s missing now is the sepia effect (applied by the <code>sepiatize_image!<\/code> method).<br \/>\nImageMagick offers a method for setting sepia tone, so I chose the sepia level and set the desired effect.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">SEPIA_LEVEL = Magick::QuantumRange * <span class=\"hljs-number\">60<\/span> \/ <span class=\"hljs-number\">100<\/span>\ndef sepiatize_image!(image)\n  image.sepiatone(SEPIA_LEVEL)\nend\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>After defining the two methods, we need to apply both operations on our original image and write the result to a file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">add_author_to_image<\/span>!(<span class=\"hljs-selector-tag\">sepiatize_image<\/span>!(<span class=\"hljs-selector-tag\">source_image<\/span>), <span class=\"hljs-selector-tag\">author<\/span>)<span class=\"hljs-selector-class\">.write<\/span>(<span class=\"hljs-selector-tag\">dest<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Whew! I\u2019m sweating a bit, but I managed to get the result I wanted.<\/p>\n<h3>The Cloudinary way:<\/h3>\n<p>If this is your first time using Cloudinary, you\u2019ll need <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">sign up for an account<\/a> (start with a free one), and use the upload API to upload your image. You can use the https API with no installation required, or <a href=\"https:\/\/cloudinary.com\/documentation\">download and install the SDK<\/a> for your favorite framework (a few quick configurations required).<\/p>\n<p>Here\u2019s how you would upload the yellow_tulip.png file to your account in the cloud using the Ruby SDK:`<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">Cloudinary::Uploader.upload(<span class=\"hljs-string\">'yellow_tulip.png'<\/span>, :<span class=\"hljs-function\"><span class=\"hljs-params\">public_id<\/span> =&gt;<\/span> <span class=\"hljs-string\">'yellow_tulip'<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now, let\u2019s see what it takes to deliver that image in sepia with the photographer\u2019s name in the corner. Ready?<\/p>\n<p>![Sepia and Overlay]\n(<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_sepia:60\/l_text:Arial_30:John%20Doe%20Photography%20%C2%AE,co_white,g_south_east,b_rgb:00000090\/yellow_tulip.png\">https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_sepia:60\/l_text:Arial_30:John%20Doe%20Photography%20%C2%AE,co_white,g_south_east,b_rgb:00000090\/yellow_tulip.png<\/a> \u201cwith_image: false\u201d)<\/p>\n<p>Done!<\/p>\n<p>##Example 2: Text Textures\nIn this example, which is a bit more complex than our first one, I will use our source image as a texture effect on specified text with a selected font, so that it will look something like this:<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/text_textures.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/text_textures.png\" alt=\"Text Textures\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"367\" height=\"73\"\/><\/a><\/p>\n<p>###The ImageMagick way:\nI will employ the concept of <a href=\"https:\/\/www.tutorialspoint.com\/dip\/concept_of_masks.htm\">masking<\/a> in this example.<br \/>\nLet\u2019s create a \u2018mask\u2019 image in the shape of our desired text and font. I do this using the <code>create_text_mask<\/code> method, which receives the text as a string and returns a \u2018mask\u2019 <code>Image<\/code> object.<br \/>\nThe following is a short walkthrough:<\/p>\n<p>Like in the previous example, I create a <code>Draw<\/code> object, which is being used for the text.<br \/>\nI then add color, font family, size and weight, and get a type metric to create our \u2018mask\u2019 image object with the dimensions I calculated.<\/p>\n<p>Then I create a new <code>Image<\/code> object and set it\u2019s background to transparent:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">draw = Magick::Draw.<span class=\"hljs-keyword\">new<\/span>\ndraw.fill = <span class=\"hljs-string\">\"white\"<\/span>\ndraw.font_family = <span class=\"hljs-string\">\"Arial\"<\/span>\ndraw.pointsize = <span class=\"hljs-number\">100<\/span>\ndraw.font_weight = Magick::BoldWeight\ndraw.gravity = Magick::CenterGravity\nmetrics = draw.get_type_metrics(text)\nmask = Magick::Image.<span class=\"hljs-keyword\">new<\/span>(metrics.width, metrics.height) { <span class=\"hljs-keyword\">self<\/span>.background_color = <span class=\"hljs-string\">\"transparent\"<\/span> }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Like in the previous example, I use the draw object\u2019s annotate method to actually draw the text over the image I\u2019ve created.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">draw<\/span><span class=\"hljs-selector-class\">.annotate<\/span>(<span class=\"hljs-selector-tag\">mask<\/span>, 0, 0, 0, 0, <span class=\"hljs-selector-tag\">text<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The result is a semi transparent image having the text itself in fully opaque \u201cwhite\u201d and the rest &#8211; fully transparent.<\/p>\n<p>Let\u2019s move to the <code>cut_image_to_text!<\/code> method which calls <code>create_text_mask<\/code>:<br \/>\nAfter creating the mask image by calling <code>create_text_mask<\/code>, using the <code>composite<\/code> method, I combine the \u2018mask\u2019 image and our input image, but this time relying on a different type of composite operator: <code>CopyOpacityCompositeOp<\/code>.<br \/>\nDoing this changes the opacity value of all pixels in our input image that are not part of the text letters region, to fully transparent. This hides the pixels and results in a texture effect over the fonts:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">image<\/span><span class=\"hljs-selector-class\">.composite<\/span>!(<span class=\"hljs-selector-tag\">mask<\/span>, <span class=\"hljs-selector-tag\">Magick<\/span><span class=\"hljs-selector-pseudo\">::CenterGravity<\/span>, <span class=\"hljs-selector-tag\">Magick<\/span><span class=\"hljs-selector-pseudo\">::CopyOpacityCompositeOp)<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, I have to clean up by destroying the <code>mask<\/code> image, which isn\u2019t needed anymore.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">mask<\/span><span class=\"hljs-selector-class\">.destroy<\/span>!\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then I trim the remaining transparent border and tighten up the image to the text itself.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">image<\/span><span class=\"hljs-selector-class\">.trim<\/span>!\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>At this point I\u2019m almost done, but there\u2019s one last thing to take care of.<br \/>\nA lot of formats \u2013 like JPEG \u2013 don\u2019t have an alpha channel to support opacity.  So, if you export the image now in one of those non-alpha formats, you\u2019ll see the original image since all \u2018hidden\u2019 and \u2018fully transparent\u2019 pixels from our last step will not preserve their transparency.  As a result, I\u2019ll need to turn all transparent pixels to \u201copaque white\u201d, which will make sure I get a uniform result no matter what the desired format is. This will be done using the simple <code>opacify!<\/code> method.<\/p>\n<p>Here I set the background color to white:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">opacified = Magick::Image.<span class=\"hljs-keyword\">new<\/span>(image.columns, image.rows) { <span class=\"hljs-keyword\">self<\/span>.background_color = <span class=\"hljs-string\">\"white\"<\/span> }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then I put the cut-to-text image that I created in the previous step on top of the new image with the white background color. This causes all transparent pixels from before to turn white.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">opacified<\/span><span class=\"hljs-selector-class\">.composite<\/span>!(<span class=\"hljs-selector-tag\">image<\/span>, <span class=\"hljs-selector-tag\">Magick<\/span><span class=\"hljs-selector-pseudo\">::CenterGravity<\/span>, <span class=\"hljs-selector-tag\">Magick<\/span><span class=\"hljs-selector-pseudo\">::OverCompositeOp)<\/span> \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>After defining the relevant methods,  I apply them on the original image and write the result to a file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">opacify<\/span>!(<span class=\"hljs-selector-tag\">cut_image_to_text<\/span>!(<span class=\"hljs-selector-tag\">source<\/span>, <span class=\"hljs-selector-tag\">text<\/span>))<span class=\"hljs-selector-class\">.write<\/span>(<span class=\"hljs-selector-tag\">dest<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Impressive! We did it!<\/p>\n<p>###The Cloudinary way:\nYou\u2019d think this example would take a bit more effort than the previous one, even in Cloudinary. But with a combination of text overlay capabilities and the built-in <code>cutter<\/code> flag, here\u2019s all we need to do:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;yellow_tulip.png\\&quot;, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 100, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Flowers\\&quot;}, flags: \\&quot;cutter\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;yellow_tulip.png\\&quot;, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 100, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Flowers\\&quot;}, flags: \\&quot;cutter\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;yellow_tulip.png\\&quot; &gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 100, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Flowers\\&quot;}} flags=\\&quot;cutter\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;yellow_tulip.png\\&quot; &gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 100, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Flowers\\&quot;}} flags=\\&quot;cutter\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;yellow_tulip.png\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 100, fontWeight: &#039;bold&#039;, text: &#039;Flowers&#039;}\\&quot; flags=\\&quot;cutter\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;yellow_tulip.png\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 100, fontWeight: &#039;bold&#039;, text: &#039;Flowers&#039;}\\&quot; flags=\\&quot;cutter\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;yellow_tulip.png\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;text:Arial_100_bold:Flowers\\&quot; flags=\\&quot;cutter\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;yellow_tulip.png\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_100_bold:Flowers\\&quot; flags=\\&quot;cutter\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;yellow_tulip.png&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(100).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Flowers\\&quot;), flags: \\&quot;cutter\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;yellow_tulip.png&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(100).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Flowers\\&quot;), flags: \\&quot;cutter\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 100, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Flowers\\&quot;}, flags=\\&quot;cutter\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 100, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Flowers\\&quot;}, flags=\\&quot;cutter\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;yellow_tulip.png&#039;))\\n\\t-&gt;reshape(Reshape::cutByImage(\\n\\tSource::text(\\&quot;Flowers\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,100))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t)));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;yellow_tulip.png&#039;))\\n\\t-&gt;reshape(Reshape::cutByImage(\\n\\tSource::text(\\&quot;Flowers\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,100))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;yellow_tulip.png\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;100, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Flowers\\&quot;), \\&quot;flags\\&quot;=&gt;\\&quot;cutter\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;yellow_tulip.png\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;100, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Flowers\\&quot;), \\&quot;flags\\&quot;=&gt;\\&quot;cutter\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(100).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Flowers\\&quot;)).flags(\\&quot;cutter\\&quot;)).imageTag(\\&quot;yellow_tulip.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(100).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Flowers\\&quot;)).flags(\\&quot;cutter\\&quot;)).imageTag(\\&quot;yellow_tulip.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;yellow_tulip.png\\&quot;, overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 100, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Flowers\\&quot;}, flags: \\&quot;cutter\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;yellow_tulip.png\\&quot;, overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 100, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Flowers\\&quot;}, flags: \\&quot;cutter\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(100).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Flowers\\&quot;)).Flags(\\&quot;cutter\\&quot;)).BuildImageTag(\\&quot;yellow_tulip.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(100).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Flowers\\&quot;)).Flags(\\&quot;cutter\\&quot;)).BuildImageTag(\\&quot;yellow_tulip.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;yellow_tulip.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_100_bold:Flowers,fl_cutter\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;yellow_tulip.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_100_bold:Flowers,fl_cutter\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:Arial_100_bold:Flowers\\&quot;).setFlags(\\&quot;cutter\\&quot;)).generate(\\&quot;yellow_tulip.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:Arial_100_bold:Flowers\\&quot;).setFlags(\\&quot;cutter\\&quot;)).generate(\\&quot;yellow_tulip.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(100).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Flowers\\&quot;)).flags(\\&quot;cutter\\&quot;)).generate(\\&quot;yellow_tulip.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(100).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Flowers\\&quot;)).flags(\\&quot;cutter\\&quot;)).generate(\\&quot;yellow_tulip.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;yellow_tulip.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_100_bold:Flowers,fl_cutter\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;yellow_tulip.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_100_bold:Flowers,fl_cutter\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;yellow_tulip.png\\&quot;)\\n\\t reshape(Reshape.cutByImage(\\n\\tSource.text(\\&quot;Flowers\\&quot;,TextStyle(\\&quot;Arial\\&quot;,100) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t }))) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;yellow_tulip.png\\&quot;)\\n\\t reshape(Reshape.cutByImage(\\n\\tSource.text(\\&quot;Flowers\\&quot;,TextStyle(\\&quot;Arial\\&quot;,100) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t }))) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;yellow_tulip.png\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(100).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Flowers\\&quot;), flags: \\&quot;cutter\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;yellow_tulip.png\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(100).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Flowers\\&quot;), flags: \\&quot;cutter\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.png\\&quot;).reshape(\\n  cutByImage(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 100).fontWeight(\\&quot;bold\\&quot;)))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/l_text:Arial_100_bold:Flowers,fl_cutter\\\/yellow_tulip.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;overlay&quot;:&quot;text:Arial_100_bold:Flowers&quot;,&quot;flags&quot;:&quot;cutter&quot;}],&quot;transformation_string&quot;:&quot;l_text:Arial_100_bold:Flowers,fl_cutter&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;yellow_tulip.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<p>##Example 3: Pixelating Faces<\/p>\n<p>For my last example, I will show how to combine face detection with a <a href=\"https:\/\/cloudinary.com\/glossary\/pixelization\">pixelation<\/a> effect, which is really useful for hiding people\u2019s identities in public photos. Here\u2019s what our final image will look like:<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/pixelate_faces.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/pixelate_faces.jpg\" alt=\"Pixelating Faces\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"332\"\/><\/a><\/p>\n<p>###The ImageMagick way:\nThis example involves use of the <a href=\"http:\/\/opencv.org\/\">OpenCV<\/a> library and the <a href=\"https:\/\/github.com\/ruby-opencv\/ruby-opencv\">ruby-opencv<\/a> gem. My code in this example is written in a flexible way that enables  easy swapping of the face detection part to any other library or implementation (modify the <code>detect_faces<\/code> method to one of your liking, but you must make sure it returns an array of regions).<\/p>\n<p>First, let\u2019s have a look at the <code>transform_faces<\/code> method.<br \/>\nI\u2019m creating a <code>Magick:Image<\/code> object out of this file, which I took from the user\u2019s input, similar to the way I\u2019ve done in our first two examples.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">image = Magick::Image.read(image_file).first\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then I detect faces for the image file. This process, which is done outside of ImageMagick, returns a collection of face regions.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">detect_faces(image_file).each <span class=\"hljs-keyword\">do<\/span> |region|\n  transform_region!(image, region, operation)\nend\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, for each region, I call <code>transform_region!<\/code> over the image object. The <code>transform_region<\/code> method has <code>top_left<\/code> and <code>bottom_right<\/code> attributes, each with an <code>X<\/code>,<code>Y<\/code> value.  Here I crop a new image out of the original image at the exact region that was identified.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">cropped_region = image.crop(region.top_left.x, region.top_left.y, region.width, region.height)\n<\/code><\/span><\/pre>\n<p>Then I call a method for the operation that I want to do with this cropped region image.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cropped_region = send(<span class=\"hljs-string\">\"#{operation}_image!\"<\/span>, cropped_region)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the example code in the repository, I pick an operation called <code>pixelate<\/code>.  However, you also could select \u201cblur\u201d if that treatment was preferred:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">PIXELATE_FACTOR = 5\ndef pixelate_image!(image)\n  image.scale!(1 \/ PIXELATE_FACTOR.to_f).scale!(PIXELATE_FACTOR)\nend\n<\/code><\/span><\/pre>\n<p>Back to <code>transform_region!<\/code>: I need to set the \u201ctransformed\u201d region on top of the original image, using <code>composite<\/code> again at the <code>X<\/code>,<code>Y<\/code> position. After that is complete, I flatten the image and then clean it up by destroying the cropped image region.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">image<\/span><span class=\"hljs-selector-class\">.composite<\/span>!(<span class=\"hljs-selector-tag\">cropped_region<\/span>, <span class=\"hljs-selector-tag\">region<\/span><span class=\"hljs-selector-class\">.top_left<\/span><span class=\"hljs-selector-class\">.x<\/span>, <span class=\"hljs-selector-tag\">region<\/span><span class=\"hljs-selector-class\">.top_left<\/span><span class=\"hljs-selector-class\">.y<\/span>, <span class=\"hljs-selector-tag\">Magick<\/span><span class=\"hljs-selector-pseudo\">::OverCompositeOp)<\/span>\n<span class=\"hljs-selector-tag\">cropped_region<\/span><span class=\"hljs-selector-class\">.destroy<\/span>!\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Not bad, huh?<\/p>\n<p>###The Cloudinary way:\nBy now, you have probably come to expect that you can accomplish the same goal with Cloudinary in one line of code, right? Yup!<\/p>\n<p>Cloudinary has a built-in automatic face detection mechanism that enables, among other things, quick pixelation (or blurring) of all faces in a photo:<\/p>\n<p><strong>Pixelating faces<\/strong>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, {type: \\&quot;fetch\\&quot;, transformation: [ {effect: \\&quot;pixelate_faces\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, {type: \\&quot;fetch\\&quot;, transformation: [\\n  {effect: \\&quot;pixelate_faces\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt; &lt;Transformation effect=\\&quot;pixelate_faces\\&quot; \\\/&gt; &lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt;\\n\\t&lt;Transformation effect=\\&quot;pixelate_faces\\&quot; \\\/&gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt; &lt;cld-transformation effect=\\&quot;pixelate_faces\\&quot; \\\/&gt; &lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt;\\n\\t&lt;cld-transformation effect=\\&quot;pixelate_faces\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt; &lt;cl-transformation effect=\\&quot;pixelate_faces\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt;\\n\\t&lt;cl-transformation effect=\\&quot;pixelate_faces\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;, {type: \\&quot;fetch\\&quot;, transformation: [ {effect: \\&quot;pixelate_faces\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;, {type: \\&quot;fetch\\&quot;, transformation: [\\n  {effect: \\&quot;pixelate_faces\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;).image(type=\\&quot;fetch\\&quot;, transformation=[ {&#039;effect&#039;: \\&quot;pixelate_faces\\&quot;}, {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;).image(type=\\&quot;fetch\\&quot;, transformation=[\\n  {&#039;effect&#039;: \\&quot;pixelate_faces\\&quot;},\\n  {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;))\\n\\t-&gt;effect(Effect::pixelate()\\n\\t-&gt;region(\\n\\tRegion::faces())\\n\\t)\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;deliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;))\\n\\t-&gt;effect(Effect::pixelate()\\n\\t-&gt;region(\\n\\tRegion::faces())\\n\\t)\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;deliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, array(\\&quot;type\\&quot;=&gt;\\&quot;fetch\\&quot;, \\&quot;transformation\\&quot;=&gt;array( array(\\&quot;effect\\&quot;=&gt;\\&quot;pixelate_faces\\&quot;), array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, array(\\&quot;type\\&quot;=&gt;\\&quot;fetch\\&quot;, \\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;pixelate_faces\\&quot;),\\n  array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;pixelate_faces\\&quot;).chain() .width(500).crop(\\&quot;scale\\&quot;)).type(\\&quot;fetch\\&quot;).imageTag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .effect(\\&quot;pixelate_faces\\&quot;).chain()\\n  .width(500).crop(\\&quot;scale\\&quot;)).type(\\&quot;fetch\\&quot;).imageTag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, type: \\&quot;fetch\\&quot;, transformation: [ {effect: \\&quot;pixelate_faces\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, type: \\&quot;fetch\\&quot;, transformation: [\\n  {effect: \\&quot;pixelate_faces\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;pixelate_faces\\&quot;).Chain() .Width(500).Crop(\\&quot;scale\\&quot;)).Action(\\&quot;fetch\\&quot;).BuildImageTag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Effect(\\&quot;pixelate_faces\\&quot;).Chain()\\n  .Width(500).Crop(\\&quot;scale\\&quot;)).Action(\\&quot;fetch\\&quot;).BuildImageTag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.pixelate()\\n\\t.region(\\n\\tRegion.faces())\\n\\t)\\n\\t.resize(Resize.scale().width(500))\\n\\t.setDeliveryType(\\&quot;fetch\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.pixelate()\\n\\t.region(\\n\\tRegion.faces())\\n\\t)\\n\\t.resize(Resize.scale().width(500))\\n\\t.setDeliveryType(\\&quot;fetch\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;fetch\\&quot;).setTransformation(CLDTransformation().setEffect(\\&quot;pixelate_faces\\&quot;).chain() .setWidth(500).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;fetch\\&quot;).setTransformation(CLDTransformation()\\n  .setEffect(\\&quot;pixelate_faces\\&quot;).chain()\\n  .setWidth(500).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;pixelate_faces\\&quot;).chain() .width(500).crop(\\&quot;scale\\&quot;)).type(\\&quot;fetch\\&quot;).generate(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .effect(\\&quot;pixelate_faces\\&quot;).chain()\\n  .width(500).crop(\\&quot;scale\\&quot;)).type(\\&quot;fetch\\&quot;).generate(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.pixelate()\\n\\t.region(\\n\\tRegion.faces())\\n\\t)\\n\\t.resize(Resize.scale().width(500))\\n\\t.setDeliveryType(\\&quot;fetch\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.pixelate()\\n\\t.region(\\n\\tRegion.faces())\\n\\t)\\n\\t.resize(Resize.scale().width(500))\\n\\t.setDeliveryType(\\&quot;fetch\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)\\n\\t effect(Effect.pixelate() {\\n\\t region(\\n\\tRegion.faces())\\n\\t })\\n\\t resize(Resize.scale() { width(500) })\\n\\t deliveryType(\\&quot;fetch\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)\\n\\t effect(Effect.pixelate() {\\n\\t region(\\n\\tRegion.faces())\\n\\t })\\n\\t resize(Resize.scale() { width(500) })\\n\\t deliveryType(\\&quot;fetch\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, {type: \\&quot;fetch\\&quot;, transformation: [ {effect: \\&quot;pixelate_faces\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, {type: \\&quot;fetch\\&quot;, transformation: [\\n  {effect: \\&quot;pixelate_faces\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(pixelate().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/fetch\\\/e_pixelate_faces\\\/w_500\\\/http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;fetch&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;pixelate_faces&quot;},{&quot;width&quot;:&quot;500&quot;}],&quot;transformation_string&quot;:&quot;e_pixelate_faces\\\/w_500&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<p><strong>Blurring faces<\/strong>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, {type: \\&quot;fetch\\&quot;, transformation: [ {effect: \\&quot;blur_faces\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, {type: \\&quot;fetch\\&quot;, transformation: [\\n  {effect: \\&quot;blur_faces\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt; &lt;Transformation effect=\\&quot;blur_faces\\&quot; \\\/&gt; &lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt;\\n\\t&lt;Transformation effect=\\&quot;blur_faces\\&quot; \\\/&gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt; &lt;cld-transformation effect=\\&quot;blur_faces\\&quot; \\\/&gt; &lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt;\\n\\t&lt;cld-transformation effect=\\&quot;blur_faces\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt; &lt;cl-transformation effect=\\&quot;blur_faces\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot; type=\\&quot;fetch\\&quot;&gt;\\n\\t&lt;cl-transformation effect=\\&quot;blur_faces\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;, {type: \\&quot;fetch\\&quot;, transformation: [ {effect: \\&quot;blur_faces\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;, {type: \\&quot;fetch\\&quot;, transformation: [\\n  {effect: \\&quot;blur_faces\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;).image(type=\\&quot;fetch\\&quot;, transformation=[ {&#039;effect&#039;: \\&quot;blur_faces\\&quot;}, {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;).image(type=\\&quot;fetch\\&quot;, transformation=[\\n  {&#039;effect&#039;: \\&quot;blur_faces\\&quot;},\\n  {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;))\\n\\t-&gt;effect(Effect::blur()\\n\\t-&gt;region(\\n\\tRegion::faces())\\n\\t)\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;deliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;))\\n\\t-&gt;effect(Effect::blur()\\n\\t-&gt;region(\\n\\tRegion::faces())\\n\\t)\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;deliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, array(\\&quot;type\\&quot;=&gt;\\&quot;fetch\\&quot;, \\&quot;transformation\\&quot;=&gt;array( array(\\&quot;effect\\&quot;=&gt;\\&quot;blur_faces\\&quot;), array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, array(\\&quot;type\\&quot;=&gt;\\&quot;fetch\\&quot;, \\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;blur_faces\\&quot;),\\n  array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;blur_faces\\&quot;).chain() .width(500).crop(\\&quot;scale\\&quot;)).type(\\&quot;fetch\\&quot;).imageTag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .effect(\\&quot;blur_faces\\&quot;).chain()\\n  .width(500).crop(\\&quot;scale\\&quot;)).type(\\&quot;fetch\\&quot;).imageTag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, type: \\&quot;fetch\\&quot;, transformation: [ {effect: \\&quot;blur_faces\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, type: \\&quot;fetch\\&quot;, transformation: [\\n  {effect: \\&quot;blur_faces\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;blur_faces\\&quot;).Chain() .Width(500).Crop(\\&quot;scale\\&quot;)).Action(\\&quot;fetch\\&quot;).BuildImageTag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Effect(\\&quot;blur_faces\\&quot;).Chain()\\n  .Width(500).Crop(\\&quot;scale\\&quot;)).Action(\\&quot;fetch\\&quot;).BuildImageTag(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.blur()\\n\\t.region(\\n\\tRegion.faces())\\n\\t)\\n\\t.resize(Resize.scale().width(500))\\n\\t.setDeliveryType(\\&quot;fetch\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.blur()\\n\\t.region(\\n\\tRegion.faces())\\n\\t)\\n\\t.resize(Resize.scale().width(500))\\n\\t.setDeliveryType(\\&quot;fetch\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;fetch\\&quot;).setTransformation(CLDTransformation().setEffect(\\&quot;blur_faces\\&quot;).chain() .setWidth(500).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;fetch\\&quot;).setTransformation(CLDTransformation()\\n  .setEffect(\\&quot;blur_faces\\&quot;).chain()\\n  .setWidth(500).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;blur_faces\\&quot;).chain() .width(500).crop(\\&quot;scale\\&quot;)).type(\\&quot;fetch\\&quot;).generate(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .effect(\\&quot;blur_faces\\&quot;).chain()\\n  .width(500).crop(\\&quot;scale\\&quot;)).type(\\&quot;fetch\\&quot;).generate(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.blur()\\n\\t.region(\\n\\tRegion.faces())\\n\\t)\\n\\t.resize(Resize.scale().width(500))\\n\\t.setDeliveryType(\\&quot;fetch\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.blur()\\n\\t.region(\\n\\tRegion.faces())\\n\\t)\\n\\t.resize(Resize.scale().width(500))\\n\\t.setDeliveryType(\\&quot;fetch\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)\\n\\t effect(Effect.blur() {\\n\\t region(\\n\\tRegion.faces())\\n\\t })\\n\\t resize(Resize.scale() { width(500) })\\n\\t deliveryType(\\&quot;fetch\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;)\\n\\t effect(Effect.blur() {\\n\\t region(\\n\\tRegion.faces())\\n\\t })\\n\\t resize(Resize.scale() { width(500) })\\n\\t deliveryType(\\&quot;fetch\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, {type: \\&quot;fetch\\&quot;, transformation: [ {effect: \\&quot;blur_faces\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;, {type: \\&quot;fetch\\&quot;, transformation: [\\n  {effect: \\&quot;blur_faces\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\n  \\&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg\\&quot;\\n)\\n  .effect(blur().region(faces()))\\n  .resize(scale().width(500))\\n  .setDeliveryType(\\&quot;fetch\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/fetch\\\/e_blur_faces\\\/w_500\\\/http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;fetch&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;blur_faces&quot;},{&quot;width&quot;:&quot;500&quot;}],&quot;transformation_string&quot;:&quot;e_blur_faces\\\/w_500&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/4\\\/45\\\/Spain_national_football_team_Euro_2012_final.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<p>##Conclusion<\/p>\n<p>ImageMagick is a flexible, capable, open source software suite that developers have used to manage and transform images for years. As we saw in this post, ImageMagick can be utilized to do so much more than simply resizing an image.<\/p>\n<p>At Cloudinary, we make use of ImageMagick for a wide range of use cases, and it serves as one of the valuable tools in our toolbelt.<\/p>\n<p>Cloudinary abstracts the complexities of image transformations, storage,  administration and delivery and provides developers with an easy-to-use, end-to-end, cloud-based solution. Cloudinary enables developers to focus on creating their apps and presenting the best images possible.<\/p>\n<p>If you haven\u2019t tried Cloudinary yet, I invite you to test it out. Visit our website to <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">sign up for a account<\/a><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22694,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[124,165,257,324],"class_list":["post-21472","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-frameworks","tag-image-transformation","tag-ruby-on-rails","tag-website-speed"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Use ImageMagick with Speed &amp; Simplicity | Cloudinary Blog<\/title>\n<meta name=\"description\" content=\"Use Imagemagick&#039;s advanced features alongside Cloudinary&#039;s user friendly, flexible tools to easily create images that stand out.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The power of ImageMagick with the speed and simplicity of Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Use Imagemagick&#039;s advanced features alongside Cloudinary&#039;s user friendly, flexible tools to easily create images that stand out.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-23T15:55:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-30T11:06:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"The power of ImageMagick with the speed and simplicity of Cloudinary\",\"datePublished\":\"2017-02-23T15:55:40+00:00\",\"dateModified\":\"2023-08-30T11:06:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick.png?_i=AA\",\"keywords\":[\"Frameworks\",\"Image Transformation\",\"Ruby on Rails\",\"Website Speed\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary\",\"name\":\"Use ImageMagick with Speed & Simplicity | Cloudinary Blog\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick.png?_i=AA\",\"datePublished\":\"2017-02-23T15:55:40+00:00\",\"dateModified\":\"2023-08-30T11:06:27+00:00\",\"description\":\"Use Imagemagick's advanced features alongside Cloudinary's user friendly, flexible tools to easily create images that stand out.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The power of ImageMagick with the speed and simplicity of Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Use ImageMagick with Speed & Simplicity | Cloudinary Blog","description":"Use Imagemagick's advanced features alongside Cloudinary's user friendly, flexible tools to easily create images that stand out.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary","og_locale":"en_US","og_type":"article","og_title":"The power of ImageMagick with the speed and simplicity of Cloudinary","og_description":"Use Imagemagick's advanced features alongside Cloudinary's user friendly, flexible tools to easily create images that stand out.","og_url":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2017-02-23T15:55:40+00:00","article_modified_time":"2023-08-30T11:06:27+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary"},"author":{"name":"","@id":""},"headline":"The power of ImageMagick with the speed and simplicity of Cloudinary","datePublished":"2017-02-23T15:55:40+00:00","dateModified":"2023-08-30T11:06:27+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary"},"wordCount":11,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick.png?_i=AA","keywords":["Frameworks","Image Transformation","Ruby on Rails","Website Speed"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary","url":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary","name":"Use ImageMagick with Speed & Simplicity | Cloudinary Blog","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick.png?_i=AA","datePublished":"2017-02-23T15:55:40+00:00","dateModified":"2023-08-30T11:06:27+00:00","description":"Use Imagemagick's advanced features alongside Cloudinary's user friendly, flexible tools to easily create images that stand out.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/the_power_of_imagemagick_with_the_speed_and_simplicity_of_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The power of ImageMagick with the speed and simplicity of Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645576193\/website-2021\/blog\/cloudinary_imagemagick\/cloudinary_imagemagick.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21472"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21472\/revisions"}],"predecessor-version":[{"id":31069,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21472\/revisions\/31069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22694"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}