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 image

After 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

  1. Copy Magic Edge files to your project directory.
  2. 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" />
  3. Place holder inside HTML page. <div id="MagicEdgeHolder"><div>
  4. Add javascript code inside head teg. 
    <script>

jQuery(document).ready(function() {
	initializeMagicEdge();
});

function initializeMagicEdge(){
	var me = new MagicEdge();
	me.init(document.getElementById("MagicEdgeHolder"));
}

</script>
  5. 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.