jQuery addClass example

Change class name on click in jQuery

by Reanimatolog501

HTML

<img class='need-crop' src = 'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0'>

JavaScript

function toDataURL(url) {
return new Promise(function (resolve, reject) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      resolve (reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
  })
}

function resizeBase64Img(base64, correlation) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", base64).on('load', function() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      canvas.width = this.width;
      canvas.height = this.width * correlation; 
      context.drawImage(this, 0, 0);
      deferred.resolve(canvas.toDataURL());               
     });
     return deferred.promise();    
 }


toDataURL($(".need-crop").attr('src')).then((result)=>
 resizeBase64Img(result, 1.5).then(function(newImg){
    $(".need-crop").attr('src', newImg);
 })
)