jQuery addClass example

Change class name on click in jQuery

by jude_pinto

HTML

<script src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
 

  <script src = "https://hongru.github.io/proj/canvas2image/canvas2image.js"></script>


<button id="button">Save</button>
<input id="file-input" type="file" name="name" style="display: none;" />


<div id="container_1" class="resize-container_E">
  <span class="heading"> Eroticism </span>
  <div id="Porn_E" class="resize-drag">

  <span id="Porn_Ea">Porn</span><span id="Porn_Eb">50%</span>
  </div>
  <div id="Fantasy_E" class="resize-drag">
    <span id="Fantasy_Ea">Fantasy</span><span id="Fantasy_Eb">50%</span>
  </div>
  <div id="In_Person_E" class="resize-drag">
 <span id="In_Person_Ea">In Person</span><span id="In_Person_Eb">50%</span>
  </div>
</div>

CSS

.resize-drag {
  /* shape parameters */
  border-radius: 72%;
  width: 142px;
  height: 142px;
  min-height: 1px;
  min-width: 1px;
  max-height: 200px;
  max-width: 200px;
  padding: 0px 0px 0px 0px;
  margin: 40px 40px 40px 35px;
  
  align-items: center;

  /* positioning */
  position: relative;

  /* text location */
  display: flex;
  justify-content: center;


  /* This makes things *much* easier */
  /*box-sizing: border-box;*/

  /* font */
  color: black;
  font-family: sans-serif;
  font-size: 18px;
  user-select: none;

}

.resize-container_E {
  width: 450px;
  height: 400px;
  border-style: solid;
  text-align: center;
  position: relative;
  align-items: center;
  margin: 0 auto;
}



#button_E {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
  margin-left: 32%;
}


#submit_button {
  border-radius: 10%;
  background-color: #BD1414; /* Red */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
  margin: 0px 580px 100px;
}

.heading {
  color: black;
  font-family: sans-serif;
  font-size: 22px;
}

#Porn_E{
  background-color: rgba(35, 179, 241,.55);
  left: 122px;
  position: absolute;
  mix-blend-mode: multiply;
  }
   

#Porn_E span#Porn_Ea {
  display: inline;
}

#Porn_E:hover span#Porn_Ea {
  display: none;
}

#Porn_E span#Porn_Eb {
  display: none;
}

#Porn_E:hover span#Porn_Eb {
  display: inline;
}



#Fantasy_E {
  background-color: rgba(241, 234, 34, 0.55);
  top: 156px;
  left: 40px;
  position: absolute;
  mix-blend-mode: multiply;
}

#Fantasy_E span#Fantasy_Ea {
  display: inline;
}

#Fantasy_E:hover span#Fantasy_Ea {
  display: none;
}

#Fantasy_E span#Fantasy_Eb {
  display: none;
}

#Fantasy_E:hover span#Fantasy_Eb {
  display: inline;
}



#In_Person_E {
  background-color:...

JavaScript

//PornE Global Start Values
//margin: 40px 40px 40px 35px;




var Porn_E_radius = document.getElementById("Porn_E").clientWidth/2;
var Porn_E_start = 0;
var Porn_E_startx=  Porn_E_start.x2;
var Porn_E_starty= Porn_E_start.y2;


//FantasyE Global Start Values
var Fantasy_E_radius = document.getElementById("Fantasy_E").clientWidth/2;
var Fantasy_E_start = 0;
var Fantasy_E_startx= Fantasy_E_start.x2;
var Fantasy_E_starty= Fantasy_E_start.y2;

//InPersonE Global Start Values
var In_Person_E_radius = document.getElementById("In_Person_E").clientWidth/2;
var In_Person_E_start =  0;
var In_Person_E_startx= In_Person_E_start.x2;
var In_Person_E_starty= In_Person_E_start.y2;




//Global Coordinate Dictionaries
var CoordinatesX_E = {
  Porn_E: Porn_E_startx,
  Fantasy_E: Fantasy_E_startx,
  In_Person_E: In_Person_E_startx
};


var CoordinatesY_E = {
  Porn_E: Porn_E_starty,
  Fantasy_E: Fantasy_E_starty,
  In_Person_E: In_Person_E_starty
};

//Global Intersection Dictionaries:

var Porn_Intersections = {Porn_Area: 0, Porn_Minus_Fantasy: 0, Porn_Minus_In_Person: 0, Porn_Minus_Fantasy_In_Person: 0};

var Fantasy_Intersections = {Fantasy_Area: 0, Fantasy_Minus_Porn: 0, Fantasy_Minus_In_Person: 0, Fantasy_Minus_Porn_In_Person: 0};

var In_Person_Intersections = {In_Person_Area: 0, In_Person_Minus_Porn: 0, In_Person_Minus_Fantasy: 0, In_Person_Minus_Porn_Fantasy: 0};


//Return true if circles are overlapping. Otherwise, return false


document.getElementById("button").onclick = function() {

/*
html2canvas(document.querySelector("#container_1")).then(canvas => {
    	saveAs(canvas.toDataURL(), 'canvas.jpg');
});
*/
	 

   html2canvas((document.querySelector("#container_1")), {
      onrendered: function(canvas) {
        //saveAs(canvas.toDataURL(), 'canvas.jpg');
        console.log(canvas.toDataURL());
        //saveAs(canvas.toDataURL(), 'canvas.jpg');
      }
    });
    
    /*
     function saveAs(uri) {
    if (uri.length % 2 == 0){
    var half = uri.length / 2;
    ...