Image Merge/Edit/Draw Tool In jQuery - Image Maker

Image Maker is a responsive, touch-enabled image editing/drawing/annotation tool written in jQuery library and Canvas API.

Features:

• Merge multiple images.
• Draw lines & shapes on images.
• Add custom text to images (great for Meme Generator).

How to use it:

1. Load the necessary JavaScript libraries in the document.

• jQuery: Required
• jQuery UI: For draggable text annotation
• jQuery UI Touch Punch: Touch Event Support for jQuery UI

<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 in the document.

<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 image templates and define an array of image to be merged as follows.

$('#example').imageMaker({
  merge_images:[
    {url: 'merge-1.png', title:'Merge Image 1'},
    {url: 'merge-2.png', title:'Merge Image 2'},
    {url: 'merge-3.png', title:'Merge Image 3'},
    // ...
  ],
  templates:[
    {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.

$('#example').imageMaker({
  i18n:{
    fontFamilyText: 'Font Family',
    enterTextText:'Enter Text',
    topText:'Top Text',
    bottomText: 'Bottom Text',
    sizeText:'Size',
    uperCaseText:'UperCase',
    mergeImageText: 'Merge Image',
    drawText:'Draw',
    addTextBoxText:'Add TextBox',
    previewText:'Preview',
    addTemplateText:'Add template',
    resetText: 'Reset',
    imageGeneratorText: 'Image maker',
    stopBrushingText:'Stop Brushing',
    canvasLoadingText: 'Canvas Loading'
  },
});

6. More configurations with default values.

$('#example').imageMaker({

  // 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 functions.

$('#example').imageMaker({

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

});

---

This awesome jQuery plugin is developed by mattar88. For more Advanced Usages, please check the demo page or visit the official website.