JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" accept="images/*">
<input class="url" type="url" placeholder="url">
<div class="container"></div>
<button class="submit">Submit</button>

CSS

.container{
    width: 900px;
    height：700px;
    
}
.resizer{
    overflow: hidden;
}
.resizer.have-img button.ok{
    display: inline-block;
}
.resizer.have-img .inner {
    display: block;
}
.inner{
    width: 70%;
    position: relative;
    font-size: 0;
    overflow: hidden;
    display: none;
}
img{
    width: 60%;
}

.frames{
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid black;
    cursor: move;
    outline: rgba(0, 0, 0, 0.6) solid 10000px;
}
button.ok{
    float:right;
    margin-left: 5px;
    display: none;
    color:red;
    background:red;
}
canvas{
    max-width: 100%;
    margin:auto;
    display: block;
}

JavaScript

var tmp=$('<div class="resizer">'+
          '<div class="inner">'+
          '<img>'+
          '<div class="frames"></div>'+
          '</div>'+
          //'<button>&#10007;</button>'+
          '<button class="ok">&#10003;</button>'+
          '</div>');
$.imageResizer=function(){
    if(Uint8Array&&HTMLCanvasElement&&atob&&Blob){
        
    }else{
        return false;
    }
    var resizer=tmp.clone();
    
    resizer.image=resizer.find('img')[0];
    resizer.frames=resizer.find('.frames');
    resizer.okButton=resizer.find('button.ok');
    resizer.frames.offset={
        top:0,
        left:0
    };
    
    resizer.okButton.click(function(){
        resizer.clipImage();
    });
    resizer.clipImage=function(){
        var nh=this.image.naturalHeight,
            nw=this.image.naturalWidth,
            size=nw>nh?nh:nw;
        
        size=size>1000?1000:size;
        
        var canvas=$('<canvas width="'+size+'" height="'+size+'"></canvas>')[0],
            ctx=canvas.getContext('2d'),
            scale=nw/this.offset.width,
            x=this.frames.offset.left*scale,
            y=this.frames.offset.top*scale,
            w=this.frames.offset.size*scale,
            h=this.frames.offset.size*scale;
        
        ctx.drawImage(this.image,x,y,w,h,0,0,size,size);
        var src=canvas.toDataURL();
        this.canvas=canvas;
        this.append(canvas);
        this.addClass('uploading');
        this.removeClass('have-img');
        
        src=src.split(',')[1];
        if(!src)return this.doneCallback(null);
        src=window.atob(src);
        
        var ia = new Uint8Array(src.length);
        for (var i = 0; i < src.length; i++) {
            ia[i] = src.charCodeAt(i);
        };
        
        this.doneCallback(new Blob([ia], {type:"image/png"}));
    };
    
    resizer.resize=function(file,done){
        this.reset();
        this.doneCallback=done;
        this.setFrameSize(0);
        this.frames.css({
            top:0,
     ...