{"id":21899,"date":"2019-07-09T12:10:51","date_gmt":"2019-07-09T12:10:51","guid":{"rendered":"http:\/\/inject_your_own_image_processing_by_using_a_custom_function"},"modified":"2024-06-04T15:46:57","modified_gmt":"2024-06-04T22:46:57","slug":"inject_your_own_image_processing_by_using_a_custom_function","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function","title":{"rendered":"Inject Your Own Image Processing by Using a Custom Function"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Cloudinary offers a wide array of image transformations and effects to apply to images as part of our image-processing pipeline, helping to ensure that your images fit the graphic design of your website or mobile application. Cloudinary is an open platform, and you can use our APIs, Widgets and UI to build the media management flow that matches your needs.<\/p>\n<p>But despite the fact that our extensive and versatile range of transformations is continuously growing with new transformations added on a regular basis, the list is not complete by any means. There are just too many ways that an image could potentially be transformed to be able to offer every possible transformation.<\/p>\n<p>Cloudinary strives to provide a solution that is as complete as possible, catering to the needs of thousands of customers. That said, when catering for so many customers, having a plethora of needs, there can be instances where a customer needs a capability that is not yet supported. At Cloudinary we try to fill our customers needs, but may not always be able to implement new functionality in a timely manner, or there just may be no other demand for a customer\u2019s highly specialized requirements requiring some very specific code to implement.<\/p>\n<p>To this end, Cloudinary now supports injecting custom functions into the image transformation pipeline, allowing our customers to implement their own transformations on their images. This new functionality takes our image processing capabilities to the next level, to be fully extensible and open &#8211; allowing you to add your own processing capabilities.<\/p>\n<p>For example, if you wanted to limit a delivered image to the 3 most predominant colors in the image, you could add a custom function to make this happen.<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors_3,fn_wasm:quantize.wasm,w_300\/l_sample,w_300,x_-400\/l_text:times_30:to\/sample.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors_3,fn_wasm:quantize.wasm,w_300\/l_sample,w_300,x_-400\/l_text:times_30:to\/sample.jpg\" alt=\"quantized example\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"200\"\/><\/a><\/p>\n<p>There are 3 ways to inject a function with the <code>custom_function<\/code> parameter (<code>fn<\/code> in URLs):<\/p>\n<ul>\n<li>\n<a href=\"#use_a_webassembly_function\">Use a WebAssembly function<\/a> uploaded as a compiled <code>.wasm<\/code> file to your account.<\/li>\n<li>Supply an external URL as the source of a <a href=\"#call_a_remote_function\">remote function\/lambda<\/a>.<\/li>\n<li>Inject a <a href=\"#preprocess_an_image\">remote preprocessing function<\/a> before Cloudinary does any processing on the file.<\/li>\n<\/ul>\n<h2>Use a WebAssembly Function<\/h2>\n<p>A WebAssembly function is a self-contained compiled WASM file that will run on Cloudinary\u2019s servers as part of the image transformation pipeline. The function is provided with a pointer to an RGBA interleaved pixel buffer together with a pointer to any metadata (context, tags and variables), and must return a pointer to an output buffer containing the image pixels (optionally including metadata as well).<\/p>\n<p>The function cannot reference any outside URLs, so this case is most useful for adding new functionality (a new transformation) that needs to run quickly on our servers. This is the best way to use a special effect or add a new filter.<\/p>\n<p>The WebAssembly function must be uploaded to your account as a <a href=\"https:\/\/cloudinary.com\/documentation\/upload_images#uploading_non_media_files_as_raw_files\">raw<\/a> <a href=\"https:\/\/cloudinary.com\/documentation\/upload_images#authenticated_assets\">authenticated<\/a> asset, and then referenced in a custom function: use the <code>custom_function<\/code> parameter with the <code>function_type<\/code> set to \u201cwasm\u201d (<code>fn_wasm<\/code> in URLs), and the <code>source<\/code> parameter set to the public_id of your compiled WASM file.<\/p>\n<p>For example, to deliver the \u2018rainbow\u2019 image after running the WebAssembly function located in a compiled WASM file uploaded to your account with the public_id of \u2018blur.wasm\u2019:<\/p>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;rainbow.jpg\\&quot;,\\n      :custom_function =&gt; {\\n        :function_type =&gt; \\&quot;wasm\\&quot;, \\n        :source =&gt; \\&quot;blur.wasm\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;rainbow.jpg\\&quot;,\\n      :custom_function =&gt; {\\n        :function_type =&gt; \\&quot;wasm\\&quot;, \\n        :source =&gt; \\&quot;blur.wasm\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;rainbow.jpg\\&quot;, array(\\n      \\&quot;custom_function\\&quot; =&gt; array(\\n        \\&quot;function_type\\&quot; =&gt; \\&quot;wasm\\&quot;, \\n        \\&quot;source\\&quot; =&gt; \\&quot;blur.wasm\\&quot;)))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;rainbow.jpg\\&quot;, array(\\n      \\&quot;custom_function\\&quot; =&gt; array(\\n        \\&quot;function_type\\&quot; =&gt; \\&quot;wasm\\&quot;, \\n        \\&quot;source\\&quot; =&gt; \\&quot;blur.wasm\\&quot;)))&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;rainbow.jpg\\&quot;).image(\\n      custom_function = {\\n        \\&quot;function_type\\&quot; = \\&quot;wasm\\&quot;, \\n        \\&quot;source\\&quot; = \\&quot;blur.wasm\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;rainbow.jpg\\&quot;).image(\\n      custom_function = {\\n        \\&quot;function_type\\&quot; = \\&quot;wasm\\&quot;, \\n        \\&quot;source\\&quot; = \\&quot;blur.wasm\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;rainbow.jpg\\&quot;, {\\n      custom_function:{\\n        function_type: \\&quot;wasm\\&quot;, \\n        source: \\&quot;blur.wasm\\&quot;}})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;rainbow.jpg\\&quot;, {\\n      custom_function:{\\n        function_type: \\&quot;wasm\\&quot;, \\n        source: \\&quot;blur.wasm\\&quot;}})&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n      .customFunction(wasm(\\&quot;blur.wasm\\&quot;)))\\n      .imageTag(\\&quot;rainbow.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n      .customFunction(wasm(\\&quot;blur.wasm\\&quot;)))\\n      .imageTag(\\&quot;rainbow.jpg\\&quot;);&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;rainbow.jpg&#039;, {\\n      customFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;wasm\\&quot;)\\n        .source(\\&quot;blur.wasm\\&quot;)}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;rainbow.jpg&#039;, {\\n      customFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;wasm\\&quot;)\\n        .source(\\&quot;blur.wasm\\&quot;)}).toHtml();&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(&#039;rainbow.jpg&#039;, {\\n      customFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;wasm\\&quot;)\\n        .source(\\&quot;blur.wasm\\&quot;)})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(&#039;rainbow.jpg&#039;, {\\n      customFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;wasm\\&quot;)\\n        .source(\\&quot;blur.wasm\\&quot;)})&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;rainbow.jpg\\&quot;&gt;\\n      &lt;Transformation customFunction={{\\n        functionType: \\&quot;wasm\\&quot;,\\n        source: \\&quot;blur.wasm\\&quot;}} \\\/&gt;\\n    &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;rainbow.jpg\\&quot;&gt;\\n      &lt;Transformation customFunction={{\\n        functionType: \\&quot;wasm\\&quot;,\\n        source: \\&quot;blur.wasm\\&quot;}} \\\/&gt;\\n    &lt;\\\/Image&gt;&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;rainbow.jpg\\&quot;&gt;\\n      &lt;cl-transformation customFunction={\\n       functionType: \\&quot;wasm\\&quot;,\\n        source: \\&quot;blur.wasm\\&quot;}&gt;\\n      &lt;\\\/cl-transformation&gt;\\n    &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;rainbow.jpg\\&quot;&gt;\\n      &lt;cl-transformation customFunction={\\n       functionType: \\&quot;wasm\\&quot;,\\n        source: \\&quot;blur.wasm\\&quot;}&gt;\\n      &lt;\\\/cl-transformation&gt;\\n    &lt;\\\/cl-image&gt;&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n      .CustomFunction(CustomFunction.Wasm(\\&quot;blur.wasm\\&quot;)))\\n      .BuildImageTag(\\&quot;rainbow.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n      .CustomFunction(CustomFunction.Wasm(\\&quot;blur.wasm\\&quot;)))\\n      .BuildImageTag(\\&quot;rainbow.jpg\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl()\\n      .setTransformation(CLDTransformation()\\n        .setCustomFunction(CLDCustomFunction()\\n          .setFunctionType(\\&quot;wasm\\&quot;)\\n          .setSource(\\&quot;blur.wasm\\&quot;)))\\n      .generate(\\&quot;rainbow.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl()\\n      .setTransformation(CLDTransformation()\\n        .setCustomFunction(CLDCustomFunction()\\n          .setFunctionType(\\&quot;wasm\\&quot;)\\n          .setSource(\\&quot;blur.wasm\\&quot;)))\\n      .generate(\\&quot;rainbow.jpg\\&quot;)!, cloudinary: cloudinary)&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n      .customFunction(new CustomFunction()\\n        .functionType(\\&quot;wasm\\&quot;)\\n        .source(\\&quot;blur.wasm\\&quot;))\\n      .generate(\\&quot;rainbow.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n      .customFunction(new CustomFunction()\\n        .functionType(\\&quot;wasm\\&quot;)\\n        .source(\\&quot;blur.wasm\\&quot;))\\n      .generate(\\&quot;rainbow.jpg\\&quot;);&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<p>The code generates a URL similar to:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/demo\/image\/upload\/fn_wasm:blur.wasm\/rainbow.jpg<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><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<h3>Interactive Example<\/h3>\n<p>The following interactive example uses a custom function to add a \u2018quantize\u2019 effect to an image (just like the example in the introduction above), where the image is limited to a specific number of colors that is supplied as an additional variable parameter. This could be important for displaying images on devices that support a limited number of colors and for efficiently compressing certain kinds of images.<\/p>\n<p><span class=\"step_number\">1<\/span>\u00a0\u00a0Select the number of colors:\u00a0\u00a0\u00a0\u00a0<input type=\"number\" name=\"color-quantity\" id=\"color-quantity\" align=\"middle\" value=\"3\" min=\"2\" max=\"30\"><\/p>\n<div style=\"clear: both; margin-bottom: 30px\">\n<\/div>\n<span class=\"step_number\">2<\/span>&nbsp;&nbsp;Pick a target photo, or upload your own:&nbsp;&nbsp;&nbsp;\n<a href=\"#\" id=\"upload_widget_opener\">\n<button id=\"upload_widget_open\" class=\"cloudinary-button\">Upload an image<\/button>\n<\/a>\n<div style=\"clear: both; margin-bottom: 10px\">\n<\/div>\n<div style=\"text-align:center;padding-top: 5px;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<img decoding=\"async\"  id=\"photo1\" data-url-choice=\"photo1\" data-url-image=\"golf_sand_st\" class=\"photo-img\" width=100 height=100 src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_fill,dpr_2.0\/golf_sand.jpg\" alt=\"golf course target photo\" title=\"golf course target photo\" style=\"margin-right:0px;margin-left: 0px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<img decoding=\"async\" id=\"photo2\" data-url-choice=\"photo2\" data-url-image=\"coffee_cup_st\" class=\"photo-img\" width=100 height=100 src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_fill,dpr_2.0\/coffee_cup.jpg\" alt=\"coffee target photo\" title=\"coffee target photo\" style=\"margin-right:0px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<img decoding=\"async\" id=\"photo3\" data-url-choice=\"photo3\" data-url-image=\"oldman_village_st\" class=\"photo-img\" width=100 height=100 src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_fill,dpr_2.0,g_face\/oldman_village.jpg\" alt=\"old man target photo\" title=\"old man target photo\" style=\"margin-right:0px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<img decoding=\"async\" id=\"photo4\" data-url-choice=\"photo4\" data-url-image=\"custom\" class=\"photo-img\" width=100 height=100 src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_fill\/1_pixel_gray.png\" alt=\"custom target photo\" title=\"custom target photo\" style=\"margin-right:0px;display:block;\" \/><\/a>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 50px\">\n<\/div>\n<span class=\"step_number\">3<\/span>&nbsp;&nbsp;Press the magic button!\n<div style=\"text-align:center\">\n<span class=\"apply-button\" id=\"neural_apply\">\n<button id=\"apply-this-button\" class=\"cloudinary-button\">Generate image<\/button>\n<\/span>\n<div style=\"clear: both; margin-bottom: 10px\">\n<\/div>\n<div>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a id=\"imagelink\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/art_here.jpg\" target =\"_blank\" data-url-template3=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_style_transfer,l_#art_image#\/#use-img#.jpg\">\n<img decoding=\"async\" id=\"testpic\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_550,h_300,c_fit\/art_here.jpg\" alt=\"Your generated quantized image\" title=\"Your generated quantized image\"  data-url-template=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_style_transfer,l_#art_image#\/#use-img#.jpg\" \/>\n<\/a>\n<div align=\"center\" class=\"div_url\" style=\"font-size: 90%;\">\n <a id=\"cloudurl\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors_4,fn_wasm:quantize.wasm\/sample.jpg\" target=\"_blank\" data-url-templated=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_style_transfer,l_#art_image#\/#use-img#.jpg\"><span id=\"c-url\">https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors\\_4,fn\\_wasm:quantize.wasm\/sample.jpg<\/span><\/a>\n<p>\n<\/div>\n<\/div>\n<\/div>\n<h2>Call a Remote Function<\/h2>\n<p>A remote function can pretty much do anything with the PNG image it is sent for processing, only limited by the programming language used and your imagination. Your remote function could access external databases for extracting information, add new layers and effects, or even incorporate remote calls to 3rd party APIs. This is a great way to incorporate any external functionality into the pipeline, in effect adding your own \u201cadd-on\u201d to your toolbox of image transformations.<\/p>\n<p>Remote functions are especially useful for new Cloudinary customers that may already be using 3rd party tools to accomplish some of their image transformations, whether it\u2019s something Cloudinary doesn\u2019t currently support, or just something that may give slightly different results with a Cloudinary transformation, for example, a 3rd party image enhancement service. You can host your own remote functions or just use a serverless computing vendor such as <a href=\"https:\/\/aws.amazon.com\/lambda\">AWS Lambda<\/a> or <a href=\"https:\/\/cloud.google.com\">Google Cloud Functions<\/a> to manage your custom function.<\/p>\n<p>A remote custom function receives an input image in PNG format along with metadata (context, tags and variables), and must return an image in a format that Cloudinary supports (optionally including metadata as well). Use the <code>custom_function<\/code> parameter with the <code>function_type<\/code> set to \u201cremote\u201d (<code>fn_remote<\/code> in URLs), and the <code>source<\/code> parameter set to the URL of the custom function. As a security precaution, and to prevent unmoderated use of your remote function, the delivery URL also needs to be <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#signed_delivery_urls\">signed<\/a>, which simply means adding the <code>sign_url<\/code> parameter set to \u201ctrue\u201d to the SDK method.<\/p>\n<p>For example, to deliver the \u2018rainbow\u2019 image after running the remote function located at \u2018https:\/\/my.example.custom\/function\u2019:<\/p>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;rainbow.jpg\\&quot;,\\n      :sign_url =&gt; true,\\n      :custom_function =&gt; {\\n        :function_type =&gt; \\&quot;remote\\&quot;, \\n        :source =&gt; \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;rainbow.jpg\\&quot;,\\n      :sign_url =&gt; true,\\n      :custom_function =&gt; {\\n        :function_type =&gt; \\&quot;remote\\&quot;, \\n        :source =&gt; \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;rainbow.jpg\\&quot;, array(\\n      \\&quot;sign_url\\&quot; =&gt; true,\\n      \\&quot;custom_function\\&quot; =&gt; array(\\n        \\&quot;function_type\\&quot; =&gt; \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; =&gt; \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;rainbow.jpg\\&quot;, array(\\n      \\&quot;sign_url\\&quot; =&gt; true,\\n      \\&quot;custom_function\\&quot; =&gt; array(\\n        \\&quot;function_type\\&quot; =&gt; \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; =&gt; \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;rainbow.jpg\\&quot;).image(\\n      sign_url = True,\\n      custom_function = {\\n        \\&quot;function_type\\&quot; = \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; = \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;rainbow.jpg\\&quot;).image(\\n      sign_url = True,\\n      custom_function = {\\n        \\&quot;function_type\\&quot; = \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; = \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;rainbow.jpg\\&quot;, {\\n      sign_url: true,\\n      custom_function:{\\n        function_type: \\&quot;remote\\&quot;, \\n        source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;rainbow.jpg\\&quot;, {\\n      sign_url: true,\\n      custom_function:{\\n        function_type: \\&quot;remote\\&quot;, \\n        source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}})&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n      .signed(true)\\n      .customFunction(remote(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .imageTag(\\&quot;rainbow.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n      .signed(true)\\n      .customFunction(remote(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .imageTag(\\&quot;rainbow.jpg\\&quot;);&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;rainbow.jpg&#039;, {\\n      signUrl: true,\\n      customFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;rainbow.jpg&#039;, {\\n      signUrl: true,\\n      customFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)}).toHtml();&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(&#039;rainbow.jpg&#039;, {\\n      signUrl: true,\\n      customFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(&#039;rainbow.jpg&#039;, {\\n      signUrl: true,\\n      customFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)})&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;rainbow.jpg\\&quot; signUrl=\\&quot;true\\&quot;&gt;\\n      &lt;Transformation customFunction={{\\n        functionType: \\&quot;remote\\&quot;,\\n        source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}} \\\/&gt;\\n    &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;rainbow.jpg\\&quot; signUrl=\\&quot;true\\&quot;&gt;\\n      &lt;Transformation customFunction={{\\n        functionType: \\&quot;remote\\&quot;,\\n        source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}} \\\/&gt;\\n    &lt;\\\/Image&gt;&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;rainbow.jpg\\&quot; sign-url=\\&quot;true\\&quot;&gt;\\n      &lt;cl-transformation customFunction={\\n       functionType: \\&quot;remote\\&quot;,\\n       source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}&gt;\\n      &lt;\\\/cl-transformation&gt;\\n    &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;rainbow.jpg\\&quot; sign-url=\\&quot;true\\&quot;&gt;\\n      &lt;cl-transformation customFunction={\\n       functionType: \\&quot;remote\\&quot;,\\n       source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}&gt;\\n      &lt;\\\/cl-transformation&gt;\\n    &lt;\\\/cl-image&gt;&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n      .Signed(true)\\n      .CustomFunction(CustomFunction.Remote(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .BuildImageTag(\\&quot;rainbow.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n      .Signed(true)\\n      .CustomFunction(CustomFunction.Remote(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .BuildImageTag(\\&quot;rainbow.jpg\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl()\\n      .setTransformation(CLDTransformation()\\n        .setCustomFunction(CLDCustomFunction()\\n          .setFunctionType(\\&quot;remote\\&quot;)\\n          .setSource(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .generate(\\&quot;rainbow.jpg\\&quot;, signUrl: true)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl()\\n      .setTransformation(CLDTransformation()\\n        .setCustomFunction(CLDCustomFunction()\\n          .setFunctionType(\\&quot;remote\\&quot;)\\n          .setSource(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .generate(\\&quot;rainbow.jpg\\&quot;, signUrl: true)!, cloudinary: cloudinary)&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n      .signed(true)\\n      .customFunction(new CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;))\\n      .generate(\\&quot;rainbow.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n      .signed(true)\\n      .customFunction(new CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;))\\n      .generate(\\&quot;rainbow.jpg\\&quot;);&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<p>The code generates a URL similar to:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/demo\/image\/upload\/s--21ba7cb4--\/fn_remote:aHR0cHM6Ly9teS5leGFtcGxlLmN1c3RvbS9mdW5jdGlvbg==\/\/rainbow.jpg<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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<h2>Preprocess an Image<\/h2>\n<p>The custom functions discussed so far are given an image for processing, either a pointer to an image bitmap for WASM functions, or a PNG image for remote functions. However, Cloudinary also allows you to insert a remote custom function earlier in the transformation chain, before any processing is done on the image at all. Whereas the remote function option described above is sent an image in PNG format, a preprocessing remote function is sent the original image file, as uploaded to Cloudinary. This may be necessary in two scenarios:<\/p>\n<ol>\n<li>The original image file is in a format that Cloudinary only <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#image_format_support\">supports for upload<\/a>, but not for transformations without first converting to another format, for example the SVG format.<\/li>\n<li>Cloudinary only offers basic transformations for the given file format, for example the PDF format. If you want to extract or replace text within the file, rearrange or delete specific layers, or any other advanced editing option, you can integrate your preprocessing remote function with a 3rd party tool for this very purpose.<\/li>\n<\/ol>\n<p>Use the <code>custom_pre_function<\/code> parameter (<code>fn_pre<\/code> in URLs) to call the custom function to preprocess, with the <code>function_type<\/code> set to \u201cremote\u201d (<code>fn_pre:remote<\/code> in URLs), and the <code>source<\/code> parameter set to the URL of the custom function.<\/p>\n<p>For example, to deliver the \u2018logo\u2019 image after running the remote function located at \u2018https:\/\/my.preprocess.custom\/function\u2019:<\/p>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;logo.jpg\\&quot;,\\n      :sign_url =&gt; true,\\n      :custom_pre_function =&gt; {\\n        :function_type =&gt; \\&quot;remote\\&quot;, \\n        :source =&gt; \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;logo.jpg\\&quot;,\\n      :sign_url =&gt; true,\\n      :custom_pre_function =&gt; {\\n        :function_type =&gt; \\&quot;remote\\&quot;, \\n        :source =&gt; \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;logo.jpg\\&quot;, array(\\n      \\&quot;sign_url\\&quot; =&gt; true,\\n      \\&quot;custom_pre_function\\&quot; =&gt; array(\\n        \\&quot;function_type\\&quot; =&gt; \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; =&gt; \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;logo.jpg\\&quot;, array(\\n      \\&quot;sign_url\\&quot; =&gt; true,\\n      \\&quot;custom_pre_function\\&quot; =&gt; array(\\n        \\&quot;function_type\\&quot; =&gt; \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; =&gt; \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;logo.jpg\\&quot;).image(\\n      sign_url = True,\\n      custom_pre_function = {\\n        \\&quot;function_type\\&quot; = \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; = \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;logo.jpg\\&quot;).image(\\n      sign_url = True,\\n      custom_pre_function = {\\n        \\&quot;function_type\\&quot; = \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; = \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;logo.jpg\\&quot;, {\\n      sign_url: true,\\n      custom_pre_function:{\\n        function_type: \\&quot;remote\\&quot;, \\n        source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;logo.jpg\\&quot;, {\\n      sign_url: true,\\n      custom_pre_function:{\\n        function_type: \\&quot;remote\\&quot;, \\n        source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}})&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n      .signed(true)\\n      .customPreFunction(remote(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .imageTag(\\&quot;logo.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n      .signed(true)\\n      .customPreFunction(remote(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .imageTag(\\&quot;logo.jpg\\&quot;);&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;logo.jpg&#039;, {\\n      signUrl: true,\\n      customPreFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;logo.jpg&#039;, {\\n      signUrl: true,\\n      customPreFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)}).toHtml();&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(&#039;logo.jpg&#039;, {\\n      signUrl: true,\\n      customPreFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(&#039;logo.jpg&#039;, {\\n      signUrl: true,\\n      customPreFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)})&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;logo.jpg\\&quot; signUrl=\\&quot;true\\&quot;&gt;\\n      &lt;Transformation customPreFunction={{\\n        functionType: \\&quot;remote\\&quot;,\\n        source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}} \\\/&gt;\\n    &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;logo.jpg\\&quot; signUrl=\\&quot;true\\&quot;&gt;\\n      &lt;Transformation customPreFunction={{\\n        functionType: \\&quot;remote\\&quot;,\\n        source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}} \\\/&gt;\\n    &lt;\\\/Image&gt;&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;logo.jpg\\&quot; sign-url=\\&quot;true\\&quot;&gt;\\n      &lt;cl-transformation customPreFunction={\\n       functionType: \\&quot;remote\\&quot;,\\n       source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}&gt;\\n      &lt;\\\/cl-transformation&gt;\\n    &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;logo.jpg\\&quot; sign-url=\\&quot;true\\&quot;&gt;\\n      &lt;cl-transformation customPreFunction={\\n       functionType: \\&quot;remote\\&quot;,\\n       source: \\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;}&gt;\\n      &lt;\\\/cl-transformation&gt;\\n    &lt;\\\/cl-image&gt;&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n      .Signed(true)\\n      .CustomFunction(CustomPreFunction.Remote(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .BuildImageTag(\\&quot;logo.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n      .Signed(true)\\n      .CustomFunction(CustomPreFunction.Remote(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .BuildImageTag(\\&quot;logo.jpg\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl()\\n      .setTransformation(CLDTransformation()\\n        .setCustomPreFunction(CLDCustomFunction()\\n          .setFunctionType(\\&quot;remote\\&quot;)\\n          .setSource(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .generate(\\&quot;logo.jpg\\&quot;, signUrl: true)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl()\\n      .setTransformation(CLDTransformation()\\n        .setCustomPreFunction(CLDCustomFunction()\\n          .setFunctionType(\\&quot;remote\\&quot;)\\n          .setSource(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;)))\\n      .generate(\\&quot;logo.jpg\\&quot;, signUrl: true)!, cloudinary: cloudinary)&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n      .signed(true)\\n      .customFunction(new CustomPreFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;))\\n      .generate(\\&quot;logo.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n      .signed(true)\\n      .customFunction(new CustomPreFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/my.example.custom\\\/function\\&quot;))\\n      .generate(\\&quot;logo.jpg\\&quot;);&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<p>The code generates a URL similar to:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/demo\/image\/upload\/s--511a3ca4--\/fn_pre:remote:aHR0cHM6Ly9teS5leGFtcGxlLmN1c3RvbS9mdW5jdGlvbg==\/\/logo.jpg<\/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\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>A Preprocessing Example<\/h3>\n<p>The following example uses variables together with a preprocessing remote function in order to render a text string within an SVG file. The variables set the colors for the text (<code>fillc<\/code>) and the font stroke (<code>strokec<\/code>), as well as the text itself (<code>msgstr<\/code>). Note that the uploaded SVG file has been prepared to include variables, each of them specified with triple hash marks before and after the variable name (e.g., <code>###fillc###<\/code>). The custom preprocessing remote function searches for these variables and replaces them with the given values.<\/p>\n<p>Exhibit 1 &#8211; The SVG file uploaded  to Cloudinary including the variable definitions:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span> <span class=\"hljs-attr\">viewBox<\/span>=<span class=\"hljs-string\">\"0 0 1000 300\"<\/span>\n  <span class=\"hljs-attr\">xmlns<\/span>=<span class=\"hljs-string\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span>\n  <span class=\"hljs-attr\">xmlns:xlink<\/span>=<span class=\"hljs-string\">\"http:\/\/www.w3.org\/1999\/xlink\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">defs<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"MyPath\"<\/span>\n      <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M 100 200\n      C 200 100 300   0 400 100\n      C 500 200 600 300 700 200\n      C 800 100 900 100 900 100\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">defs<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">text<\/span> <span class=\"hljs-attr\">x<\/span>=<span class=\"hljs-string\">\"10\"<\/span> <span class=\"hljs-attr\">y<\/span>=<span class=\"hljs-string\">\"100\"<\/span> <span class=\"hljs-attr\">font-size<\/span>=<span class=\"hljs-string\">\"40\"<\/span> <span class=\"hljs-attr\">fill<\/span>=<span class=\"hljs-string\">\"###fillc###\"<\/span> <span class=\"hljs-attr\">stroke<\/span>=<span class=\"hljs-string\">\"###strokec###\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textPath<\/span> <span class=\"hljs-attr\">xlink:href<\/span>=<span class=\"hljs-string\">\"#MyPath\"<\/span>&gt;<\/span>\n       ###msgstr###\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">textPath<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">text<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/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\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Exhibit 2 &#8211; The SDK code for generating the image tag:<\/p>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;msg_tmp.svg\\&quot;,\\n      :sign_url =&gt; true,\\n      :variables =&gt; [\\n        [\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;],\\n        [\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;],\\n        [\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;]],\\n      :custom_pre_function =&gt; {\\n        :function_type =&gt; \\&quot;remote\\&quot;, \\n        :source =&gt; \\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;msg_tmp.svg\\&quot;,\\n      :sign_url =&gt; true,\\n      :variables =&gt; [\\n        [\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;],\\n        [\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;],\\n        [\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;]],\\n      :custom_pre_function =&gt; {\\n        :function_type =&gt; \\&quot;remote\\&quot;, \\n        :source =&gt; \\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;msg_tmp.svg\\&quot;, array(\\n      \\&quot;sign_url\\&quot; =&gt; true,\\n      \\&quot;variables\\&quot; =&gt; array(\\n        (\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;),\\n        (\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;),\\n        (\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;)),\\n      \\&quot;custom_pre_function\\&quot; =&gt; array(\\n        \\&quot;function_type\\&quot; =&gt; \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; =&gt; \\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;)))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;msg_tmp.svg\\&quot;, array(\\n      \\&quot;sign_url\\&quot; =&gt; true,\\n      \\&quot;variables\\&quot; =&gt; array(\\n        (\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;),\\n        (\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;),\\n        (\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;)),\\n      \\&quot;custom_pre_function\\&quot; =&gt; array(\\n        \\&quot;function_type\\&quot; =&gt; \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; =&gt; \\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;)))&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;msg_tmp.svg\\&quot;).image(\\n      sign_url = True,\\n      variables = {\\n        \\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;,\\n        \\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;,\\n        \\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;},\\n      custom_pre_function = {\\n        \\&quot;function_type\\&quot; = \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; = \\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;msg_tmp.svg\\&quot;).image(\\n      sign_url = True,\\n      variables = {\\n        \\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;,\\n        \\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;,\\n        \\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;},\\n      custom_pre_function = {\\n        \\&quot;function_type\\&quot; = \\&quot;remote\\&quot;, \\n        \\&quot;source\\&quot; = \\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;msg_tmp.svg\\&quot;, {\\n      sign_url: true,\\n      variables =&gt; [\\n        [\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;],\\n        [\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;],\\n        [\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;]],\\n      custom_pre_function:{\\n        function_type: \\&quot;remote\\&quot;, \\n        source: \\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;}})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;msg_tmp.svg\\&quot;, {\\n      sign_url: true,\\n      variables =&gt; [\\n        [\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;],\\n        [\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;],\\n        [\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;]],\\n      custom_pre_function:{\\n        function_type: \\&quot;remote\\&quot;, \\n        source: \\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;}})&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n      .signed(true)\\n      .variables(\\n        variable(\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;),\\n        variable(\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;),\\n        variable(\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;)),\\n      .customPreFunction(\\n        remote(\\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;)))\\n      .imageTag(\\&quot;msg_tmp.svg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n      .signed(true)\\n      .variables(\\n        variable(\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;),\\n        variable(\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;),\\n        variable(\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;)),\\n      .customPreFunction(\\n        remote(\\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;)))\\n      .imageTag(\\&quot;msg_tmp.svg\\&quot;);&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;msg_tmp.svg&#039;, {\\n      signUrl: true,\\n      variables: [\\n        [\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;],\\n        [\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;],\\n        [\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;]],\\n      customPreFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;)}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;msg_tmp.svg&#039;, {\\n      signUrl: true,\\n      variables: [\\n        [\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;],\\n        [\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;],\\n        [\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;]],\\n      customPreFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;)}).toHtml();&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(&#039;msg_tmp.svg&#039;, {\\n      signUrl: true,\\n      variables: [\\n        [\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;],\\n        [\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;],\\n        [\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;]],\\n      customPreFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;)})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(&#039;msg_tmp.svg&#039;, {\\n      signUrl: true,\\n      variables: [\\n        [\\&quot;$fillc\\&quot;, \\&quot;!yellow!\\&quot;],\\n        [\\&quot;$strokec\\&quot;, \\&quot;!black!\\&quot;],\\n        [\\&quot;$msgstr\\&quot;, \\&quot;!The quick brown fox jumps over the lazy dog!\\&quot;]],\\n      customPreFunction: new cloudinary.CustomFunction()\\n        .functionType(\\&quot;remote\\&quot;)\\n        .source(\\&quot;https:\\\/\\\/urmai0up1j.execute-api.us-east-1.amazonaws.com\\\/test\\&quot;)})&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<p>Exhibit 3 &#8211; The code generates a URL similar to:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">http:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/demo\/image\/upload\/s--kkSWOzr4--\/$fillc_!yellow!,$strokec_!black!,$msgstr_!The quick brown fox jumps over the lazy dog!,fn_pre:remote:aHR0cHM6Ly91cm1haTB1cDFqLmV4ZWN1dGUtYXBpLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tL3Rlc3Q=\/msg_tmp.svg<\/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\">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>Exhibit 4 &#8211; The resulting image:<\/p>\n<p>&lt;img src=\u201chttps:\/\/res.cloudinary.com\/demo\/image\/upload\/msg_tmp_comp.jpg\u201d<\/img><\/p>\n<h2>Fully Extensible Image Processing<\/h2>\n<p>Cloudinary strives to enhance our core features as best we can, prioritizing features that will benefit many customers, and to be as responsive as possible to customer requests. As extensive as our open platform functionality may be, we may not currently support a specific functionality, and so custom functions give our customers the flexibility to incorporate their own functionality in the image-processing pipeline. It also makes it relatively simple to incorporate other 3rd party functionality. Make sure to read up on all the details about custom functions in the <a href=\"https:\/\/cloudinary.com\/documentation\/custom_functions\">documentation<\/a>, and note that custom functions are available with no extra charge for all Cloudinary\u2019s plans, including the <a href=\"https:\/\/cloudinary.com\/users\/register_free\">free plan<\/a>.<\/p>\n<div>\n<style>\ntable{\n    table-layout: fixed;\n}\n<p>.art-img:hover  {\nborder: solid 6px #aaa;\nborder-radius: 6px;\ncursor: pointer;\nopacity: 1;<\/p>\n<p>}\n.step_number {\nbackground:  black;\ncolor:  white;\nwidth: 24px;\nheight: 24px;\ndisplay: inline-block;\ntext-align: center;\nline-height: 24px;\nborder-radius: 100px;\n}\n.art-img {\nborder: solid 6px white;\nborder-radius: 6px;\nopacity: 0.5;<\/p>\n<p>}\n.art-img.active {\nborder: solid 6px black;\nborder-radius: 6px;\nopacity: 1;<\/p>\n<p>}\n.photo-img:hover  {\nborder: solid 6px #aaa;\nborder-radius: 6px;\ncursor: pointer;\nopacity: 1;<\/p>\n<p>}\n.photo-img {\nborder: solid 6px #aaa;\nborder-radius: 6px;\nopacity: 0.5;<\/p>\n<p>}\n.photo-img.active {\nborder: solid 6px black;\nborder-radius: 6px;\nopacity: 1;<\/p>\n<p>}<\/p>\n<p>.apply-button:hover  {\ncursor: pointer;<\/p>\n<p>}\n<\/style><\/p>\n<\/div>\n<script src=\"\/\/widget.cloudinary.com\/global\/all.js\" type=\"text\/javascript\"><\/script>   \n<script type=\"text\/javascript\"> \nvar A = \"custom\";\nvar B = document.getElementById(\"color-quantity\").value; \n\n\nfunction updateResult(result) {\n    var $display = \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors_#art_image#,fn_wasm:quantize.wasm\/#use-img#.jpg\"\n    var $urldisplay = \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors_#art_image#,fn_wasm:quantize.wasm\/#use-img#.jpg\"\n    var $linkdisplay = \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors_#art_image#,fn_wasm:quantize.wasm\/#use-img#.jpg\"\n    var $userpic = \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_pad,dpr_2.0\/#upic#.jpg\"\n\n    var $imglink = $('#imagelink');\n    var $img = $('#testpic');   \n    var widget_id = result[\"public_id\"];\n    A =   widget_id;\n   B = document.getElementById(\"color-quantity\").value; \n    if (!B) {\n      B = \"6\";\n    }\n\n    var newUrl = $display.replace('#use-img#', A).replace('#art_image#', B);\n    var newUrl2 = $urldisplay.replace('#use-img#', A).replace('#art_image#', B);\n    var newUrl3 = $linkdisplay.replace('#use-img#', A).replace('#art_image#', B);\n\n     var newUserUrl = $userpic.replace('#upic#', A); \n\n\n    var $ccloudurl = $('#cloudurl');\n    document.getElementById(\"c-url\").textContent=newUrl2;\n    $img.attr('src', newUrl);\n    $ccloudurl.attr('href', newUrl2);    \n    $imglink.attr('href', newUrl3);\n   $('#photo4').attr('src', newUserUrl).data('url-image', widget_id);\n\n     $('.photo-img').removeClass('active');\n     $('#photo4').addClass('active');\n  };\n\n\n  document.getElementById(\"upload_widget_opener\").addEventListener(\"click\", function(e) {\n     e.preventDefault();\n    cloudinary.openUploadWidget({ cloud_name: 'demo', upload_preset: 'st_blog',\n    sources: ['local','url','camera','dropbox', 'image_search','google_photos', 'facebook'], google_api_key: 'AIzaSyDaQj7FO1IQtp9DSB5YNP5jjG6f_mItEQ4'}, \n      function(error, result) { console.log(result[0].public_id);  console.log(error, result); updateResult(result[0]) });\n  }, false);\n\n\n<\/script>\n<script>\n \/\/<![CDATA[   \n\n\n function insertScript(src, callback) {\n  var script = document.createElement('script');\n  script.onload = callback;\n  script.type = 'text\/javascript';\n  script.async = true;\n  script.src = src;\n  var s = document.getElementsByTagName('script')[0];\n  s.parentNode.insertBefore(script, s);\n }\n insertScript('\/javascripts\/jquery.min.js', function(){\n \n  $('.apply-button').click(function(){\n\n\n  \tvar $display = \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors_#art_image#,fn_wasm:quantize.wasm\/#use-img#.jpg\"\n    var $urldisplay = \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors_#art_image#,fn_wasm:quantize.wasm\/#use-img#.jpg\"\n    var $linkdisplay = \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$colors_#art_image#,fn_wasm:quantize.wasm\/#use-img#.jpg\"\n\n    var $imglink = $('#imagelink');\n    var $img = $('#testpic');  \n\n    if (A == \"custom\") {\n      return;\n    }\n\n    if (!A) {\n      A = \"golf_sand_st\"\n    }\n    B = document.getElementById(\"color-quantity\").value; \n    if (!B) {\n      B = \"6\"\n    }\n \n    var newUrl = $display.replace('#use-img#', A).replace('#art_image#', B);\n    var newUrl2 = $urldisplay.replace('#use-img#', A).replace('#art_image#', B);\n    var newUrl3 = $linkdisplay.replace('#use-img#', A).replace('#art_image#', B);\n\n    \n    var $ccloudurl = $('#cloudurl');\n    document.getElementById(\"c-url\").textContent=newUrl2;\n    $img.attr('src', newUrl);\n    $ccloudurl.attr('href', newUrl2);    \n    $imglink.attr('href', newUrl3);\n\n  });\n\n  $('.photo-img').click(function(){\n\n    var $sender = $(this);\n    A =  $sender.data('url-image');\n     $('.photo-img').removeClass('active');\n   $sender.addClass('active');\n\n\n  });\n\n  $('.art-img').click(function(){\n\n  \tvar $sender = $(this);\n    B =  $sender.data('url-image');\n     $('.art-img').removeClass('active');\n   $sender.addClass('active');\n  \n  });\n\n });\n \/\/]]>\n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21900,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,156,165],"class_list":["post-21899","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-image-enhancement","tag-image-transformation"],"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 a custom function in the image delivery pipeline<\/title>\n<meta name=\"description\" content=\"Add additional functionality to the image transformation pipeline with a custom function, either uploaded as a WASM file or hosted as a remote function.\" \/>\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\/inject_your_own_image_processing_by_using_a_custom_function\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inject Your Own Image Processing by Using a Custom Function\" \/>\n<meta property=\"og:description\" content=\"Add additional functionality to the image transformation pipeline with a custom function, either uploaded as a WASM file or hosted as a remote function.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-09T12:10:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-04T22:46:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions-jpg?_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\/jpeg\" \/>\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\/inject_your_own_image_processing_by_using_a_custom_function#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Inject Your Own Image Processing by Using a Custom Function\",\"datePublished\":\"2019-07-09T12:10:51+00:00\",\"dateModified\":\"2024-06-04T22:46:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"Image Enhancement\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function\",\"url\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function\",\"name\":\"Use a custom function in the image delivery pipeline\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions.jpg?_i=AA\",\"datePublished\":\"2019-07-09T12:10:51+00:00\",\"dateModified\":\"2024-06-04T22:46:57+00:00\",\"description\":\"Add additional functionality to the image transformation pipeline with a custom function, either uploaded as a WASM file or hosted as a remote function.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inject Your Own Image Processing by Using a Custom Function\"}]},{\"@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 a custom function in the image delivery pipeline","description":"Add additional functionality to the image transformation pipeline with a custom function, either uploaded as a WASM file or hosted as a remote function.","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\/inject_your_own_image_processing_by_using_a_custom_function","og_locale":"en_US","og_type":"article","og_title":"Inject Your Own Image Processing by Using a Custom Function","og_description":"Add additional functionality to the image transformation pipeline with a custom function, either uploaded as a WASM file or hosted as a remote function.","og_url":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function","og_site_name":"Cloudinary Blog","article_published_time":"2019-07-09T12:10:51+00:00","article_modified_time":"2024-06-04T22:46:57+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function"},"author":{"name":"","@id":""},"headline":"Inject Your Own Image Processing by Using a Custom Function","datePublished":"2019-07-09T12:10:51+00:00","dateModified":"2024-06-04T22:46:57+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions.jpg?_i=AA","keywords":["Asset Management","Image Enhancement","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function","url":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function","name":"Use a custom function in the image delivery pipeline","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions.jpg?_i=AA","datePublished":"2019-07-09T12:10:51+00:00","dateModified":"2024-06-04T22:46:57+00:00","description":"Add additional functionality to the image transformation pipeline with a custom function, either uploaded as a WASM file or hosted as a remote function.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Inject Your Own Image Processing by Using a Custom Function"}]},{"@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\/v1649721149\/Web_Assets\/blog\/Custom-Functions\/Custom-Functions.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21899","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=21899"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21899\/revisions"}],"predecessor-version":[{"id":34362,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21899\/revisions\/34362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21900"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}