Unique Mosaic

Unique Mosaic

Released 6 years ago , Last update 2 years ago

Merge images into a large and unique mosaic using PHP and MySQL.

Where to use this component - Use the images of your Web 2.0 platform to present unique mosaics of user profile images or any image else you imagine. - Create a powerful eye-catcher for your living room using images of your family/hobbies etc. - Give your customers the possibility to create their own mosaics for printing

With this component you are able to import an unlimited stock of images, perform image average color detection and (of course) create mosaics with your images based on every (base) image you want.


14 day 14-day money-back guarantee


Personal License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Non-commercial use


Premium License

  • Perpetual license

  • Unlimited sites, servers

  • No distribution (hosted use only)

  • Commercial use

Need custom services for this product? Get a quote

Installation and Usage

Because the creating of mosaics might need much resources such as memorylimit and time, we recommend to use a local environment for testing (such as XAMPP) where you are able to set a large memorylimit.


  • unzip the component-folder to your destination
  • create a MySQL-database and import the install.sql file into it
  • open the lib/config.inc.php file and set up the database settings for your created database
  • have a look at the example.php

Testing with small amount of images

For testing we recommend to use a small stock of images (10 for example). Place them into the /import/-folder and set up your example project and select an image to create a mosaic from:





// set the base pixel for each single mosaic element
// 118 pixel means 1x1 cm per single mosaic element when printing in a resolution of 300 dpi
// 300 dpi = 118 dots per cm   <-- (300 dpi / 2.54)
$size = 118;
ini_set('memory_limit', '3048M');
ini_set('max_execution_time', 60*300);

// set our input image
$tf = new imgtransformer('images/input.jpg');

// set the project name 
// from there we load the resized images

// neighboored pixels aren't used to determine single pixel color

// set the import directory if you want to add new images to your project
// and also start directly the import from import/ to images/my-project/

// resize images from images/my-project/ to images/resized_my-project/ with $size
// each single image will be resized to 118x118 px
$tf->transformDir('images/my-project/', 'images/', $size, array($size,$size));

With this code the component will copy your source images into the images/my-project/ -folder and creates a smaller version of each image (118x118 in this case) into the images/resized_my-project/ -folder. The destination-size can be set by yourself. At a later point we will discuss the best target size.

Please check now your images/ -folder for the new images and be sure to clean the import/-directory or uncomment the source code lines for importing and transforming because we just need no more images to import at this point.

Each copy and resizing will be logged into the log/-folder . This will help you when creating large mosaics where you will get no response for some minutes until the code has finished.

Updating the color database

When creating a mosaic each pixel of your destination image will be checked for a relating mosaic-part image. For that we use to know each average colors of your images. So we will walk each image and save their colors in the database:

// get color of each image of images/resized_my-project/ and store them in database
$tf->generateMidColor('images/', $size, 'mergePalette');

After that your database-table will have a list of images and their average colors.

Scaling the mosaic draft (source)

Imagine your input.jpg has a dimension of 200x150 px. Your finished mosaic will contain of 200x150 images. If this is too much, you can downscale the mosaic draft:

// resize or input image to 50% of original size

With this example we create a new mosaic draft with a new size of 100x75 px. Also if you doesnt want to resize the draft, please still call this method with the value of 100.

Now you would have the following files in your images/-folder: - input.jpg - reduced50input.jpg (the smaller variant)

You are ready now to create your mosaic!!!

Generating the mosaic

Calling generateMosaicTemplate($size) will create a large template file where each place-holder pixel will be replaced by a matching mosaic-part. The method returns the template image and via generateMosaicParts() you can start your mosaic:

// generate mosaic template and store in $newFile
// and create the mosaic
if(($newFile = $tf->generateMosaicTemplate($size)) !== false) {
    $tf->generateMosaicParts($size, $newFile, array(10,25,50,'255_a'));
    echo 'error creating the mosaic template file';

After calling generateMosaicTemplate() you will get a template118input.jpg as mosaic template. While creating your mosaic you can have a look at the logfiles to check the progress. Your finished file will be saved as finalinput.jpg or finalreducedxinput.jpg

The right settings

Each mosaic is unique and the quality of the finished image depends on your available mosaic-parts you provide.

That means: more images = more choices = more variance = better result

For example: An image of a forest will look best if you have much nature photos for input!

When creating the mosaic the component checks each pixel for a matching image. This will be done in several loops. Each loop you can define the variance for the image search:

$tf->generateMosaicParts($size, $newFile, array(10,25,50,'255_a'));

In this example each pixel check will work like this: - search an andom image with an average color +/- 10 colorsteps - search an andom image with an average color +/- 25 colorsteps - search an andom image with an average color +/- 50 colorsteps - search an andom image with an average color +/- 255 colorsteps (which means ALL images) and colorize them with the target pixel color (what the "_a" stands for)

With this settings I've got the best results.

The $size

With this param you set the pixels of the resized images when importing/transforming your source images. The $size describes how much pixel each single mosaic-part will be in your final mosaic. This is very import for printing your mosaic. When you let print your mosaic and the printer will have a resolution of 300 dpi, you're images has to have a resolution of 118px so you have small parts of 1x1 cm per item in real. If you want to have larger pieces (e.g. 2x2 cm) you can set the $size to 236px . You just have to calc the target dpi and the size each of your parts have to be.

Have a look at the screenshots to see finished results. Your website or your real live can be enriched by such mosaics!!!

Any questions? Please easily leave a comment :)

3 licenses, starting from From » $39.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services

Or enter your name and Email
  • E Ekaterina 2 years ago
    Is this product still supported? A have some questions about it.
    • DK Denis Krüger Publisher 2 years ago
      This software is still supported. How may I help you?
    • E Ekaterina 2 years ago
      1. I have some set of images, is it possible to be sure, that each image from my set will be included in mosaic? 2. Can I get x and y coordinates of each photo?
  • JG John Gravel 3 years ago
    I am very interested in this product. I would like it to be website based. Is this a possibility? I would like people to upload their images and then create a mosaic from their image and then be able to download it.
  • BI BizTechies, Inc. 3 years ago
    Is this product still supported? Most current release 3 yrs old?
    • DK Denis Krüger Publisher 3 years ago
      Hey, yes this component ist still supported. How may I help you?