JSFiddle - React, Tailwind, and code Playground

HTML

<div style="text-align:center">
<img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none;" />
    <br />
<div id="for_jcrop">here the image should apear</div>
<canvas id="rotate" style="border:5px double red; margin-top:5px; "></canvas>
</div>

CSS

#picture {
    height: 250px;
}

JavaScript

var img = null, canvas = null;

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

    $(document).ready(function(){
       //  Initialize image and canvas
       img = document.getElementById('picture');
       canvasR = document.getElementById('rotate');
       
       if(!canvasR || !canvasR.getContext){
           canvasR.parentNode.removeChild(canvas);
       } else {
           img.style.position = 'relative';
       }
              rotateImage(0);
            showImg();
    });

function showImg (){    
var image = new Image();
image.id = "pic";
image.src = canvas.toDataUrl();
document.getElementById('image_for_crop').appendChild(image);
}
    function rotateImage(degree)
    {
        if(document.getElementById('rotate')){
           var cContext = canvasR.getContext('2d');
           var cx = 0, cy = 0, h = 1, v = 1;
           
                var pictureR = $('#picture');
                var displayedImgR = {
                width: pictureR.width(),
                height: pictureR.height()
                };
           
           var cw = displayedImgR.width, ch = displayedImgR.height, sAcw = displayedImgR.width, sAch = displayedImgR.height;
            canvasR.setAttribute('width', sAcw);
            canvasR.setAttribute('height', sAch);
            cContext.drawImage(img, cx, cy, cw, ch);
        } else {
           switch(degree){

            }
        }
    }