Stickers – IMG.LY Blog

How To Add a Sticker to a Texture With Three.js

Antonello — Fri, 25 Feb 2022 15:10:58 GMT

Disclaimer: This article has been updated in June 2023 to reflect the changes introduced by Three.js r150

In this article, you will learn to add a sticker to a texture with WebGL. In detail, you will see how to use the Three.js JavaScript library to add an overlay image to a texture. Check out our guide to explore other image editing operations, such as resizing an image in React.

Dealing with 3D graphics used to be a challenging, complex, and time-consuming task. Thanks to libraries like three.js, it has become more accessible than ever. Follow this easy step-by-step how-to and achieve the following result:

Prerequisites

Here are all the prerequisites you need to meet to follow this tutorial and build the demo application shown above:

Explore the official documentation page to learn about how to install three.js.

What is Three.js?

As stated in the GitHub page of the project, the goal of the Three.js project is to create a lightweight 3D JavaScript library with a very low level of complexity. In other words, Three.js aims to make 3D graphics more accessible, especially considering that Three.js only requires a browser to run.

To be more specific, it allows you to create a 3D graphics project where you can modify elements in your browser and see visual feedback. The library is currently built on top of a WebGL renderer, but it also supports WebGPU, SVG, and CSS3D renderers.

If you are not familiar with these concepts, WebGL stands for “Web Graphics Library” and is a JavaScript API for rendering high-performance interactive 3D and 2D graphics. You can use it in many web browsers without external plugins or libraries.

As you can verify from the MDN compatibility page, browsers currently support the most popular WebGL features. However, keep in mind that the user’s device must meet hardware requirements for some features to work.

WebGL is undoubtedly a powerful tool but requires a lot of skill and involves a lot of boilerplate code. Here is where Three.js comes into play, making 3D development much easier.

Now, let’s see it in action!

Adding an Overlay Image to a Texture in WebGL

Clone the GitHub repository that supports this article with the following commands:

git clone https://github.com/Tonel/how-to-add-a-sticker-with-threejs-imgly

Additionally, try the demo application by launchingthe command below:

npm install
npm run start

Then, visit http://localhost:5000 in the browser.

Now that you know what the demo app looks like, keep following this tutorial and learn how to build it.

Specifically, this is the entire JavaScript code required to achieve the goal:

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  40,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(150, 100, 150);
new OrbitControls(camera, document.body);

// initialize the WebGL renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// add light to the scene to make the texture visible
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);

// add the axes helper indicator to the scene
scene.add(new THREE.AxesHelper(20));

// load the base texture
const texture = new THREE.TextureLoader().load(
  'https://threejs.org/examples/textures/hardwood2_diffuse.jpg'
);

// create a new buffer geometry and place it
// to the horizontal plane
const textureGeometry = new THREE.PlaneGeometry(50, 50);
textureGeometry.rotateX(-90 * THREE.MathUtils.DEG2RAD);
// translate the plane to the center of the scene
textureGeometry.translate(25, 0, 25);

// create a MeshBasicMaterial with the base texture
const textureMaterial = new THREE.MeshBasicMaterial({ map: texture });

// create a mesh using the geometry and material
// and add it to the scene
const textureMesh = new THREE.Mesh(textureGeometry, textureMaterial);
scene.add(textureMesh);

// repeat the same logic to place the sticker image
// over the texture
const sticker = new THREE.TextureLoader().load(
  'https://i.imgur.com/IYh17Rv.png'
);

const stickerGeometry = new THREE.PlaneGeometry(20, 20);
stickerGeometry.rotateX(-90 * THREE.MathUtils.DEG2RAD);
stickerGeometry.translate(25, 0, 25);
const stickerMaterial = new THREE.MeshBasicMaterial({
  map: sticker,
  transparent: true,
});
// create a mesh using the image geometry and material
const imageMesh = new THREE.Mesh(stickerGeometry, stickerMaterial);
scene.add(imageMesh);

// adjust the position and rotation of the sticker mesh
// by setting the y-coordinate to 1
// in order for the sticker to rest on the texture
imageMesh.position.set(0, 1, 0);

// render the scene
function launchThreeJs() {
  requestAnimationFrame(launchThreeJs);
  renderer.render(scene, camera);
}

launchThreeJs();

First, the code imports the necessary components from the Three.js library. Next, it initialize a Scene and set up a PerspectiveCamera with OrbitsControl, allowing the user to move around. Then, it creates a WebGL renderer and sets its size to match the window’s dimensions. The scene is lit by an AmbientLight instance, which illuminates all objects in the scene equally.

The snippet loads a base texture using TextureLoader from the given URL, creates a PlaneGeometry, defines a mesh with some geometries, and then add the resulting element to the scene. This logic will take care of rendering the texture image in the scene.

To add the sticker to the texture, the same procude gets repeated. This time, Three.js is instructed to load a sticker image and position it over the original texture. Note that the position of the sticker mesh is adjusted by setting its y-coordinate to 1 to ensure the new image rests on top of the old one.

Et voilà! You just learned how to add a sticker to a WebGL texture with three.js!

Adding a Sticker With `PHOTOEDITORSDK`

PhotoEditorSDK uses WebGL as the main renderer. You can effortlessly add a sticker to your textures without writing any line of code. WebGL will be used behind the scene. Consequently, you do not need to know WebGL or code in GLSL to harness its power.

Adding a sticker to an image only takes a few seconds here. Just jump to this article from the official documentation and learn how to get started with PhotoEditorSDK in Vanilla JavaScript. Then, upload your texture image and a sticker with the Sticker feature. As shown below, you can position a sticker on top of the original image with a point-and-click UI:

Check out this feature on the PhotoEditorSDK demo page.

Conclusion

Today we learned how to add an overlay image to a WebGL texture in JavaScript with three.js. This tool makes it easier to deal with WebGL and 3D graphics. In particular, by using one of the many plugins supporting the Three.js project, we were able to add a sticker to a texture with just a bunch of lines of code.

3D graphics remains a complex topic, especially when it comes to developing in the OpenGL Shading Language. Three.js tries to hide this encumbrance as much as possible, but sometimes you still require it. If you want to avoid using WebGL directly to achieve your goal, consider an all-in-one and easy-to-use solution – such as PhotoEditorSDK.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.

To stay in the loop with our latest articles and case studies, subscribe to our Newsletter.

How to Add a Watermark to an Image in JavaScript

Antonello — Tue, 07 Dec 2021 15:54:32 GMT

In this tutorial, you will learn how to watermark an image in both Vanilla JavaScript and with watermarkjs. The first approach is primarily based on the HTML5 <canvas> element which can be used for applying filters or resizing an image, while the second one involves a popular npm library.

A watermark is a marker deliberately embedded in an audio, video, or image data source, generally used to claim ownership of that source. In the case of an image, a watermark can be represented by text or another image. So, image watermarking is the process of placing an overlay image or text on top of the original image, usually in one of the corners.

Now, let’s see two methods to watermark an image in JavaScript. Follow this step-by-step tutorial and learn how to implement this demo:

Watermarking Images in JavaScript

Keep following this step-by-step tutorial to learn how to watermarker an image in JavaScript. Otherwise, clone the following GitHub repository supporting the article by launching this command:

git clone https://github.com/Tonel/how-to-watermark-an-image-img-ly

Then, open the index.html file in your browser to give a look at the real-world demo you are about to see how to build.

1.A Implementing the watermarking logic using HTML5 `<canvas>`

With this approach, you can achieve the watermarking goal by employing solely the HTML5 <canvas> element. In other words, there are no prerequisites.

Let’s see in detail how to use a watermark image and a watermark text to an image in JavaScript:

async function watermarkImage(originalImage, watermarkImagePath) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const canvasWidth = originalImage.width;
  const canvasHeight = originalImage.height;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  // initializing the canvas with the original image
  context.drawImage(originalImage, 0, 0, canvasWidth, canvasHeight);

  // loading the watermark image and transforming it into a pattern
  const result = await fetch(watermarkImagePath);
  const blob = await result.blob();
  const image = await createImageBitmap(blob);
  const pattern = context.createPattern(image, 'no-repeat');

  // translating the watermark image to the bottom right corner
  context.translate(canvasWidth - image.width, canvasHeight - image.height);
  context.rect(0, 0, canvasWidth, canvasHeight);
  context.fillStyle = pattern;

  return canvas.toDataURL();
}

function watermarkImageWithText(originalImage, watermarkText) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const canvasWidth = originalImage.width;
  const canvasHeight = originalImage.height;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  // initializing the canvas with the original image
  context.drawImage(originalImage, 0, 0, canvasWidth, canvasHeight);

  // adding a blue watermark text in the bottom right corner
  context.fillStyle = 'blue';
  context.textBaseline = 'middle';
  context.font = 'bold 25px serif';
  context.fillText(watermarkText, canvasWidth - 100, canvasHeight - 20);

  return canvas.toDataURL();
}

In both cases, an in-memory HTML <canvas> with a 2D rendering context having the same size as the original image is created. Then, it is filled by drawing the original image inside it. From that point, the two functions follow different approaches to achieve the watermarking goal.

In the watermarkImage() function, the watermark image path passed as a parameter is used to load the image file. Then, it is transformed into an ImageBitmap object by using the createImageBitmap() function. This is necessary because the createPattern() function requires such a data structure to create a CanvasPattern object that can be used to draw a particular image over a non-empty canvas. In particular, the drawing operation involves a rectangle containing the pattern created with the rect() function. This is first translated to the required position and finally drawn with the fill() function.

The watermarkImageWithText() function is simpler. This is because the CanvasRenderingContext2D natively comes with the fillText() function, which allows you to add text to an image with no effort.

If you want to learn more on how to style the watermark image or text, reading this page from MDN Web Docs is recommended.

1.B Implementing the watermarking logic using `watermarkjs`

The same result can be achieved by using the watermarkjs library with just a bunch of lines of code. In this case, you have to add it as a dependency to your project and you can learn how to do it here.

The two aforementioned function can now be implemented as follows:

function watermarkImage(originalImageFile, watermarkImagePath, destinationImage) {
  watermark([originalImageFile, watermarkImagePath])
    .image(watermark.image.lowerRight())
    .then(function (watermarkedImage) {
      destinationImage = watermarkedImage.src;
    });
}

function watermarkImageWithText(originalImageFile, watermarkText, destinationImage) {
  watermark([originalImageFile, watermarkImagePath])
    .image(watermark.text.lowerRight(watermarkText, "bold 25px serif", "#0000ff")))
    .then(function (watermarkedImage) {
      destinationImage = watermarkedImage.src;
    });
}

The main difference from the first method is that the watermark object coming with the library accepts either a URL path to the image or its File object. Then, it requires the destination image to write the generated watermarked image.

You can find more demos on the library’s GitHub page.

2. Watermarking in action

Let’s now see how to employ the watermarkImage() and watermarkImageWithText() functions to build a real-word example.

<!DOCTYPE html>
<html>
  <body>
    <h1>Image Watermarker</h1>
    <p>Please, upload an image and a watermark will be added</p>
    <input id="upload" type="file" accept="image/*" />
    <div id="images" style="visibility: hidden;">
      <h2>Original image</h2>
      <img id="originalImage" />
      <h2>Watermarked image 1 (image watermark)</h2>
      <img id="watermarkedImage" />
      <h2>Watermarked image 2 (text watermark)</h2>
      <img id="watermarkedImageWithText" />
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

// hiding the div that will contain the images
const imagesDiv = document.querySelector('#images');
const fileInput = document.querySelector('#upload');

fileInput.addEventListener('change', async (e) => {
  const [file] = fileInput.files;
  // displaying the uploaded image
  const originalImage = document.querySelector('#originalImage');
  originalImage.src = await fileToDataUri(file);

  // adding the image watermark to the original image
  // and showing the watermarked image
  const watermarkedImage = document.querySelector('#watermarkedImage');
  const watermarkedImageWithText = document.querySelector(
    '#watermarkedImageWithText'
  );

  originalImage.addEventListener('load', async () => {
    watermarkedImage.src = await watermarkImage(
      originalImage,
      './src/IMG.LY.jpg'
    );

    watermarkedImageWithText.src = watermarkImageWithText(
      originalImage,
      'IMG.LY'
    );
  });

  // making the div containing the image visible
  imagesDiv.style.visibility = 'visible';

  return false;
});

function fileToDataUri(field) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      resolve(reader.result);
    });

    reader.readAsDataURL(field);
  });
}

async function watermarkImage(originalImage, watermarkImagePath) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const canvasWidth = originalImage.width;
  const canvasHeight = originalImage.height;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  // initializing the canvas with the original image
  context.drawImage(originalImage, 0, 0, canvasWidth, canvasHeight);

  // loading the watermark image and transforming it into a pattern
  const result = await fetch(watermarkImagePath);
  const blob = await result.blob();
  const image = await createImageBitmap(blob);
  const pattern = context.createPattern(image, 'no-repeat');

  // translating the watermark image to the bottom right corner
  context.translate(canvasWidth - image.width, canvasHeight - image.height);
  context.rect(0, 0, canvasWidth, canvasHeight);
  context.fillStyle = pattern;

  return canvas.toDataURL();
}

function watermarkImageWithText(originalImage, watermarkText) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const canvasWidth = originalImage.width;
  const canvasHeight = originalImage.height;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  // initializing the canvas with the original image
  context.drawImage(originalImage, 0, 0, canvasWidth, canvasHeight);

  // adding a blue watermark text in the bottom right corner
  context.fillStyle = 'blue';
  context.textBaseline = 'middle';
  context.font = 'bold 25px serif';
  context.fillText(watermarkText, canvasWidth - 100, canvasHeight - 20);

  return canvas.toDataURL();
}

The second snipper represents the src/index.js file and this is where the complete logic is implemented. First, users can upload an image thanks to the <input> tag. Then, the two aforementioned functions are used to produce two watermarked images that are finally shown on the page. To make this application works, note that the "./src/IMG.LY.jpg" path should be replaced with the relative path to your watermark image.

Final Considerations

Although watermarking does not involve complex logic, it does present some challenges. In fact, the approaches presented above cannot but be considered basic. This is because to properly implement watermarking, you should allow users to choose where precisely to place the watermark, with what style and colors, and with the desired size. Otherwise, the final result may be inaccurate and completely alter the original image.

In other words, giving users the ability to add a watermark to an image requires an advanced UI. Building it may be complex, time-consuming, and represent a waste of energy. Especially considering how such a feature may be marginal in your application. This is why you should take into consideration an advanced SDK solution, such as PhotoEditorSDK. This allows you to provide users with watermarking, and many other cool features.

Adding a Watermark to an Image With `photoeditorsdk`

First, read this article from the official documentation on how to get started with PhotoEditorSDK in Vanilla JavaScript. By uploading an image with the Sticker feature, you can place another image on top of the original one whenever you want. This allows you to achieve a watermark effect with no effort.

Check out this feature in the demo.

Conclusion

In this tutorial, we learned how to watermark an image in both Vanilla JavaScript and watermarkjs. The first approach involved the HTML5 <canvas>, which makes adding a watermark to an image easy. The second is even more straightforward and requires just a few lines of code. In both cases, the task is almost effortless. On the other hand, implementing a watermark feature that allows users to deal with the watermark image with freedom requires an entire UI. Building it takes time and effort, and may do not want to waste time on it. In this case, you should adopt a more complete, advanced, and ready-to-use solution – such as PhotoEditorSDK.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.

Flutter: Our new plugins made for Dart developers

Leon — Thu, 11 Mar 2021 14:12:09 GMT

Flutter enables developers to build native iOS and Android applications with a single Dart codebase whilst the application’s performance is kept at a very high native-like level. This is even more ensured by the huge amount of Flutter plugins, which wrap native code for the use in Dart.

With the rising demand for photo and video editing solutions, we were committed to provide plugins that enable developers to use our native PhotoEditor SDK and our native VideoEditor SDK within their Flutter applications. This said we are proud to announce that the Flutter plugins photo_editor_sdk and video_editor_sdk are now extending our list of cross-platform modules. The combination of both products allows you to add comprehensive image and video editing tools to your Flutter application for iOS and Android - within minutes.

Usage

While building the plugins, we focused on making the use and integration of our existing SDKs as easy as possible and minimizing the required platform-specific knowledge and skillset. Therefore, using the plugins is as easy as writing a single line of Dart code:

Customization

Furthermore, we wanted to keep the high level of customization options like cropping or resizing that our customers are used to in our products. In this sense, we created a dedicated Configuration Dart class which serves the option to customize the SDK to your needs without ever leaving the Flutter world.
Using the configuration is fast and easy:

Where to go from here?

Feel free to explore our packages, usage examples as well as the API documentation on pub.dev and/ or GitHub.
We released our new Flutter plugins under open-source licenses, so feedback and pull requests are welcome.

Make it pop - introducing Animated and Smart Stickers

Michael K. — Thu, 13 Aug 2020 18:31:18 GMT

Our latest release: brand-new sticker types for iOS and Android

We are always on the lookout to improve our editor tools to engage users to be creative and add beautifully designed content.

Our latest release for both mobile PhotoEditor SDK and VideoEditor SDK takes our stickers to the next level: With animated and smart stickers, we added popular features best known from apps like Instagram and TikTok – making editing more dynamic, expressive, and engaging. You can now capture your favorite moments by adding more context to your photos and videos. Maybe you finally landed that kickflip on a warm Monday morning, so you add the date and weather information. You can now also add your animated logo.

Our animated stickers not only provide you with a set of premade assets that come with the latest version of the editor but also let you integrate your custom ones tailored to your company and brand.

Smart Stickers on the other hand open up a whole range of new possibilities, visualizing dynamic information like weather data, location, or dates. Like our text design feature, it’s the ease of use that makes these stickers special – simply cycle through different variations with a tap.

Take a look at all updates and assets on our Mobile SDK page.

PS: Do you have feedback or suggestions for new smart stickers you want to see from us? Let us know in our Quick-Survey. We’re happy to hear from you!

Stickers – IMG.LY Blog

How To Add a Sticker to a Texture With Three.js

Prerequisites

What is Three.js?

Adding an Overlay Image to a Texture in WebGL

Adding a Sticker With PHOTOEDITORSDK

Conclusion

How to Add a Watermark to an Image in JavaScript

Watermarking Images in JavaScript

1.A Implementing the watermarking logic using HTML5 <canvas>

1.B Implementing the watermarking logic using watermarkjs

2. Watermarking in action

Final Considerations

Adding a Watermark to an Image With photoeditorsdk

Conclusion

Flutter: Our new plugins made for Dart developers

Usage

Customization

Where to go from here?

Make it pop - introducing Animated and Smart Stickers

Adding a Sticker With `PHOTOEDITORSDK`

1.A Implementing the watermarking logic using HTML5 `<canvas>`

1.B Implementing the watermarking logic using `watermarkjs`

Adding a Watermark to an Image With `photoeditorsdk`