JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div class="canvasContainer"></div>  

  <div class="content main">
    <div class="action crop">Crop</div>

    <div class="transformCropLimit">
      <div class="transformCropInner">
        <div class="mediaBlock">
          <img src="http://image.vsco.co/1/55210eb4aceed3144059/57f2471df662677e548b4568/300x400/25e7b55c-6ed9-490c-95c2-6d69520eb7bd1835072132.jpg">
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.mediaBlock {
  position: relative;
  display: block;
  overflow: hidden;
}
.mediaBlock img {
  max-width: 100%;
}

.transformCropLimit {
  position: relative;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}

.transformCropInner {
  width: 100px;
  cursor: pointer;
  position: relative;
  top: 10px;
  left: 100px;
}

.transformCropInner.rotate {
  transform: rotate(9-2deg);
  -ms-transform: rotate(-20deg); /* IE 9 */
  -moz-transform: rotate(-20deg); /* Firefox */
  -webkit-transform: rotate(-20deg); /* Safari and Chrome */
  -o-transform: rotate(-20deg); /* Opera */
}

JavaScript

var crop = function() {
  var transformMediaBlock = $('.mediaBlock');
  var transformCropInner = $('.transformCropInner');
  var transformCropLimit = $('.transformCropLimit');
  var canvasContainer = $('.canvasContainer')

  var limitLeft = transformCropLimit.offset().left;
  var limitTop = transformCropLimit.offset().top;
  var limitRight = limitLeft + transformCropLimit.width();
  var limitBottom = limitTop + transformCropLimit.height();
  
  var imageRatio = transformMediaBlock.find('img')[0].naturalWidth/transformMediaBlock.find('img').width();


  // draw rotate image
  var deg2Rad = Math.PI/180;

  var rotateDegree = -20;

  $('<canvas/>',{'class':'rotate'}).appendTo($(canvasContainer));
  var canvas = $('.canvasContainer canvas')[0];


  var ctx = canvas.getContext("2d");
  var width = 0;
  var height = 0;
  var diagonal = 0;
  var angleInDegrees = 0;

  width = transformMediaBlock.find('img')[0].naturalWidth;
  height = transformMediaBlock.find('img')[0].naturalHeight;
  diagonal = Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
  ctx.canvas.width = diagonal;
  ctx.canvas.height = diagonal;
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.save();
  ctx.translate(diagonal/2,diagonal/2);
  ctx.rotate(0*Math.PI/180);
  ctx.drawImage(transformMediaBlock.find('img')[0],-width/2,-height/2);
  ctx.restore();

  var drawRotated = function(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(diagonal/2,diagonal/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(transformMediaBlock.find('img')[0],-width/2,-height/2);
    ctx.restore();
  };

  drawRotated(rotateDegree);
  
  
  // draw crop rotate image
  var imageLeft = transformMediaBlock.find('img').offset().left;
  var imageTop = transformMediaBlock.find('img').offset().top;
  var imageRight = imageLeft + transformMediaBlock.find('img').width();
  var imageBottom = imageTop + transformMediaBlock.find('img').height();

  if (limitLeft <= imageLeft) {
   ...