JSFiddle - React, Tailwind, and code Playground

by kamlesh_bhure

HTML

<div id="mask" class="newLoaderMask">
    <img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" width="400" id="loader" />
</div>
<img id="clickme" src="http://siliconangle.com/files/2011/02/TapMe-Logo-300x300.png" width="200"/>

<div class="hiddenfile">
<input type="file" accept="image/*" capture="camera" id="takePictureField" />
</div>

<div class="captureInsuPanel">
    <img id="yourimage" class="imgWeightHght" width="500" />
</div>

CSS

#yourimage {
    width:100%;
}
.hiddenfile {
     width: 0px;
     height: 0px;
     overflow: hidden;
}
.imgWeightHght {
    height: 290px !important;
    width: 220px !important;
}
.captureInsuPanel img {
    height: auto;
    width: auto;
}
.newLoaderMask {
    display: none;
    background: #E5E5E5;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}

JavaScript

$(document).ready(function () {
    $("#takePictureField").on("change", gotPic);
    $('#clickme').on('click',triggerClick);
});
function triggerClick(){
    $('#takePictureField').click();
}
var max_width	=	1000;
var max_height	=	1000;

function gotPic(event) {
    if (event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) {
        var image = event.target.files[0];
        processCapturedImage(image, 90, max_width, max_height, $("#yourimage"));
    }
}

function processCapturedImage(image, angle, max_width, max_height, thumbNailImage) {
    $('#mask').show();

    //create a hidden canvas object we can use to create new rotated image
    var canvas = document.createElement('canvas');
    canvas.id = "hidden_canvas_old";
    canvas.style.display = "none";
    document.body.appendChild(canvas);

    //create a hidden canvas object we can use to create the new cropped &/or resized image data
    var canvas_new = document.createElement('canvas');
    canvas_new.id = "hidden_canvas_new";
    canvas_new.style.display = "none";
    document.body.appendChild(canvas_new);

    var fileLoader = new FileReader(),
        imageObj = new Image();

    if (image.type.indexOf("image/") == 0) {
        fileLoader.readAsDataURL(image);
    } else {
        alert('File is not an image');
    }
    fileLoader.onload = function () {
        var data = this.result;
        imageObj.src = data;
    };

    fileLoader.onabort = function () {
        alert("The upload was aborted.");
    };

    fileLoader.onerror = function () {
        alert("An error occured while reading the file.");
    };

    // set up the images onload function which clears the hidden canvas context, 
    // draws the new image then gets the blob data from it
    imageObj.onload = function () {
        var imgWidth = this.width;
        var imgHeight = this.height;
        if (imgWidth > imgHeight) {
            //Rotate horizontal image to vertical and resizing is needed
       ...