Skip to main content

Image Customization

Introduction​

The Image Generation Configuration feature within the Mimeeq API empowers developers to customize and manipulate images generated through various workflows, including PDF rendering and material visualization. By leveraging the ApiImageConfig interface, developers can fine-tune the image generation process to meet specific requirements and enhance the visual presentation of their products. This feature offers flexibility and control, allowing developers to apply post-processing effects, add watermarks, and optimize images for various use cases.

Key Points:​

  • Customization: Tailor the image generation process to achieve desired visual effects and enhancements.
  • Versatility: Apply configuration settings to images generated from 3D scenes within the Mimeeq App, including PDFs, material visualizations, and product renders.
  • Enhanced Visual Presentation: Improve the quality and aesthetics of generated images through post-processing and watermarking.
  • Developer Control: Gain granular control over image generation settings to meet specific project requirements and branding guidelines.
warning

The Image Generation Configuration applies specifically to images generated from 3D scenes within the Mimeeq App. It does not apply to 2D images, galleries, or other pre-uploaded images.

Configuration Options​

The ApiImageConfig interface serves as a versatile tool for customizing the image generation process within the Mimeeq API. Currently, it offers the postprocessImage function, allowing developers to apply various transformations and enhancements to generated images. While additional configuration options may be introduced in the future, the postprocessImage function provides significant flexibility for image customization.

postprocessImage Function:​

The postprocessImage function is the cornerstone of the Image Generation Configuration, enabling developers to manipulate generated images to better suit their specific use cases. This function allows for a wide range of post-processing effects and transformations, empowering developers to enhance the visual quality and functionality of generated images.

Purpose and Functionality:

  • The primary purpose of the postprocessImage function is to apply post-processing effects and transformations to generated images.
  • Developers can use this function to add watermarks, adjust dimensions, apply filters, or apply any other custom modifications to generated images.
  • The postprocessImage function provides developers with granular control over the image generation process, allowing for precise customization according to specific requirements.

The postprocessImage function empowers developers to customize and optimize generated images to meet specific project requirements and branding guidelines. With its flexibility and versatility, developers can achieve seamless integration of generated images into their applications.

imageConfigurations Object​

The imageConfigurations object within the Mimeeq API allows developers to specify different settings for various image generation contexts. This new configuration object provides an additional layer of customization, enabling specific configurations for different types of images generated within the Mimeeq App.

Configuration Properties​

The imageConfigurations object can include settings for various contexts such as baskets, PDFs, AR, and more. Each property within the imageConfigurations object accepts an ApiImageConfigSettings object, allowing for detailed customization.

interface imageConfigurations {
  basket?: ApiImageConfigSettings;
  basketModular?: ApiImageConfigSettings;
  modularLastSession?: ApiImageConfigSettings;
  favourites?: ApiImageConfigSettings;
  favouritesModular?: ApiImageConfigSettings;
  finishEventModular?: ApiImageConfigSettings;
  pdf?: ApiImageConfigSettings;
  pdfModular?: ApiImageConfigSettings;
  ar?: ApiImageConfigSettings;
  arModular?: ApiImageConfigSettings;
}

ApiImageConfigSettings Interface​

The ApiImageConfigSettings interface defines the customizable settings for image generation. Developers can use these settings to specify image extensions, sizes, background colors, and other properties.

  • extension: Specifies the file extension of the generated image (e.g., "jpg", "png").
  • size: Defines the size of the generated image in pixels.
  • backgroundColor: Sets the background color for the generated image. Should be in hex format.
  • customCanvasSize: Allows for custom dimensions of the image canvas.
  • withAutozoom: Enables or disables automatic zoom on the image.
  • withCameraReset: Determines whether the camera position should be reset before generating the image. It has to be enabled to use custom camera position property.
  • customCameraPosition: Allows for a custom camera position for the image generation process.

Example configuration​

Here's an example of how to configure the imageConfigurations object within the Mimeeq App:

window.mimeeqApp.config = {
  image: {
    imageConfigurations: {
      basket: {
        extension: 'jpeg',
        size: 500,
        backgroundColor: '#ffffff',
        customCanvasSize: { width: 600, height: 400 },
        withAutozoom: true,
        withCameraReset: false,
      },
      pdf: {
        extension: 'jpeg',
        size: 800,
        backgroundColor: '#f0f0f0',
        customCanvasSize: { width: 800, height: 600 },
        withAutozoom: false,
        withCameraReset: true,
        customCameraPosition:
          '{"position":{"x":0.007959533882940744,"y":0.07784559364857843,"z":0.2935134429615312},"alpha":1.5436848475537301,"beta":1.4560283279315493,"target":{"x":0,"y":0.04399852082133293,"z":0},"radius":0.29556576208644086}',
      },
      // Additional configurations for other contexts
    },
  },
};

In this example, different settings are applied for images generated in the "basket" and "pdf" contexts, demonstrating the flexibility and customization capabilities of the imageConfigurations object.

Watermarking Images​

Adding watermarks to images is a common requirement for branding and copyright protection purposes. With the Mimeeq API's postprocessImage function, developers can easily apply watermarks to generated images, ensuring that they align with branding guidelines and maintain ownership rights.

How to Add Watermarks:​

To add a watermark to a generated image, developers can leverage the postprocessImage function and apply the watermark as part of the post-processing transformation. Here's a basic example of how to add a watermark using JavaScript:

document.addEventListener('mimeeq-app-loaded', () => {
  window.mimeeqApp.config = {
    image: {
      postprocessImage: async (base64, extension, dimensions) => {
        // Add watermark to the generated image
        const watermarkedImage = await addWatermark(base64);
        return watermarkedImage;
      },
    },
  };
});

async function addWatermark(base64Image) {
  // Logic to add watermark to the image
  // For example, overlaying a transparent logo onto the image
  // Return the watermarked image as a base64 string
}

In the above example, the postprocessImage function asynchronously applies the watermark to the generated image using a custom addWatermark function. Developers can customize the addWatermark function to implement their desired watermarking logic, such as overlaying a transparent logo onto the image.

Considerations:​

  • When adding watermarks to images, consider the placement, opacity, and size of the watermark to ensure it is visible but not obtrusive.
  • Test the watermarking process with various image sizes and formats to ensure compatibility and optimal visual appearance.

Example Use Cases:​

  • Branding: Adding company logos or branding elements to product images.
  • Copyright Protection: Applying copyright notices or ownership information to images.

By incorporating watermarks into generated images, developers can enhance brand recognition, protect intellectual property, and maintain control over their visual assets.

Examples​

In this section, we provide examples of how to use the postprocessImage function to customize image generation within Mimeeq App. These examples demonstrate practical use cases such as adding watermarks or logos to generated images.

This example illustrates how to add a watermark with a repeated logo to generated images. The watermark is positioned at an angle and applied with a certain opacity level.

const WATERMARK_URL = 'https://cdn.mimeeq.com/c_eod/07584c83-8c7c-460b-99a3-b6bfc79a7263.png';
const OPACITY = 0.1;
const PADDING_Y = 150;
const PADDING_X = 150;
const ANGLE = 45;

const config = {
  image: {
    postprocessImage: async (base64, extension, dimensions) => {
      const fabricInstance = new fabric.StaticCanvas();
      fabricInstance.setDimensions(dimensions);

      await new Promise((resolve, reject) => {
        const image = new Image();
        image.width = dimensions.width;
        image.height = dimensions.height;
        image.src = base64;

        const oImg = new fabric.Image(image);
        fabricInstance.add(oImg);
        oImg.center();

        fabric.Image.fromURL(
          WATERMARK_URL,
          (watermarkImg) => {
            const patternSourceCanvas = new fabric.StaticCanvas();
            patternSourceCanvas.add(watermarkImg);

            patternSourceCanvas.setDimensions({
              width: watermarkImg.getScaledWidth() + PADDING_X,
              height: watermarkImg.getScaledHeight() + PADDING_Y,
            });

            patternSourceCanvas.renderAll();

            // Create a pattern from the watermark image
            var pattern = new fabric.Pattern({
              source: patternSourceCanvas.getElement(),
              repeat: 'repeat', // Repeat the watermark image across the canvas
            });

            // Create a rectangle with the size of the canvas and fill it with the pattern
            var watermarkRect = new fabric.Rect({
              width: fabricInstance.width * 2,
              height: fabricInstance.height * 2,
              fill: pattern,
              angle: ANGLE,
              opacity: OPACITY,
              globalCompositeOperation: 'source-atop',
            });

            // Add the rectangle to the canvas
            fabricInstance.add(watermarkRect);

            watermarkRect.center();

            // Render canvas
            fabricInstance.renderAll();
            resolve(true);
          },
          { crossOrigin: 'anonymous' },
        );
      });

      const dataURL = fabricInstance.toDataURL({
        format: extension,
      });

      return dataURL;
    },
  },
};

window.mimeeqAppConfig = config;
if (window.mimeeqApp) {
  window.mimeeqApp.config = config;
}

Adding Singular Logo at the Center​

This example demonstrates how to add a singular logo at the center of generated images. The logo is positioned at an angle and applied with a certain opacity level.

const WATERMARK_URL = 'https://cdn.mimeeq.com/c_eod/07584c83-8c7c-460b-99a3-b6bfc79a7263.png';
const OPACITY = 0.1;
const ANGLE = 45;

const config = {
  image: {
    postprocessImage: async (base64, extension, dimensions) => {
      const fabricInstance = new fabric.StaticCanvas();
      fabricInstance.setDimensions(dimensions);

      await new Promise((resolve, reject) => {
        const image = new Image();
        image.width = dimensions.width;
        image.height = dimensions.height;
        image.src = base64;

        const oImg = new fabric.Image(image);
        fabricInstance.add(oImg);
        oImg.center();

        fabric.Image.fromURL(
          WATERMARK_URL,
          (watermarkImg) => {
            fabricInstance.add(watermarkImg);
            watermarkImg.angle = ANGLE;
            watermarkImg.opacity = OPACITY;

            watermarkImg.center();

            // Render canvas
            fabricInstance.renderAll();
            resolve(true);
          },
          {
            crossOrigin: 'anonymous',
            globalCompositeOperation: 'source-atop',
          },
        );
      });

      const dataURL = fabricInstance.toDataURL({
        format: extension,
      });

      return dataURL;
    },
  },
};

window.mimeeqAppConfig = config;
if (window.mimeeqApp) {
  window.mimeeqApp.config = config;
}

These examples showcase the flexibility of customizing image generation in Mimeeq App, allowing users to enhance their images with watermarks or logos according to their preferences.