Documentation
Step by step tutorial
It's very easy to use Magic Edge. Image conversion can be done in just a several steps
1. Select an imageAfter you press "Select" button, in the window select the image you wish to make transparent.
2. Select edge, mark foreground and background
Select approximate edge on the image by using Magic Edge tool. By using Foreground and Background tools, mark both areas.
3. Convert image
Click "Convert" button to start conversion process. After few seconds transparent image will appear into right box.
4. Save image
Use "Save" button to save image. New name will be formatted form original name with additional "transparent" prefix.
Video tutorial
Toolbar
Selection tools
Magic Edge tool, Magic Wand tool, Foreground marker tool, Background marker tool, Eraser tool
Clear selection tools
Clear marker on the image.
Undo
Undo and redo for the marker tools
Navigation tools
Simple tools for zoom and pan.
Main tools
Use main tools to select, save, download and convert the image.
Fine edge adjuster and crop
Edge Feather, Edge Blur and Image Crop tools.
Preview background tools
Set the background of the preview box (right box).
View resizer
Resize the view to full size.
Standalone installation
- Copy Magic Edge files to your project directory.
-
Include files in you HTML page.
<script type="text/javascript" src="./magic-edge/js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="./magic-edge/js/magic-edge-inc.js"></script> <script type="text/javascript" src="./magic-edge/js/magic-edge.js"></script> <script type="text/javascript" src="./magic-edge/js/farbtastic.js"></script> <script type="text/javascript" src="./magic-edge/js/filters.js"></script> <link rel="stylesheet" type="text/css" href="./magic-edge/css/magic-edge.css" /> <link rel="stylesheet" type="text/css" href="./magic-edge/css/farbtastic.css" />
- Place holder inside HTML page. <div id="MagicEdgeHolder"><div>
-
Add javascript code inside head teg.
<script> jQuery(document).ready(function() { initializeMagicEdge(); }); function initializeMagicEdge(){ var me = new MagicEdge(); me.init(document.getElementById("MagicEdgeHolder")); } </script>
-
Example with config options.
<script> jQuery(document).ready(function() { initializeMagicEdge(); }); function initializeMagicEdge(){ var a = new MagicEdge(); a.setConfig({ width:"full", height:"full", zoomMultipliers: [0.1, 0.2, 0.4, 0.7, 1, 1.5, 2, 2.5, 3, 4, 6, 8, 10, 14, 20], saveNameSufix:"transparent-", saveAction: "download", ajaxUrl: "ajax.php", magicWandTolerance:5, magicWandBorderWidth:10 }); a.init(document.getElementById("MagicEdgeHolder")); } </script>
- width (string) - Width ("full" or value in pixels e.g. "500px").
- height (string) - Height ("full" or value in pixels e.g. "500px").
- zoomMultipliers ( array ) - array of zoom multipliers.
- saveNamePrefix ( string ) - New name prefix.
- saveAction ( string ) - Save button action - "download" or "ajax".
- ajaxUrl ( string ) - URL used for sending transparent image to server.
- magicWandTolerance ( array ) - Initial Magic wand tolerance.
- magicWandBorderWidth ( array ) - Initial Magic wand border.