Add Custom Texts to Resize the Image | JQuery Image Maker

The responsive JQuery Image Maker plugin enables you to add custom resizable texts to the image, as well as combine images and draw. Based on HTML5 Canvas.


  • Responsive works on desktop, tablet, and mobile
  • Unlimited picture maker on the same page, you can select more than one image maker on the same page.
  • Translatable
  • Perform various operations: resize and drag texts, merge images, load template, merge pre-set images and templates, draw
  • We can use it as a clothes or t-shirt design maker (add a logo, symbol, or emotions to your canvas), meme generator, or birthday card maker.

How to make use of it:

1. Load the mandatory JavaScript libraries within the doc.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>
<script src="/path/to/cdn/jquery.ui.touch-punch.min.js"></script>

2. Download the package and insert the Image Maker plugin’s files within the doc.

<link rel="stylesheet" href="./imageMaker.min.css" />
<script src="./imageMaker.min.js"></script>

3. Create a container for the image-maker.

<div id="example"></div>

4. Initialize the image-maker, specify the picture templates and define an array of images to be merged as follows.

    {url: 'merge-1.png', title:'Merge Image 1'},
    {url: 'merge-2.png', title:'Merge Image 2'},
    {url: 'merge-3.png', title:'Merge Image 3'},
    // ...
    {url: 'template-1.png', title:'Image Template 1'},
    {url: 'template-2.png', title:'Image Template 2'},
    {url: 'template-3.png', title:'Image Template 3'},
    // ...

5. Localize the image-maker.

    fontFamilyText: 'Font Family',
    enterTextText:'Enter Text',
    topText:'Top Text',
    bottomText: 'Bottom Text',
    mergeImageText: 'Merge Image',
    addTextBoxText:'Add TextBox',
    addTemplateText:'Add template',
    resetText: 'Reset',
    imageGeneratorText: 'Image maker',
    stopBrushingText:'Stop Brushing',
    canvasLoadingText: 'Canvas Loading'

6. More configurations with default values.


  // number of text boxes
  text_boxes_count: 2,
  // thumbnail width
  merge_image_thumbnail_width: 'auto',
  template_thumbnail_width: 50,

  // thumbnail height
  merge_image_thumbnail_height: 50,
  template_thumbnail_height: 50,

  // download generated image instead of sending it to backend
  downloadGeneratedImage: true,

7. Available callback capabilities.


  onGenerate: (data, formData) {},
  preRender: function(html){return html;},
  onInitialize: function(canvas_info){},
  onLoad: function(canvas_info){},
  alterTextInfo: function(text_info){},
  alterFontFamilies: function(All_FontFamilies){},


Image Merge/Edit/Draw Tool, jQuery Image Maker Plugin/Github, how to make an image editor in javascript

See Demo And Download

Official Website(mattar88): Click Here

This superior jQuery/javascript plugin is developed by mattar88. For extra Advanced Usage, please go to the official website.