{"id":23759,"date":"2022-05-04T07:30:00","date_gmt":"2022-05-04T14:30:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=23759"},"modified":"2025-03-02T09:31:55","modified_gmt":"2025-03-02T17:31:55","slug":"placing-images-on-curved-surfaces-through-displacement-mapping","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/placing-images-on-curved-surfaces-through-displacement-mapping","title":{"rendered":"Placing Images on Curved Surfaces Through Displacement Mapping and Cloudinary"},"content":{"rendered":"\n

Say, you want to place a two-dimensional image on a curved surface, such as a mug or bottle, to create a product mockup or highlight printing capabilities. Thanks to Cloudinary\u2019s displacement-mapping feature, that\u2019s easy to do.<\/p>\n\n\n\n

Here\u2019s how displacement mapping works. By means of a map image, the algorithm displaces parts of the image based on the base image\u2019s texture. A lighter red channel in the base causes more horizontal displacement; a darker green channel, more vertical displacement. Also, you can edit image angles for a natural look. Along with the transformation is a detailed map that combines the texture on both surfaces into one.<\/p>\n\n\n\n

This tutorial shows displacement mapping in action. You\u2019ll integrate Cloudinary into an application, upload images to Cloudinary, and then create displacement maps on various curved surfaces, such as coffee cups and T-shirts, with Cloudinary\u2019s Transformation URL API<\/a>. As for prerequisites, you must know the basics of JavaScript and have a working knowledge of Node.js and APIs.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

First, sign up<\/a> for a free Cloudinary account for an ample quota of thousands of transformations, storage, and bandwidth. Note the cloud name, API key, and API secret in your account\u2019s dashboard  for connecting your server to Cloudinary later on.<\/p>\n\n\n\n

Next, install Node.js<\/a>. Afterwards, clone the starting code from this GitHub repo<\/a> and check out the <\/strong>initial branch with two command lines:<\/p>\n\n\n

git clone<\/span> git@github.com:dillionmegida\/cloudinary-snippet.git\ngit checkout initial<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
The application in this tutorial comprises a front end, which uploads images to the back-end server; and a back-end server, which uploads images to Cloudinary. The server fetches from Cloudinary the images along with the related transformation configurations, ultimately delivering the transformed media to the front end for display.<\/p>\n\n\n\n
Building the Front End<\/h2>\n\n\n\n
The front-end code will reside in a directory with two pages: the first one for image uploads, the second one for image display.<\/p>\n\n\n\n
Build the front end, as follows:<\/p>\n\n\n\n
 1. Create an index.html<\/code> file that contains the code below.<\/p>\n\n\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n    <head<\/span>><\/span>\n        <meta<\/span> charset<\/span>=\"UTF-8\"<\/span> \/><\/span>\n        <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span> \/><\/span>\n        <title<\/span>><\/span>File Upload<\/title<\/span>><\/span>\n        <link<\/span> href<\/span>=\".\/style.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span> \/><\/span>\n    <\/head<\/span>><\/span>\n    <body<\/span>><\/span>\n        <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n            <h1<\/span>><\/span>Image Upload<\/h1<\/span>><\/span>\n            <form<\/span> id<\/span>=\"form\"<\/span>><\/span>\n                <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\n                    <label<\/span> for<\/span>=\"image\"<\/span>><\/span>Select image<\/label<\/span>><\/span>\n                    <input<\/span> id<\/span>=\"image\"<\/span> type<\/span>=\"file\"<\/span> \/><\/span>\n                <\/div<\/span>><\/span>\n                <button<\/span> class<\/span>=\"submit-btn\"<\/span> type<\/span>=\"submit\"<\/span>><\/span>Upload<\/button<\/span>><\/span>\n            <\/form<\/span>><\/span>\n        <\/div<\/span>><\/span>\n        <script<\/span> src<\/span>=\".\/script.js\"<\/span>><\/span><\/script<\/span>><\/span>\n    <\/body<\/span>><\/span>\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
 2. Create a style.css<\/code> file with the code below.<\/p>\n\n\n
body<\/span> {\n    background-color<\/span>: rgb<\/span>(6<\/span>, 26<\/span>, 27<\/span>);\n}\n* {\n    box-sizing<\/span>: border-box;\n}\n.container<\/span> {\n    max-width<\/span>: 1200px<\/span>;\n    margin<\/span>: 60px<\/span> auto;\n}\n.container<\/span> h1<\/span> {\n    text-align<\/span>: center;\n    color<\/span>: white;\n}\nform<\/span> {\n    background-color<\/span>: white;\n    padding<\/span>: 30px<\/span>;\n    max-width<\/span>: 500px<\/span>;\n    margin<\/span>: 0<\/span> auto;\n}\nform<\/span> .input-group<\/span> {\n    margin-bottom<\/span>: 15px<\/span>;\n}\nform<\/span> label<\/span> {\n    display<\/span>: block;\n    margin-bottom<\/span>: 10px<\/span>;\n}\nform<\/span> input<\/span> {\n    padding<\/span>: 12px<\/span> 20px<\/span>;\n    width<\/span>: 100%<\/span>;\n    border<\/span>: 1px<\/span> solid #ccc<\/span>;\n}\n.submit-btn<\/span> {\n    width<\/span>: 100%<\/span>;\n    border<\/span>: none;\n    background<\/span>: rgb<\/span>(37<\/span>, 83<\/span>, 3<\/span>);\n    font-size<\/span>: 18px<\/span>;\n    color<\/span>: white;\n    border-radius<\/span>: 3px<\/span>;\n    padding<\/span>: 20px<\/span>;\n    text-align<\/span>: center;\n    cursor<\/span>: pointer;\n}\n.images<\/span> {\n    background-color<\/span>: white;\n    padding<\/span>: 20px<\/span>;\n    display<\/span>: grid;\n    width<\/span>: 100%<\/span>;\n    grid-template-columns<\/span>: repeat<\/span>(4<\/span>, 1<\/span>fr);\n    grid-gap<\/span>: 20px<\/span>;\n}\n.images<\/span> .image<\/span> {\n    width<\/span>: 100%<\/span>;\n}\n.images<\/span> img<\/span> {\n    width<\/span>: 100%<\/span>;\n}\n.get-images-btn<\/span> {\n    background-color<\/span>: rgb<\/span>(37<\/span>, 83<\/span>, 3<\/span>);\n    color<\/span>: white;\n    padding<\/span>: 20px<\/span>;\n    border-radius<\/span>: 3px<\/span>;\n    text-align<\/span>: center;\n    cursor<\/span>: pointer;\n    border<\/span>: none;\n    margin<\/span>: 0<\/span> auto 20px<\/span>;\n    display<\/span>: block;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The above code generates this dialog box:<\/p>\n\n\n\n
\"Dialog<\/figure>\n\n\n\n
 3. Create a script.js<\/code> file with the code below for image uploads.<\/p>\n\n\n
const<\/span> form = document<\/span>.getElementById(\"form\"<\/span>);\n\nif<\/span> (form) form.addEventListener(\"submit\"<\/span>, submitForm);\nfunction<\/span> submitForm<\/span>(e<\/span>) <\/span>{\n    e.preventDefault();\n    const<\/span> image = document<\/span>.getElementById(\"image\"<\/span>);\n    const<\/span> formData = new<\/span> FormData();\n    formData.append(\"image\"<\/span>, image.files[0<\/span>]);\n    fetch(\"http:\/\/localhost:5000\/upload_image\"<\/span>, {\n        method<\/span>: \"post\"<\/span>,\n        body<\/span>: formData,\n    })\n        .then((res<\/span>) =><\/span> {\n            alert(\"successful upload\"<\/span>);\n            image.value = \"\"<\/span>;\n        })\n        .catch((err<\/span>) =><\/span> (\"Error occurred\"<\/span>, err));\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The above code adds a submit event<\/code> listener to the form and attaches the submitForm<\/code> callback function to the listener. On a form submission, you append the selected file to the form data and make a POST<\/code> request to localhost:5000\/upload_files<\/code>. The server will run on localhost:5000<\/code>, and the \/upload_files<\/code> API will upload files.<\/p>\n\n\n\n
Building the Back End<\/h2>\n\n\n\n
Before building the back end, install the following software:<\/p>\n\n\n\n