JavaScript图像大小产生软特效,其中许多无法实现级联样式表 .JS可实现缩放效果自动化, 用户可缩放图像,
文章教您如何调整JaavaScript图像缩放效果,并快速高效地在云中做相同工作,用它也可以应用许多其他吸引效果实例以百分比值缩放并伸展宽度高达原创值的140%保证你将印象深刻
题目如下:
JS调整图像大小对创建在线产品画廊特别有用,用户可按最大设置缩放图片
重定任务需要两个函数,可直接插入HTML源码
tags or into a standalone JS file. Those functions work for any
tag that you label with the ID zoom_img
. See this full demo of the code.
The two functions are as follows:
zoomin()
, which creates a zoom-in action for scaling up the image size by 100 pixels until the maximum defined size (1000 px.) is reached.
function zoomin(){
var myImg = document.getElementById("zoom_img");
var currWidth = myImg.clientWidth;
if(currWidth >= 1000){
alert("You’re fully zoomed in!");
} else{
myImg.style.width = (currWidth + 100) + "px";
}
}
zoomout()
, which creates a zoom-out action for scaling down the image by 100 pixels until the minimum defined size (50 px.) is reached.
function zoomout(){
var myImg = document.getElementById("zoom_img");
var currWidth = myImg.clientWidth;
if(currWidth >= 50){
alert("That’s as small as it gets.");
} else{
myImg.style.width = (currWidth - 100) + "px";
}
}
To enable users to call those functions, create an interface (see below) with buttons for the image. Add them above or below the image element in your HTML file.
Zoom In
Zoom Out
For more details on resizing images with CSS, see Image Resizing: Manually With CSS and Automatically With Cloudinary .
Copy link to this heading
Automating the resizing task is ideal for enabling users to resize images in JavaScript or for resizing them with a built-in mechanism before being stored away. An example of the code in this section is on CodePen.
To start, build the HTML framework into which to load, preview, and transform your images. The following code creates an input to accept images, a button to enable resizing, and two placeholders for your original and resized images.
Next, create a function to accept the images:
Note: The code below is in jQuery. Be sure to link or refer to the jQuery library.
$(document).ready(function() {
$("#imageFile").change(function(event) {
var files = event.target.files;
var file = files[0];
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("preview").src = e.target.result;
};
reader.readAsDataURL(file);
}
});
});
Finally, create a resizing function (see below) within which to load the image into the file reader, set the image to be resized, create a canvas for resizing, and output the resized image. Note the boldfaced comments for each of the steps.
function resizeImage() {
var filesToUploads = document.getElementById("imageFile").files;
var file = filesToUploads[0];
if (file) {
var reader = new FileReader();
// Set the image for the FileReader
reader.onload = function (e) {
var img = document.createElement("img");
img.src = e.target.result;
// Create your canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 500;
var MAX_HEIGHT = 500;
var width = img.width;
var height = img.height;
// Add the resizing logic
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
//Specify the resizing result
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL(file.type);
document.getElementById("output").src = dataurl;
};
reader.readAsDataURL(file);
}
}
Copy link to this heading
A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan . While on that platform, you can upload your images, apply built-in effects, filters, and modifications, including automated image rotations that are difficult or impossible to produce with CSS and JS.
Also with Cloudinary, you can easily transform images programmatically with SDKs or URL parameters. Cloudinary applies changes dynamically, leaving your original images intact. That means you can modify images on the fly as your site design evolves and as you support more devices and screen sizes—a huge convenience and time saver.
Below are three faster and easier ways in which to resize images in JavaScript with Cloudinary. All you need to do is add parameters to the URL.
Copy link to this heading
With Cloudinary, you can automatically crop images to the right size through content-aware AI. During the process, you can automatically select faces, individual features, or areas of interest by applying the gravity
filter (g
).
The g_auto
settings in this example automatically crop the most interesting area, as determined by AI:
cloudinary.imageTag('veducate/skater_2_-_800.jpg' , {width : 300 , height : 300 , gravity : "auto" , crop : "crop" }).toHtml();
Code language: JavaScript ( javascript )
You can also specify areas to preserve with smart cropping. A use case is to ensure that the model doesn’t take center stage in product images. This example specifies the backpack as the area of focus:
<\/Image>","codeSnippet":"\n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"classic\")))\n )\n .setVersion(1551428220);","codeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"classic\")))\n )\n .setVersion(1551428220);","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":"\n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"classic\")))\n )\n .setVersion(1551428220);","codeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"classic\")))\n )\n .setVersion(1551428220);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":"\n\t\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"classic\")))\n )\n .setVersion(1551428220);","codeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"classic\")))\n )\n .setVersion(1551428220);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('veducate\/spencer-backman-482079-unsplash.jpg', {gravity: \"auto:classic\", height: 175, width: 175, crop: \"thumb\"}).toHtml();","codeSnippet":"cloudinary.imageTag('veducate\/spencer-backman-482079-unsplash.jpg', {gravity: \"auto:classic\", height: 175, width: 175, crop: \"thumb\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\").image(gravity=\"auto:classic\", height=175, width=175, crop=\"thumb\")","codeSnippet":"CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\").image(gravity=\"auto:classic\", height=175, width=175, crop=\"thumb\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('veducate\/spencer-backman-482079-unsplash.jpg'))\n\t->resize(Resize::thumbnail()->width(175)\n->height(175)\n\t->gravity(\n\tGravity::autoGravity()\n\t->autoFocus(\n\tAutoFocus::focusOn(\"classic\"))\n\t)\n\t)\n\t->version(1551428220);","codeSnippet":"(new ImageTag('veducate\/spencer-backman-482079-unsplash.jpg'))\n\t->resize(Resize::thumbnail()->width(175)\n->height(175)\n\t->gravity(\n\tGravity::autoGravity()\n\t->autoFocus(\n\tAutoFocus::focusOn(\"classic\"))\n\t)\n\t)\n\t->version(1551428220);","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"veducate\/spencer-backman-482079-unsplash.jpg\", array(\"gravity\"=>\"auto:classic\", \"height\"=>175, \"width\"=>175, \"crop\"=>\"thumb\"))","codeSnippet":"cl_image_tag(\"veducate\/spencer-backman-482079-unsplash.jpg\", array(\"gravity\"=>\"auto:classic\", \"height\"=>175, \"width\"=>175, \"crop\"=>\"thumb\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().gravity(\"auto:classic\").height(175).width(175).crop(\"thumb\")).imageTag(\"veducate\/spencer-backman-482079-unsplash.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().gravity(\"auto:classic\").height(175).width(175).crop(\"thumb\")).imageTag(\"veducate\/spencer-backman-482079-unsplash.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"veducate\/spencer-backman-482079-unsplash.jpg\", :gravity=>\"auto:classic\", :height=>175, :width=>175, :crop=>\"thumb\")","codeSnippet":"cl_image_tag(\"veducate\/spencer-backman-482079-unsplash.jpg\", :gravity=>\"auto:classic\", :height=>175, :width=>175, :crop=>\"thumb\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\"auto:classic\").Height(175).Width(175).Crop(\"thumb\")).BuildImageTag(\"veducate\/spencer-backman-482079-unsplash.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\"auto:classic\").Height(175).Width(175).Crop(\"thumb\")).BuildImageTag(\"veducate\/spencer-backman-482079-unsplash.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('veducate\/spencer-backman-482079-unsplash.jpg').transformation(Transformation()\n\t.resize(Resize.thumbnail().width(175)\n.height(175)\n\t.gravity(\n\tGravity.autoGravity()\n\t.autoFocus(\n\tAutoFocus.focusOn(\"classic\"))\n\t)\n\t)\n\t.version(1551428220));","codeSnippet":"cloudinary.image('veducate\/spencer-backman-482079-unsplash.jpg').transformation(Transformation()\n\t.resize(Resize.thumbnail().width(175)\n.height(175)\n\t.gravity(\n\tGravity.autoGravity()\n\t.autoFocus(\n\tAutoFocus.focusOn(\"classic\"))\n\t)\n\t)\n\t.version(1551428220));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(\"auto:classic\").setHeight(175).setWidth(175).setCrop(\"thumb\")).generate(\"veducate\/spencer-backman-482079-unsplash.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(\"auto:classic\").setHeight(175).setWidth(175).setCrop(\"thumb\")).generate(\"veducate\/spencer-backman-482079-unsplash.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().gravity(\"auto:classic\").height(175).width(175).crop(\"thumb\")).generate(\"veducate\/spencer-backman-482079-unsplash.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().gravity(\"auto:classic\").height(175).width(175).crop(\"thumb\")).generate(\"veducate\/spencer-backman-482079-unsplash.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('veducate\/spencer-backman-482079-unsplash.jpg').transformation(Transformation()\n\t.resize(Resize.thumbnail().width(175)\n.height(175)\n\t.gravity(\n\tGravity.autoGravity()\n\t.autoFocus(\n\tAutoFocus.focusOn(\"classic\"))\n\t)\n\t)\n\t.version(1551428220));","codeSnippet":"cloudinary.image('veducate\/spencer-backman-482079-unsplash.jpg').transformation(Transformation()\n\t.resize(Resize.thumbnail().width(175)\n.height(175)\n\t.gravity(\n\tGravity.autoGravity()\n\t.autoFocus(\n\tAutoFocus.focusOn(\"classic\"))\n\t)\n\t)\n\t.version(1551428220));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n\t resize(Resize.thumbnail() { width(175)\n height(175)\n\t gravity(\n\tGravity.autoGravity() {\n\t autoFocus(\n\tAutoFocus.focusOn(\"classic\"))\n\t })\n\t })\n\t version(1551428220) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n\t resize(Resize.thumbnail() { width(175)\n height(175)\n\t gravity(\n\tGravity.autoGravity() {\n\t autoFocus(\n\tAutoFocus.focusOn(\"classic\"))\n\t })\n\t })\n\t version(1551428220) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"veducate\/spencer-backman-482079-unsplash.jpg\", {gravity: \"auto:classic\", height: 175, width: 175, crop: \"thumb\"})","codeSnippet":"$.cloudinary.image(\"veducate\/spencer-backman-482079-unsplash.jpg\", {gravity: \"auto:classic\", height: 175, width: 175, crop: \"thumb\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"classic\")))\n )\n .setVersion(1551428220);","codeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"classic\")))\n )\n .setVersion(1551428220);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]"
parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/c_thumb,g_auto:classic,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"crop_mode":"thumb","gravity":"auto:classic","height":"175","width":"175"}],"transformation_string":"c_thumb,g_auto:classic,h_175,w_175","url_suffix":"","version":"1551428220","secure":true,"public_id":"veducate\/spencer-backman-482079-unsplash.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}"
with-url="true"
>
Loading code examples
g_auto:classic
<\/Image>","codeSnippet":"\n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"backpack\")))\n )\n .setVersion(1551428220);","codeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"backpack\")))\n )\n .setVersion(1551428220);","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":"\n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"backpack\")))\n )\n .setVersion(1551428220);","codeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"backpack\")))\n )\n .setVersion(1551428220);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":"\n\t\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"backpack\")))\n )\n .setVersion(1551428220);","codeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"backpack\")))\n )\n .setVersion(1551428220);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('veducate\/spencer-backman-482079-unsplash.jpg', {gravity: \"auto:backpack\", height: 175, width: 175, crop: \"thumb\"}).toHtml();","codeSnippet":"cloudinary.imageTag('veducate\/spencer-backman-482079-unsplash.jpg', {gravity: \"auto:backpack\", height: 175, width: 175, crop: \"thumb\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\").image(gravity=\"auto:backpack\", height=175, width=175, crop=\"thumb\")","codeSnippet":"CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\").image(gravity=\"auto:backpack\", height=175, width=175, crop=\"thumb\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('veducate\/spencer-backman-482079-unsplash.jpg'))\n\t->resize(Resize::thumbnail()->width(175)\n->height(175)\n\t->gravity(\n\tGravity::autoGravity()\n\t->autoFocus(\n\tAutoFocus::focusOn(\"backpack\"))\n\t)\n\t)\n\t->version(1551428220);","codeSnippet":"(new ImageTag('veducate\/spencer-backman-482079-unsplash.jpg'))\n\t->resize(Resize::thumbnail()->width(175)\n->height(175)\n\t->gravity(\n\tGravity::autoGravity()\n\t->autoFocus(\n\tAutoFocus::focusOn(\"backpack\"))\n\t)\n\t)\n\t->version(1551428220);","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"veducate\/spencer-backman-482079-unsplash.jpg\", array(\"gravity\"=>\"auto:backpack\", \"height\"=>175, \"width\"=>175, \"crop\"=>\"thumb\"))","codeSnippet":"cl_image_tag(\"veducate\/spencer-backman-482079-unsplash.jpg\", array(\"gravity\"=>\"auto:backpack\", \"height\"=>175, \"width\"=>175, \"crop\"=>\"thumb\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().gravity(\"auto:backpack\").height(175).width(175).crop(\"thumb\")).imageTag(\"veducate\/spencer-backman-482079-unsplash.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().gravity(\"auto:backpack\").height(175).width(175).crop(\"thumb\")).imageTag(\"veducate\/spencer-backman-482079-unsplash.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"veducate\/spencer-backman-482079-unsplash.jpg\", :gravity=>\"auto:backpack\", :height=>175, :width=>175, :crop=>\"thumb\")","codeSnippet":"cl_image_tag(\"veducate\/spencer-backman-482079-unsplash.jpg\", :gravity=>\"auto:backpack\", :height=>175, :width=>175, :crop=>\"thumb\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\"auto:backpack\").Height(175).Width(175).Crop(\"thumb\")).BuildImageTag(\"veducate\/spencer-backman-482079-unsplash.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\"auto:backpack\").Height(175).Width(175).Crop(\"thumb\")).BuildImageTag(\"veducate\/spencer-backman-482079-unsplash.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('veducate\/spencer-backman-482079-unsplash.jpg').transformation(Transformation()\n\t.resize(Resize.thumbnail().width(175)\n.height(175)\n\t.gravity(\n\tGravity.autoGravity()\n\t.autoFocus(\n\tAutoFocus.focusOn(\"backpack\"))\n\t)\n\t)\n\t.version(1551428220));","codeSnippet":"cloudinary.image('veducate\/spencer-backman-482079-unsplash.jpg').transformation(Transformation()\n\t.resize(Resize.thumbnail().width(175)\n.height(175)\n\t.gravity(\n\tGravity.autoGravity()\n\t.autoFocus(\n\tAutoFocus.focusOn(\"backpack\"))\n\t)\n\t)\n\t.version(1551428220));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(\"auto:backpack\").setHeight(175).setWidth(175).setCrop(\"thumb\")).generate(\"veducate\/spencer-backman-482079-unsplash.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(\"auto:backpack\").setHeight(175).setWidth(175).setCrop(\"thumb\")).generate(\"veducate\/spencer-backman-482079-unsplash.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().gravity(\"auto:backpack\").height(175).width(175).crop(\"thumb\")).generate(\"veducate\/spencer-backman-482079-unsplash.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().gravity(\"auto:backpack\").height(175).width(175).crop(\"thumb\")).generate(\"veducate\/spencer-backman-482079-unsplash.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('veducate\/spencer-backman-482079-unsplash.jpg').transformation(Transformation()\n\t.resize(Resize.thumbnail().width(175)\n.height(175)\n\t.gravity(\n\tGravity.autoGravity()\n\t.autoFocus(\n\tAutoFocus.focusOn(\"backpack\"))\n\t)\n\t)\n\t.version(1551428220));","codeSnippet":"cloudinary.image('veducate\/spencer-backman-482079-unsplash.jpg').transformation(Transformation()\n\t.resize(Resize.thumbnail().width(175)\n.height(175)\n\t.gravity(\n\tGravity.autoGravity()\n\t.autoFocus(\n\tAutoFocus.focusOn(\"backpack\"))\n\t)\n\t)\n\t.version(1551428220));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n\t resize(Resize.thumbnail() { width(175)\n height(175)\n\t gravity(\n\tGravity.autoGravity() {\n\t autoFocus(\n\tAutoFocus.focusOn(\"backpack\"))\n\t })\n\t })\n\t version(1551428220) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n\t resize(Resize.thumbnail() { width(175)\n height(175)\n\t gravity(\n\tGravity.autoGravity() {\n\t autoFocus(\n\tAutoFocus.focusOn(\"backpack\"))\n\t })\n\t })\n\t version(1551428220) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"veducate\/spencer-backman-482079-unsplash.jpg\", {gravity: \"auto:backpack\", height: 175, width: 175, crop: \"thumb\"})","codeSnippet":"$.cloudinary.image(\"veducate\/spencer-backman-482079-unsplash.jpg\", {gravity: \"auto:backpack\", height: 175, width: 175, crop: \"thumb\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"backpack\")))\n )\n .setVersion(1551428220);","codeSnippet":"new CloudinaryImage(\"veducate\/spencer-backman-482079-unsplash.jpg\")\n .resize(\n thumbnail()\n .width(175)\n .height(175)\n .gravity(autoGravity().autoFocus(focusOn(\"backpack\")))\n )\n .setVersion(1551428220);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]"
parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/c_thumb,g_auto:backpack,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"crop_mode":"thumb","gravity":"auto:backpack","height":"175","width":"175"}],"transformation_string":"c_thumb,g_auto:backpack,h_175,w_175","url_suffix":"","version":"1551428220","secure":true,"public_id":"veducate\/spencer-backman-482079-unsplash.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}"
with-url="true"
>
Loading code examples
g_auto:backpack
cloudinary.imageTag('veducate/spencer-backman-482079-unsplash.jpg' , {width : 175 , height : 175 , gravity : "auto:backpack" , crop : "thumb" }).toHtml();
Code language: JavaScript ( javascript )
Copy link to this heading
Photo collages are fun. By combining the overlay (o)
and crop (c)
parameters, you can collect images in any order and embellish them with text or filters.
The example below adds images to the collage with the desired size (w
and h
attributes), position (x
and y
attributes), crop mode (c
attribute), and angle of rotation (`av attribute).
<\/Image>","codeSnippet":"\n\t \n\t \n\t \n\t \n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"yellow_tulip.jpg\")\n .resize(fill().width(220).height(140))\n .overlay(\n source(\n image(\"brown_sheep\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(220))\n )\n .overlay(\n source(\n image(\"horses\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(-110).offsetY(140))\n )\n .overlay(\n source(\n image(\"white_chicken\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(110).offsetY(70))\n )\n .overlay(\n source(\n image(\"butterfly.png\").transformation(\n new Transformation().rotate(byAngle(10)).resize(scale().height(200))\n )\n ).position(new Position().offsetX(-10))\n );","codeSnippet":"new CloudinaryImage(\"yellow_tulip.jpg\")\n .resize(fill().width(220).height(140))\n .overlay(\n source(\n image(\"brown_sheep\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(220))\n )\n .overlay(\n source(\n image(\"horses\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(-110).offsetY(140))\n )\n .overlay(\n source(\n image(\"white_chicken\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(110).offsetY(70))\n )\n .overlay(\n source(\n image(\"butterfly.png\").transformation(\n new Transformation().rotate(byAngle(10)).resize(scale().height(200))\n )\n ).position(new Position().offsetX(-10))\n );","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":"\n\t \n\t \n\t \n\t \n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"yellow_tulip.jpg\")\n .resize(fill().width(220).height(140))\n .overlay(\n source(\n image(\"brown_sheep\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(220))\n )\n .overlay(\n source(\n image(\"horses\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(-110).offsetY(140))\n )\n .overlay(\n source(\n image(\"white_chicken\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(110).offsetY(70))\n )\n .overlay(\n source(\n image(\"butterfly.png\").transformation(\n new Transformation().rotate(byAngle(10)).resize(scale().height(200))\n )\n ).position(new Position().offsetX(-10))\n );","codeSnippet":"new CloudinaryImage(\"yellow_tulip.jpg\")\n .resize(fill().width(220).height(140))\n .overlay(\n source(\n image(\"brown_sheep\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(220))\n )\n .overlay(\n source(\n image(\"horses\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(-110).offsetY(140))\n )\n .overlay(\n source(\n image(\"white_chicken\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(110).offsetY(70))\n )\n .overlay(\n source(\n image(\"butterfly.png\").transformation(\n new Transformation().rotate(byAngle(10)).resize(scale().height(200))\n )\n ).position(new Position().offsetX(-10))\n );","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-image>","codeSnippet":"\n\t\n\t<\/cl-transformation>\n\t\n\t<\/cl-transformation>\n\t\n\t<\/cl-transformation>\n\t\n\t<\/cl-transformation>\n\t\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"yellow_tulip.jpg\")\n .resize(fill().width(220).height(140))\n .overlay(\n source(\n image(\"brown_sheep\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(220))\n )\n .overlay(\n source(\n image(\"horses\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(-110).offsetY(140))\n )\n .overlay(\n source(\n image(\"white_chicken\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(110).offsetY(70))\n )\n .overlay(\n source(\n image(\"butterfly.png\").transformation(\n new Transformation().rotate(byAngle(10)).resize(scale().height(200))\n )\n ).position(new Position().offsetX(-10))\n );","codeSnippet":"new CloudinaryImage(\"yellow_tulip.jpg\")\n .resize(fill().width(220).height(140))\n .overlay(\n source(\n image(\"brown_sheep\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(220))\n )\n .overlay(\n source(\n image(\"horses\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(-110).offsetY(140))\n )\n .overlay(\n source(\n image(\"white_chicken\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(110).offsetY(70))\n )\n .overlay(\n source(\n image(\"butterfly.png\").transformation(\n new Transformation().rotate(byAngle(10)).resize(scale().height(200))\n )\n ).position(new Position().offsetX(-10))\n );","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('yellow_tulip.jpg', {transformation: [ {width: 220, height: 140, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"brown_sheep\"), width: 220, height: 140, x: 220, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"horses\"), width: 220, height: 140, y: 140, x: -110, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"white_chicken\"), width: 220, height: 140, y: 70, x: 110, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"butterfly.png\"), height: 200, x: -10, angle: 10} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('yellow_tulip.jpg', {transformation: [\n {width: 220, height: 140, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"brown_sheep\"), width: 220, height: 140, x: 220, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"horses\"), width: 220, height: 140, y: 140, x: -110, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"white_chicken\"), width: 220, height: 140, y: 70, x: 110, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"butterfly.png\"), height: 200, x: -10, angle: 10}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"yellow_tulip.jpg\").image(transformation=[ {'width': 220, 'height': 140, 'crop': \"fill\"}, {'overlay': \"brown_sheep\", 'width': 220, 'height': 140, 'x': 220, 'crop': \"fill\"}, {'overlay': \"horses\", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': \"fill\"}, {'overlay': \"white_chicken\", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': \"fill\"}, {'overlay': \"butterfly.png\", 'height': 200, 'x': -10, 'angle': 10} ])","codeSnippet":"CloudinaryImage(\"yellow_tulip.jpg\").image(transformation=[\n {'width': 220, 'height': 140, 'crop': \"fill\"},\n {'overlay': \"brown_sheep\", 'width': 220, 'height': 140, 'x': 220, 'crop': \"fill\"},\n {'overlay': \"horses\", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': \"fill\"},\n {'overlay': \"white_chicken\", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': \"fill\"},\n {'overlay': \"butterfly.png\", 'height': 200, 'x': -10, 'angle': 10}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('yellow_tulip.jpg'))\n\t->resize(Resize::fill()->width(220)\n->height(140))\n\t->overlay(Overlay::source(\n\tSource::image(\"brown_sheep\")\n\t->transformation((new Transformation())\n\t->resize(Resize::fill()->width(220)\n->height(140)))\n\t)\n\t->position((new Position())->offsetX(220))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"horses\")\n\t->transformation((new Transformation())\n\t->resize(Resize::fill()->width(220)\n->height(140)))\n\t)\n\t->position((new Position())->offsetX(-110)\n->offsetY(140))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"white_chicken\")\n\t->transformation((new Transformation())\n\t->resize(Resize::fill()->width(220)\n->height(140)))\n\t)\n\t->position((new Position())->offsetX(110)\n->offsetY(70))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"butterfly.png\")\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(10))\n\t->resize(Resize::scale()->height(200)))\n\t)\n\t->position((new Position())->offsetX(-10))\n\t);","codeSnippet":"(new ImageTag('yellow_tulip.jpg'))\n\t->resize(Resize::fill()->width(220)\n->height(140))\n\t->overlay(Overlay::source(\n\tSource::image(\"brown_sheep\")\n\t->transformation((new Transformation())\n\t->resize(Resize::fill()->width(220)\n->height(140)))\n\t)\n\t->position((new Position())->offsetX(220))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"horses\")\n\t->transformation((new Transformation())\n\t->resize(Resize::fill()->width(220)\n->height(140)))\n\t)\n\t->position((new Position())->offsetX(-110)\n->offsetY(140))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"white_chicken\")\n\t->transformation((new Transformation())\n\t->resize(Resize::fill()->width(220)\n->height(140)))\n\t)\n\t->position((new Position())->offsetX(110)\n->offsetY(70))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"butterfly.png\")\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(10))\n\t->resize(Resize::scale()->height(200)))\n\t)\n\t->position((new Position())->offsetX(-10))\n\t);","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"yellow_tulip.jpg\", array(\"transformation\"=>array( array(\"width\"=>220, \"height\"=>140, \"crop\"=>\"fill\"), array(\"overlay\"=>\"brown_sheep\", \"width\"=>220, \"height\"=>140, \"x\"=>220, \"crop\"=>\"fill\"), array(\"overlay\"=>\"horses\", \"width\"=>220, \"height\"=>140, \"y\"=>140, \"x\"=>-110, \"crop\"=>\"fill\"), array(\"overlay\"=>\"white_chicken\", \"width\"=>220, \"height\"=>140, \"y\"=>70, \"x\"=>110, \"crop\"=>\"fill\"), array(\"overlay\"=>\"butterfly.png\", \"height\"=>200, \"x\"=>-10, \"angle\"=>10) )))","codeSnippet":"cl_image_tag(\"yellow_tulip.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>220, \"height\"=>140, \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"brown_sheep\", \"width\"=>220, \"height\"=>140, \"x\"=>220, \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"horses\", \"width\"=>220, \"height\"=>140, \"y\"=>140, \"x\"=>-110, \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"white_chicken\", \"width\"=>220, \"height\"=>140, \"y\"=>70, \"x\"=>110, \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"butterfly.png\", \"height\"=>200, \"x\"=>-10, \"angle\"=>10)\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(220).height(140).crop(\"fill\").chain() .overlay(new Layer().publicId(\"brown_sheep\")).width(220).height(140).x(220).crop(\"fill\").chain() .overlay(new Layer().publicId(\"horses\")).width(220).height(140).y(140).x(-110).crop(\"fill\").chain() .overlay(new Layer().publicId(\"white_chicken\")).width(220).height(140).y(70).x(110).crop(\"fill\").chain() .overlay(new Layer().publicId(\"butterfly.png\")).height(200).x(-10).angle(10)).imageTag(\"yellow_tulip.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(220).height(140).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"brown_sheep\")).width(220).height(140).x(220).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"horses\")).width(220).height(140).y(140).x(-110).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"white_chicken\")).width(220).height(140).y(70).x(110).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"butterfly.png\")).height(200).x(-10).angle(10)).imageTag(\"yellow_tulip.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"yellow_tulip.jpg\", :transformation=>[ {:width=>220, :height=>140, :crop=>\"fill\"}, {:overlay=>\"brown_sheep\", :width=>220, :height=>140, :x=>220, :crop=>\"fill\"}, {:overlay=>\"horses\", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>\"fill\"}, {:overlay=>\"white_chicken\", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>\"fill\"}, {:overlay=>\"butterfly.png\", :height=>200, :x=>-10, :angle=>10} ])","codeSnippet":"cl_image_tag(\"yellow_tulip.jpg\", :transformation=>[\n {:width=>220, :height=>140, :crop=>\"fill\"},\n {:overlay=>\"brown_sheep\", :width=>220, :height=>140, :x=>220, :crop=>\"fill\"},\n {:overlay=>\"horses\", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>\"fill\"},\n {:overlay=>\"white_chicken\", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>\"fill\"},\n {:overlay=>\"butterfly.png\", :height=>200, :x=>-10, :angle=>10}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(220).Height(140).Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"brown_sheep\")).Width(220).Height(140).X(220).Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"horses\")).Width(220).Height(140).Y(140).X(-110).Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"white_chicken\")).Width(220).Height(140).Y(70).X(110).Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"butterfly.png\")).Height(200).X(-10).Angle(10)).BuildImageTag(\"yellow_tulip.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(220).Height(140).Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"brown_sheep\")).Width(220).Height(140).X(220).Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"horses\")).Width(220).Height(140).Y(140).X(-110).Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"white_chicken\")).Width(220).Height(140).Y(70).X(110).Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"butterfly.png\")).Height(200).X(-10).Angle(10)).BuildImageTag(\"yellow_tulip.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('yellow_tulip.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140))\n\t.overlay(Overlay.source(\n\tSource.image(\"brown_sheep\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(220))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"horses\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(-110)\n.offsetY(140))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"white_chicken\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(110)\n.offsetY(70))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"butterfly.png\")\n\t.transformation(new Transformation()\n\t.rotate(Rotate.byAngle(10))\n\t.resize(Resize.scale().height(200)))\n\t)\n\t.position(Position().offsetX(-10))\n\t));","codeSnippet":"cloudinary.image('yellow_tulip.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140))\n\t.overlay(Overlay.source(\n\tSource.image(\"brown_sheep\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(220))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"horses\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(-110)\n.offsetY(140))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"white_chicken\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(110)\n.offsetY(70))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"butterfly.png\")\n\t.transformation(new Transformation()\n\t.rotate(Rotate.byAngle(10))\n\t.resize(Resize.scale().height(200)))\n\t)\n\t.position(Position().offsetX(-10))\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(220).setHeight(140).setCrop(\"fill\").chain() .setOverlay(\"brown_sheep\").setWidth(220).setHeight(140).setX(220).setCrop(\"fill\").chain() .setOverlay(\"horses\").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop(\"fill\").chain() .setOverlay(\"white_chicken\").setWidth(220).setHeight(140).setY(70).setX(110).setCrop(\"fill\").chain() .setOverlay(\"butterfly.png\").setHeight(200).setX(-10).setAngle(10)).generate(\"yellow_tulip.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(220).setHeight(140).setCrop(\"fill\").chain()\n .setOverlay(\"brown_sheep\").setWidth(220).setHeight(140).setX(220).setCrop(\"fill\").chain()\n .setOverlay(\"horses\").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop(\"fill\").chain()\n .setOverlay(\"white_chicken\").setWidth(220).setHeight(140).setY(70).setX(110).setCrop(\"fill\").chain()\n .setOverlay(\"butterfly.png\").setHeight(200).setX(-10).setAngle(10)).generate(\"yellow_tulip.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(220).height(140).crop(\"fill\").chain() .overlay(new Layer().publicId(\"brown_sheep\")).width(220).height(140).x(220).crop(\"fill\").chain() .overlay(new Layer().publicId(\"horses\")).width(220).height(140).y(140).x(-110).crop(\"fill\").chain() .overlay(new Layer().publicId(\"white_chicken\")).width(220).height(140).y(70).x(110).crop(\"fill\").chain() .overlay(new Layer().publicId(\"butterfly.png\")).height(200).x(-10).angle(10)).generate(\"yellow_tulip.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(220).height(140).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"brown_sheep\")).width(220).height(140).x(220).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"horses\")).width(220).height(140).y(140).x(-110).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"white_chicken\")).width(220).height(140).y(70).x(110).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"butterfly.png\")).height(200).x(-10).angle(10)).generate(\"yellow_tulip.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('yellow_tulip.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140))\n\t.overlay(Overlay.source(\n\tSource.image(\"brown_sheep\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(220))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"horses\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(-110)\n.offsetY(140))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"white_chicken\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(110)\n.offsetY(70))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"butterfly.png\")\n\t.transformation(new Transformation()\n\t.rotate(Rotate.byAngle(10))\n\t.resize(Resize.scale().height(200)))\n\t)\n\t.position(Position().offsetX(-10))\n\t));","codeSnippet":"cloudinary.image('yellow_tulip.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140))\n\t.overlay(Overlay.source(\n\tSource.image(\"brown_sheep\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(220))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"horses\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(-110)\n.offsetY(140))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"white_chicken\")\n\t.transformation(new Transformation()\n\t.resize(Resize.fill().width(220)\n.height(140)))\n\t)\n\t.position(Position().offsetX(110)\n.offsetY(70))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"butterfly.png\")\n\t.transformation(new Transformation()\n\t.rotate(Rotate.byAngle(10))\n\t.resize(Resize.scale().height(200)))\n\t)\n\t.position(Position().offsetX(-10))\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"yellow_tulip.jpg\")\n\t resize(Resize.fill() { width(220)\n height(140) })\n\t overlay(Overlay.source(\n\tSource.image(\"brown_sheep\") {\n\t transformation(Transformation {\n\t resize(Resize.fill() { width(220)\n height(140) }) })\n\t }) {\n\t position(Position() { offsetX(220) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"horses\") {\n\t transformation(Transformation {\n\t resize(Resize.fill() { width(220)\n height(140) }) })\n\t }) {\n\t position(Position() { offsetX(-110)\n offsetY(140) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"white_chicken\") {\n\t transformation(Transformation {\n\t resize(Resize.fill() { width(220)\n height(140) }) })\n\t }) {\n\t position(Position() { offsetX(110)\n offsetY(70) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"butterfly.png\") {\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(10))\n\t resize(Resize.scale() { height(200) }) })\n\t }) {\n\t position(Position() { offsetX(-10) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"yellow_tulip.jpg\")\n\t resize(Resize.fill() { width(220)\n height(140) })\n\t overlay(Overlay.source(\n\tSource.image(\"brown_sheep\") {\n\t transformation(Transformation {\n\t resize(Resize.fill() { width(220)\n height(140) }) })\n\t }) {\n\t position(Position() { offsetX(220) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"horses\") {\n\t transformation(Transformation {\n\t resize(Resize.fill() { width(220)\n height(140) }) })\n\t }) {\n\t position(Position() { offsetX(-110)\n offsetY(140) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"white_chicken\") {\n\t transformation(Transformation {\n\t resize(Resize.fill() { width(220)\n height(140) }) })\n\t }) {\n\t position(Position() { offsetX(110)\n offsetY(70) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"butterfly.png\") {\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(10))\n\t resize(Resize.scale() { height(200) }) })\n\t }) {\n\t position(Position() { offsetX(-10) })\n\t }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"yellow_tulip.jpg\", {transformation: [ {width: 220, height: 140, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"brown_sheep\"), width: 220, height: 140, x: 220, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"horses\"), width: 220, height: 140, y: 140, x: -110, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"white_chicken\"), width: 220, height: 140, y: 70, x: 110, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"butterfly.png\"), height: 200, x: -10, angle: 10} ]})","codeSnippet":"$.cloudinary.image(\"yellow_tulip.jpg\", {transformation: [\n {width: 220, height: 140, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"brown_sheep\"), width: 220, height: 140, x: 220, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"horses\"), width: 220, height: 140, y: 140, x: -110, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"white_chicken\"), width: 220, height: 140, y: 70, x: 110, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"butterfly.png\"), height: 200, x: -10, angle: 10}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"yellow_tulip.jpg\")\n .resize(fill().width(220).height(140))\n .overlay(\n source(\n image(\"brown_sheep\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(220))\n )\n .overlay(\n source(\n image(\"horses\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(-110).offsetY(140))\n )\n .overlay(\n source(\n image(\"white_chicken\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(110).offsetY(70))\n )\n .overlay(\n source(\n image(\"butterfly.png\").transformation(\n new Transformation().rotate(byAngle(10)).resize(scale().height(200))\n )\n ).position(new Position().offsetX(-10))\n );","codeSnippet":"new CloudinaryImage(\"yellow_tulip.jpg\")\n .resize(fill().width(220).height(140))\n .overlay(\n source(\n image(\"brown_sheep\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(220))\n )\n .overlay(\n source(\n image(\"horses\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(-110).offsetY(140))\n )\n .overlay(\n source(\n image(\"white_chicken\").transformation(\n new Transformation().resize(fill().width(220).height(140))\n )\n ).position(new Position().offsetX(110).offsetY(70))\n )\n .overlay(\n source(\n image(\"butterfly.png\").transformation(\n new Transformation().rotate(byAngle(10)).resize(scale().height(200))\n )\n ).position(new Position().offsetX(-10))\n );","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]"
parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_220,h_140,c_fill\/l_brown_sheep,w_220,h_140,c_fill,x_220\/l_horses,w_220,h_140,c_fill,y_140,x_-110\/l_white_chicken,w_220,h_140,c_fill,y_70,x_110\/l_butterfly.png,h_200,x_-10,a_10\/yellow_tulip.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"220","height":"140","crop_mode":"fill"},{"overlay":"brown_sheep","width":"220","height":"140","crop_mode":"fill","x":"220"},{"overlay":"horses","width":"220","height":"140","crop_mode":"fill","y":"140","x":"-110"},{"overlay":"white_chicken","width":"220","height":"140","crop_mode":"fill","y":"70","x":"110"},{"overlay":"butterfly.png","height":"200","x":"-10","angle":"10"}],"transformation_string":"w_220,h_140,c_fill\/l_brown_sheep,w_220,h_140,c_fill,x_220\/l_horses,w_220,h_140,c_fill,y_140,x_-110\/l_white_chicken,w_220,h_140,c_fill,y_70,x_110\/l_butterfly.png,h_200,x_-10,a_10","url_suffix":"","version":"","secure":true,"public_id":"yellow_tulip.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}"
with-url="true"
>
Loading code examples
cloudinary.imageTag('yellow_tulip.jpg' , {transformation : [
{width : 220 , height : 140 , crop : "fill" },
{overlay : new cloudinary.Layer().publicId("brown_sheep" ), width : 220 , height : 140 , crop : "fill" , x : 220 },
{overlay : new cloudinary.Layer().publicId("horses" ), width : 220 , height : 140 , crop : "fill" , y : 140 , x : -110 },
{overlay : new cloudinary.Layer().publicId("white_chicken" ), width : 220 , height : 140 , crop : "fill" , y : 70 , x : 110 },
{overlay : new cloudinary.Layer().publicId("butterfly" ), height : 200 , x : -10 , angle : 10 }
]}).toHtml();
Code language: JavaScript ( javascript )
Copy link to this heading
By cropping images into custom shapes , you can fit them in any space. Simply apply the overlay
parameter as a mask and the flag
(f in the URL) parameter.
To set things up, specify the final image size, define the mask and the related function, and specify the source image, like this:
<\/Image>","codeSnippet":"\n\t \n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"pasta.png\")\n .resize(fill().width(173).height(200))\n .reshape(cutByImage(image(\"hexagon_sample\")));","codeSnippet":"new CloudinaryImage(\"pasta.png\")\n .resize(fill().width(173).height(200))\n .reshape(cutByImage(image(\"hexagon_sample\")));","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":"\n\t \n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"pasta.png\")\n .resize(fill().width(173).height(200))\n .reshape(cutByImage(image(\"hexagon_sample\")));","codeSnippet":"new CloudinaryImage(\"pasta.png\")\n .resize(fill().width(173).height(200))\n .reshape(cutByImage(image(\"hexagon_sample\")));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-transformation> <\/cl-image>","codeSnippet":"\n\t\n\t<\/cl-transformation>\n\t\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"pasta.png\")\n .resize(fill().width(173).height(200))\n .reshape(cutByImage(image(\"hexagon_sample\")));","codeSnippet":"new CloudinaryImage(\"pasta.png\")\n .resize(fill().width(173).height(200))\n .reshape(cutByImage(image(\"hexagon_sample\")));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('pasta.png', {transformation: [ {width: 173, height: 200, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"hexagon_sample\"), flags: \"cutter\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('pasta.png', {transformation: [\n {width: 173, height: 200, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"hexagon_sample\"), flags: \"cutter\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"pasta.png\").image(transformation=[ {'width': 173, 'height': 200, 'crop': \"fill\"}, {'overlay': \"hexagon_sample\", 'flags': \"cutter\"} ])","codeSnippet":"CloudinaryImage(\"pasta.png\").image(transformation=[\n {'width': 173, 'height': 200, 'crop': \"fill\"},\n {'overlay': \"hexagon_sample\", 'flags': \"cutter\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('pasta.png'))\n\t->resize(Resize::fill()->width(173)\n->height(200))\n\t->reshape(Reshape::cutByImage(\n\tSource::image(\"hexagon_sample\")));","codeSnippet":"(new ImageTag('pasta.png'))\n\t->resize(Resize::fill()->width(173)\n->height(200))\n\t->reshape(Reshape::cutByImage(\n\tSource::image(\"hexagon_sample\")));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"pasta.png\", array(\"transformation\"=>array( array(\"width\"=>173, \"height\"=>200, \"crop\"=>\"fill\"), array(\"overlay\"=>\"hexagon_sample\", \"flags\"=>\"cutter\") )))","codeSnippet":"cl_image_tag(\"pasta.png\", array(\"transformation\"=>array(\n array(\"width\"=>173, \"height\"=>200, \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"hexagon_sample\", \"flags\"=>\"cutter\")\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(173).height(200).crop(\"fill\").chain() .overlay(new Layer().publicId(\"hexagon_sample\")).flags(\"cutter\")).imageTag(\"pasta.png\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(173).height(200).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"hexagon_sample\")).flags(\"cutter\")).imageTag(\"pasta.png\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"pasta.png\", :transformation=>[ {:width=>173, :height=>200, :crop=>\"fill\"}, {:overlay=>\"hexagon_sample\", :flags=>\"cutter\"} ])","codeSnippet":"cl_image_tag(\"pasta.png\", :transformation=>[\n {:width=>173, :height=>200, :crop=>\"fill\"},\n {:overlay=>\"hexagon_sample\", :flags=>\"cutter\"}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(173).Height(200).Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"hexagon_sample\")).Flags(\"cutter\")).BuildImageTag(\"pasta.png\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(173).Height(200).Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"hexagon_sample\")).Flags(\"cutter\")).BuildImageTag(\"pasta.png\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('pasta.png').transformation(Transformation()\n\t.resize(Resize.fill().width(173)\n.height(200))\n\t.reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\"))));","codeSnippet":"cloudinary.image('pasta.png').transformation(Transformation()\n\t.resize(Resize.fill().width(173)\n.height(200))\n\t.reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\"))));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(173).setHeight(200).setCrop(\"fill\").chain() .setOverlay(\"hexagon_sample\").setFlags(\"cutter\")).generate(\"pasta.png\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(173).setHeight(200).setCrop(\"fill\").chain()\n .setOverlay(\"hexagon_sample\").setFlags(\"cutter\")).generate(\"pasta.png\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(173).height(200).crop(\"fill\").chain() .overlay(new Layer().publicId(\"hexagon_sample\")).flags(\"cutter\")).generate(\"pasta.png\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(173).height(200).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"hexagon_sample\")).flags(\"cutter\")).generate(\"pasta.png\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('pasta.png').transformation(Transformation()\n\t.resize(Resize.fill().width(173)\n.height(200))\n\t.reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\"))));","codeSnippet":"cloudinary.image('pasta.png').transformation(Transformation()\n\t.resize(Resize.fill().width(173)\n.height(200))\n\t.reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\"))));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"pasta.png\")\n\t resize(Resize.fill() { width(173)\n height(200) })\n\t reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\"))) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"pasta.png\")\n\t resize(Resize.fill() { width(173)\n height(200) })\n\t reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\"))) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"pasta.png\", {transformation: [ {width: 173, height: 200, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"hexagon_sample\"), flags: \"cutter\"} ]})","codeSnippet":"$.cloudinary.image(\"pasta.png\", {transformation: [\n {width: 173, height: 200, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"hexagon_sample\"), flags: \"cutter\"}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"pasta.png\")\n .resize(fill().width(173).height(200))\n .reshape(cutByImage(image(\"hexagon_sample\")));","codeSnippet":"new CloudinaryImage(\"pasta.png\")\n .resize(fill().width(173).height(200))\n .reshape(cutByImage(image(\"hexagon_sample\")));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]"
parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_173,h_200,c_fill\/l_hexagon_sample,fl_cutter\/pasta.png","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"173","height":"200","crop_mode":"fill"},{"overlay":"hexagon_sample","flags":"cutter"}],"transformation_string":"w_173,h_200,c_fill\/l_hexagon_sample,fl_cutter","url_suffix":"","version":"","secure":true,"public_id":"pasta.png","extension":"png","format":"png","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}"
with-url="true"
>
Loading code examples
cloudinary.imageTag('pasta.png' , {transformation : [
{width : 173 , height : "200" , crop : “fill”},
{overlay : new cloudinary.Layer().publicId("hexagon_sample" ), flags : “cutter”},
]}).toHtml();
Code language: JavaScript ( javascript )
Adding the relative
parameter matches the mask to the proportions you desire, as in this example:
<\/Image>","codeSnippet":"\n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"pasta.png\").reshape(\n cutByImage(\n image(\"hexagon_sample\").transformation(\n new Transformation().resize(scale().width(\"1.0\").height(\"1.0\").relative())\n )\n )\n);","codeSnippet":"new CloudinaryImage(\"pasta.png\").reshape(\n cutByImage(\n image(\"hexagon_sample\").transformation(\n new Transformation().resize(scale().width(\"1.0\").height(\"1.0\").relative())\n )\n )\n);","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":"\n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"pasta.png\").reshape(\n cutByImage(\n image(\"hexagon_sample\").transformation(\n new Transformation().resize(scale().width(\"1.0\").height(\"1.0\").relative())\n )\n )\n);","codeSnippet":"new CloudinaryImage(\"pasta.png\").reshape(\n cutByImage(\n image(\"hexagon_sample\").transformation(\n new Transformation().resize(scale().width(\"1.0\").height(\"1.0\").relative())\n )\n )\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":"\n\t\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"pasta.png\").reshape(\n cutByImage(\n image(\"hexagon_sample\").transformation(\n new Transformation().resize(scale().width(\"1.0\").height(\"1.0\").relative())\n )\n )\n);","codeSnippet":"new CloudinaryImage(\"pasta.png\").reshape(\n cutByImage(\n image(\"hexagon_sample\").transformation(\n new Transformation().resize(scale().width(\"1.0\").height(\"1.0\").relative())\n )\n )\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('pasta.png', {overlay: new cloudinary.Layer().publicId(\"hexagon_sample\"), flags: [\"cutter\", \"relative\"], width: \"1.0\", height: \"1.0\"}).toHtml();","codeSnippet":"cloudinary.imageTag('pasta.png', {overlay: new cloudinary.Layer().publicId(\"hexagon_sample\"), flags: [\"cutter\", \"relative\"], width: \"1.0\", height: \"1.0\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"pasta.png\").image(overlay=\"hexagon_sample\", flags=[\"cutter\", \"relative\"], width=\"1.0\", height=\"1.0\")","codeSnippet":"CloudinaryImage(\"pasta.png\").image(overlay=\"hexagon_sample\", flags=[\"cutter\", \"relative\"], width=\"1.0\", height=\"1.0\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('pasta.png'))\n\t->reshape(Reshape::cutByImage(\n\tSource::image(\"hexagon_sample\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(1.0)\n->height(1.0)\n\t->relative()\n\t))\n\t));","codeSnippet":"(new ImageTag('pasta.png'))\n\t->reshape(Reshape::cutByImage(\n\tSource::image(\"hexagon_sample\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(1.0)\n->height(1.0)\n\t->relative()\n\t))\n\t));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"pasta.png\", array(\"overlay\"=>\"hexagon_sample\", \"flags\"=>array(\"cutter\", \"relative\"), \"width\"=>\"1.0\", \"height\"=>\"1.0\"))","codeSnippet":"cl_image_tag(\"pasta.png\", array(\"overlay\"=>\"hexagon_sample\", \"flags\"=>array(\"cutter\", \"relative\"), \"width\"=>\"1.0\", \"height\"=>\"1.0\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\"hexagon_sample\")).flags(\"cutter\", \"relative\").width(1.0).height(1.0)).imageTag(\"pasta.png\");","codeSnippet":"cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\"hexagon_sample\")).flags(\"cutter\", \"relative\").width(1.0).height(1.0)).imageTag(\"pasta.png\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"pasta.png\", :overlay=>\"hexagon_sample\", :flags=>[\"cutter\", \"relative\"], :width=>1.0, :height=>1.0)","codeSnippet":"cl_image_tag(\"pasta.png\", :overlay=>\"hexagon_sample\", :flags=>[\"cutter\", \"relative\"], :width=>1.0, :height=>1.0)","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\"hexagon_sample\")).Flags(\"cutter\", \"relative\").Width(1.0).Height(1.0)).BuildImageTag(\"pasta.png\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\"hexagon_sample\")).Flags(\"cutter\", \"relative\").Width(1.0).Height(1.0)).BuildImageTag(\"pasta.png\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('pasta.png').transformation(Transformation()\n\t.reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width('1.0')\n.height('1.0')\n\t.relative()\n\t))\n\t)));","codeSnippet":"cloudinary.image('pasta.png').transformation(Transformation()\n\t.reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width('1.0')\n.height('1.0')\n\t.relative()\n\t))\n\t)));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\"hexagon_sample\").setFlags(\"cutter\", \"relative\").setWidth(1.0).setHeight(1.0)).generate(\"pasta.png\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\"hexagon_sample\").setFlags(\"cutter\", \"relative\").setWidth(1.0).setHeight(1.0)).generate(\"pasta.png\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\"hexagon_sample\")).flags(\"cutter\", \"relative\").width(1.0).height(1.0)).generate(\"pasta.png\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\"hexagon_sample\")).flags(\"cutter\", \"relative\").width(1.0).height(1.0)).generate(\"pasta.png\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('pasta.png').transformation(Transformation()\n\t.reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width('1.0')\n.height('1.0')\n\t.relative()\n\t))\n\t)));","codeSnippet":"cloudinary.image('pasta.png').transformation(Transformation()\n\t.reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width('1.0')\n.height('1.0')\n\t.relative()\n\t))\n\t)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"pasta.png\")\n\t reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(1.0F)\n height(1.0F)\n\t relative()\n\t }) })\n\t })) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"pasta.png\")\n\t reshape(Reshape.cutByImage(\n\tSource.image(\"hexagon_sample\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(1.0F)\n height(1.0F)\n\t relative()\n\t }) })\n\t })) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"pasta.png\", {overlay: new cloudinary.Layer().publicId(\"hexagon_sample\"), flags: [\"cutter\", \"relative\"], width: \"1.0\", height: \"1.0\"})","codeSnippet":"$.cloudinary.image(\"pasta.png\", {overlay: new cloudinary.Layer().publicId(\"hexagon_sample\"), flags: [\"cutter\", \"relative\"], width: \"1.0\", height: \"1.0\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"pasta.png\").reshape(\n cutByImage(\n image(\"hexagon_sample\").transformation(\n new Transformation().resize(scale().width(\"1.0\").height(\"1.0\").relative())\n )\n )\n);","codeSnippet":"new CloudinaryImage(\"pasta.png\").reshape(\n cutByImage(\n image(\"hexagon_sample\").transformation(\n new Transformation().resize(scale().width(\"1.0\").height(\"1.0\").relative())\n )\n )\n);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]"
parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/l_hexagon_sample,fl_cutter.relative,w_1.0,h_1.0\/pasta.png","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"overlay":"hexagon_sample","flags":"cutter.relative","width":"1.0","height":"1.0"}],"transformation_string":"l_hexagon_sample,fl_cutter.relative,w_1.0,h_1.0","url_suffix":"","version":"","secure":true,"public_id":"pasta.png","extension":"png","format":"png","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}"
with-url="true"
>
Loading code examples
cloudinary.imageTag('pasta.png' , {transformation : [
{overlay : new cloudinary.Layer().publicId("hexagon_sample" ), flags : “cutter:relative”, width : 1.0 , height : 1.0 }
]}).toHtml();
Code language: JavaScript ( javascript )
Copy link to this heading
Besides the capability for image resizing, Cloudinary offers a multitude of robust tools for web developers, including the following:
Automated image uploads. You can upload images at scale anywhere from a browser, mobile app, or application back-end directly to the cloud.
Generous image storage. Cloudinary accords you up to 25 GB free managed, secure, and cloud-based storage space with multiregion backup, revision history, and disaster recovery.
Seamless asset management. You can efficiently manage your image library on Cloudinary by performing tasks like searching, organizing, and tagging files; controlling access; and monitoring usage and performance.
Effective image transformation. You can transform, enhance, transcode, crop, scale, and enhance images with a URL-based API or with SDKs that support all popular programming languages.
Automated image optimization. Cloudinary automatically selects the optimal quality and encoding settings for images, adapts the settings to any resolution or pixel density, and scales or crops images to focus on the important regions.
Responsive images. Cloudinary automatically scales images in an art-directed manner, cropping them to fit different resolutions and viewports.
Reliable and fast image delivery. Cloudinary delivers images through Content Delivery Networks (CDNs)—Akamai, Fastly, and CloudFront—with no integration or management on your part.
Do give Cloudinary a try. To start, sign up for a free account.
Copy link to this heading
Want to learn more about CSS image transformations? These articles are an excellent resource: