jQuery Based Picture To SVG (Vector) Converter - VectorCam

VectorCam is a jQuery based SVG image converter that allows to vectorize your local pictures into SVG files using Html5 canvas element and imagetracer.js JavaScript library.

How to use it:

1. Include the necessary jQuery library and imagetracer.js on your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="imagetracer_v1.0.0.js"></script>

2. Download the vectorcam and include the vectorcam.js after jQuery library.

<link href="vectorcam.css" rel="stylesheet">
<script src="vectorcam.js"></script>

3. Create an html5 canvas element for the svg image converter.

<link href="vectorcam.css" rel="stylesheet">
<script src="vectorcam.js"></script>

4. Add image uploader and controls to the svg image converter.

<p style="display:none;" class="spinner"><i class="fa fa-spinner fa-spin"></i></p>
<p class="instructions">Upload an image to create a vector file.</p>

<div style="display:none;" class="options">
  <div class="form-inline">
    <label>
      Omit paths of length &lt;  
      <select class="form-control pathomit">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option selected=true>8</option>
        <option>16</option>
        <option>32</option>
        <option>64</option>
      </select>
    </label>
  </div>
  <div class="form-inline">
    <label>
      Colors 
      <select class="form-control colors">
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>8</option>
        <option selected=true>16</option>
        <option>32</option>
        <option>64</option>
      </select>
    </label>
  </div>
  <p><a class="btn btn-lg btn-inverse reload"><i class="fa fa-refresh"></i></a></p>
</div>

<div class="controls">
  <span id="file-select" class="upload"><input type="file" /></span>
  <a class="btn btn-lg btn-inverse upload"><i class="fa fa-upload"></i></a>
  <!--<a class="btn btn-lg btn-inverse cut"><i class="fa fa-cut"></i></a>-->
  <a style="display:none;" title="vectorcam.svg" class="btn btn-lg btn-inverse save" target="_blank"><i class="fa fa-save"></i></a>
  <a style="display:none;" class="btn btn-lg btn-inverse btn-options"><i class="fa fa-cog"></i></a>
</div>

---

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