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.

Features:

  • 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.

$('#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 capabilities.

$('#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){},

});

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.

Share