Create Poly on image

by Peter Doyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/js/bootstrap-modalmanager.min.js"></script>
<div class="container">
   <div class="row">
      <div class="col-md-12">
         
         <div class="step"><button type="button" class="btn btn-success btn-lg" id="image-mapper-upload">Select Image from My PC</button><input type="file" name="" id="image-mapper-file"><span class="divider">&nbsp; &nbsp; &nbsp; -- OR -- &nbsp; &nbsp; &nbsp;</span> <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#image-mapper-load">Load Image from Website</button></div>
      </div>
   </div>
</div>
<div class="container toggle-content" style="display: none;">
   <div class="row">
      <div class="col-md-12">
         <div class="container">
            <div class="row">
               <div class="col-md-12" id="image-map-wrapper">
                  <div id="image-map-container">
                     <div id="image-map" style="max-width: 100%" class="image-mapper">
                        <img class="image-mapper-img">
                        <svg class="image-mapper-svg" style="width: 100%;"></svg>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <table class="table" id="image-mapper-table">
            <thead>
               <tr>
                  <th>Active</th>
                  <th>Shape</th>
                  <th>Link</th>
                  <th>Title</th>
                  <th>Target</th>
                  <th style="width: 25px"></th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td style="width: 65px">
                     <div class="control-label input-sm"><input type="radio" name="im[0][active]" value="1" checked="checked"></div>
                  </td>
                  <td>
                    ...

CSS

.image-mapper {
    position: relative;  
    user-select: none;
    width:1000px;
}
.image-mapper img{
  width:100%;
}

.image-mapper-svg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    }

JavaScript

! function(a) {
    var b = 0,
        c = {},
        d = {
            defaults: {
                src: "",
                file: "",
                style: {
                    fill: "#ff00ff",
                    stroke: "#ff00ff",
                    strokeWidth: "1",
                    opacity: "0.8",
                    cursor: "pointer"
                },
                pointStyle: {
                    fill: "#000",
                    stroke: "#fff",
                    strokeWidth: "2",
                    opacity: "1",
                    cursor: "pointer"
                },
                event: {
                    init: function() {},
                    update: function() {},
                    addArea: function() {},
                    removeArea: function() {}
                },
                input: {
                    active: {
                        selector: 'input[name^="im["][name$="][active]"]',
                        fn: function() {
                            return a(this).attr("name").match(/im\[([\d]+)\]\[([^\)]+)\]/).slice(1)
                        }
                    },
                    shape: {
                        selector: 'select[name^="im["][name$="][shape]"]',
                        fn: function() {
                            return a(this).attr("name").match(/im\[([\d]+)\]\[([^\)]+)\]/).slice(1)
                        }
                    },
                    href: {
                        selector: 'input[name^="im["][name$="][href]"]',
                        fn: function() {
                            return a(this).attr("name").match(/im\[([\d]+)\]\[([^\)]+)\]/).slice(1)
                        }
                    },
                    title: {
                        selector: 'input[name^="im["][name$="][title]"]',
                        fn: function() {
                            return a(this).attr("name").match(/im\[([\d]+)\]\[([^\)]+)\]/).slice(1)
                        }
       ...