Image Merge/Edit/Draw Tool In jQuery - Image Maker
File Size: | 2.1 MB |
---|---|
Views Total: | 7379 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.