SOURCE

let downimg = ''
let imgw = 200
let imgh = 200
let tailW = 200
let tailH = 200

let tailX = 0
let tailY = 0


$(".checkbox").attr("checked",true)

$(".saveImg").on("click", function() {
    if (downimg) {
        let img = saveImg(downimg)
        let type =  $(".selectImg").val()
        let name = $(".imgName").val() || 'test'
        if(type == 'jpg'){
            download(img.src, name + ".jpg", "image/jpg");
        }else if(type == 'png'){
            download(img.src, name + ".png", "image/png");
        }
    }
})

$(document).on("keyup",function(e){
    console.log(e.keyCode)
    switch(e.keyCode){
        case 37:
            $("#img").cropper('move', -1, 0)
            break;
        case 38:
            $("#img").cropper('move', 0, 1)
            break;
        case 39:
            $("#img").cropper('move', 1, 0)
            break;
        case 40:
            $("#img").cropper('move', 0, -1)
            break;
    }
})

$(".scaleInit").on("click", function() {
    $("#img").cropper('reset')
})
$(".magnify").on("click", function() {
    $("#img").cropper('zoom', 0.1)
})
$(".shrink").on("click", function() {
    $("#img").cropper('zoom', -0.1)
})
$(".up").on("click", function() {
    $("#img").cropper('move', 0, 1)
})
$(".bottom").on("click", function() {
    $("#img").cropper('move', 0, -1)
})
$(".left").on("click", function() {
    $("#img").cropper('move', -1, 0)
})
$(".right").on("click", function() {
    $("#img").cropper('move', 1, 0)
})

$(".openImg").on("click", function() {
    $("#addImg").click()
})

$(".previewImg").on("click",function(){
    $("#img").cropper('setCropBoxData',{width:500})
    var a = $("#img").cropper('getCropBoxData')
    console.log(a)
})

$("#addImg").on("change", function(e) {
    var file = e.target.files[0]
    fr = new FileReader();
    
    $(".imgName").val( file.name.replace(/\..{3}$/,'') )

    fr.onload = function(e) {

        if (!$("#img").attr("src")) {
            $("#img").attr("src", e.target.result)
        } else {
            $("#img").attr("src", e.target.result)
            $("#img").cropper('replace', e.target.result)
        }

        let img = new Image()
            img.src = e.target.result
        img.onload = function() {

            imgw = img.width
            imgh = img.height

            $(".source-width").html(img.width)
            $(".source-height").html(img.height)
            $(".source-size").html( (parseInt(file.size)/1024).toFixed(2) + 'kb' )

            $("#imgWidth").val( img.width )
            $("#imgHeight").val( img.height )
                //  大于800时 小于200时 做一下比例收缩
            let obj = setWh(imgw, imgh)
            run()
            $(document).trigger("resize")
            $("#img").cropper('reset')

            tailW = $("#tailorWidth").val()
            tailH = $("#tailorHeight").val()
            $("#img").cropper('setCropBoxData',{width: parseInt(tailW),height: parseInt(tailH) } )

        }
    };
    fr.readAsDataURL(file);
})

$(".tailSize").on("keyup", function(e) {
    console.log(222)
    if( $(".tailSize .checkbox").is(":checked")  ){
    
        console.log(11)
        let w = parseInt( $(".source-width").text() )
        let h = parseInt( $(".source-height").text() )
        let scalew = (w / h).toFixed(2)

        if( e.target === $("#tailorWidth").get(0) ){

            let height = parseInt( $("#tailorWidth").val() ) / scalew
            $("#tailorHeight").val( parseInt(height) )

        }else if( e.target === $("#tailorHeight").get(0) ){

            let width = parseInt( $("#tailorHeight").val() ) * scalew
            $("#tailorWidth").val( parseInt(width) )
        }
    }

    tailW = $("#tailorWidth").val()
    tailH = $("#tailorHeight").val()
    
    tailW = parseInt(tailW)
    tailH = parseInt(tailH)
    console.log(tailW,tailH)

    $("#img").cropper('setAspectRatio', tailW / tailH  )
    $("#img").cropper('setCropBoxData',{width: tailW,height: tailH } )
})

$(".imgSize").on("keyup", function(e) {
    if( $(".imgSize .checkbox").is(":checked") ){

        let w = parseInt( $(".source-width").text() )
        let h = parseInt( $(".source-height").text() )
        let scalew = (w / h).toFixed(2)

        if( e.target === $("#imgWidth").get(0) ){

            let height = parseInt( $("#imgWidth").val() ) / scalew
            $("#imgHeight").val( parseInt(height) )

        }else if( e.target === $("#imgHeight").get(0) ){

            let width = parseInt( $("#imgHeight").val() ) * scalew
            $("#imgWidth").val( parseInt(width) )
        }
    }
    imgw = $("#imgWidth").val()
    imgh = $("#imgHeight").val()
})

$(".tailStart").on("keyup", function() {
    tailX = $("#tailorX").val() || 0
    tailY = $("#tailorY").val() || 0
    $("#img").cropper('setCropBoxData', {
        top: parseInt(tailY),
        left: parseInt(tailX)
    })
})


function run() {
    $("#img").cropper({
        aspectRatio: imgw / imgh,
        crop: function(e) {
            $("#currentX").val(e.x)
            $("#currentY").val(e.y)
            $("#currentW").val(e.width)
            $("#currentH").val(e.height)

            var img = $("#img").get(0)

            imgw = $("#imgWidth").val()
            imgh = $("#imgHeight").val()

            var cvs = ImageToCanvas(img, e.x, e.y, e.width, e.height)
            var new_img = canvasToImage(cvs, parseInt(imgw), parseInt(imgh))
            downimg = new_img
        }
    })
}

function setWh(imgw, imgh) {

    if( 200 < imgw < 800 && 100 < imgh < 800 ){
        $(".img-source").css({
            width: imgw,
            height: imgh,
        })
    }

    if (imgw < 200) {
        let scale = 200 / imgw
        let h = imgh * scale
        imgh = h.toFixed(2)
        imgw = 200
        $(".img-source").css({
            width: 200,
            height: h.toFixed(2),
        })
    }

    if (imgh < 100) {
        let scale = 200 / imgh
        let w = imgw * scale
        imgw = w.toFixed(2)
        imgh = 100
        $(".img-source").css({
            width: w.toFixed(2),
            height: 100,
        })
    }

    if (imgw > 800) {
        let scale = imgw / 800
        let h = imgh / scale
        imgh = h.toFixed(2)
        imgw = 800
        $(".img-source").css({
            width: 800,
            height: h.toFixed(2),
        })
    }
    if (imgh > 800) {
        let scale = imgh / 800
        let w = imgw / scale
        imgw = w.toFixed(2)
        height = 800
        $(".img-source").css({
            width: w.toFiexd(2),
            height: 800,
        })
    }
    $("#tailorWidth").val( parseInt(imgw) )
    $("#tailorHeight").val( parseInt(imgh) )
    return {imgw, imgh}
}


function ImageToCanvas(image, x, y, w, h) {

    imgw = $("#imgWidth").val()
    imgh = $("#imgHeight").val()
    var canvas = document.createElement("canvas");

    canvas.width = parseInt(imgw) || w;
    canvas.height = parseInt(imgh) || h;

    canvas.getContext("2d").drawImage(image, x, y, w, h, 0, 0, canvas.width, canvas.height);
    return canvas;
}

function canvasToImage(canvas, w, h) {
    var image = new Image();
    image.width = w
    image.height = h
    image.crossOrigin = "*";
    image.src = canvas.toDataURL();
    return image;
}

function saveImg(img) {
    var canvas = document.createElement("canvas");
    canvas.width = parseInt($("#imgWidth").val())
    canvas.height = parseInt($("#imgHeight").val())
    canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    return canvasToImage(canvas, canvas.width, canvas.height)
}

function dataURItoBlob(base64Data) {
    var byteString;

    if (base64Data.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(base64Data.split(',')[1]);
    } else {
        byteString = unescape(base64Data.split(',')[1]);
    }

    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {
        type: mimeString
    });
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片裁剪</title>
    <link href="https://cdn.bootcss.com/tether/1.4.0/css/tether.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/cropper/3.0.0-rc/cropper.css">
    <link href="https://cdn.bootcss.com/bootstrap-modal/2.2.6/css/bootstrap-modal-bs3patch.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-modal/2.2.6/css/bootstrap-modal.css" rel="stylesheet">
    <link rel="stylesheet" href="css/img.css">
</head>

<body>
    <div class="container wrap">

        <div class="setting-img">
            <div class="module-size imgSize">
                <h6>当前信息</h6>
                <label for=""><span class="input-text">x</span><input readonly id="currentX" value="0" class="form-control" type="text"></label>
                <label for=""><span class="input-text">y</span><input readonly id="currentY" value="0" class="form-control" type="text"></label>
                <label for=""><span class="input-text">宽</span><input readonly id="currentW" value="0" class="form-control" type="text"></label>
                <label for=""><span class="input-text">高</span><input readonly id="currentH" value="0" class="form-control" type="text"></label>
                <p>源文件宽度: <span class="source-width">0</span>px</p>
                <p>源文件高度: <span class="source-height">0</span>px</p>
                <p>源文件大小: <span class="source-size">0</span></p>
            </div>
            <div class="module-size imgSize">
                <h6>保存图片</h6>
                <label for=""><span class="input-text">宽</span><input id="imgWidth" value="200" class="form-control" type="text"></label>
                <label for=""><span class="input-text">高</span><input id="imgHeight" value="200" class="form-control" type="text"></label>
                <label for=""><input class="checkbox" type="checkbox" >按比例缩放</label>
                <label>
                    <span class="input-text">类型</span>
                    <select class="form-control selectImg">
                      <option value="jpg">.jpg</option>
                      <option value="png">.png</option>
                    </select>
                </label>
                <label><span class="input-text">名称</span><input class="form-control imgName" type="text"></label>
            </div>
            <div class="module-size tailStart">
                <h6>裁剪起点</h6>
                <label for=""><span class="input-text">X</span><input id="tailorX" value="0" class="form-control" type="text"></label>
                <label for=""><span class="input-text">Y</span><input id="tailorY" value="0" class="form-control" type="text"></label>
            </div>
            <div class="module-size tailSize">
                <h6>裁剪大小</h6>
                <label for=""><span class="input-text">宽</span><input id="tailorWidth" value="200" class="form-control" type="text"></label>
                <label for=""><span class="input-text">高</span><input id="tailorHeight" value="200" class="form-control" type="text"></label>
                <label for=""><input class="checkbox" type="checkbox" >按比例缩放</label>
            </div>
        </div>
        <div class="right-main">
            <div>
                <span class="btn btn-danger openImg">打开图片</span>
                <span class="btn btn-danger saveImg">保存</span>
                <span class="btn btn-danger previewImg">预览</span>
                <span class="btn btn-danger scaleInit">还原</span>
                <span class="btn btn-danger magnify">放大</span>
                <span class="btn btn-danger shrink">缩小</span>
                <span class="btn btn-danger up">上移</span>
                <span class="btn btn-danger bottom">下移</span>
                <span class="btn btn-danger left">左移</span>
                <span class="btn btn-danger right">右移</span>
                <input type="file" id="addImg" style="display:none;">
            </div>
            <div class="line"></div>
            <div class="row img-wrap">
                <div class="img-source">
                    <img id="img" src="" alt="">
                </div>
            </div>
        </div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/cropper/3.0.0-rc/cropper.min.js"></script>
    <script src="https://cdn.bootcss.com/downloadjs/1.4.7/download.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-modal/2.2.6/js/bootstrap-modal.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-modal/2.2.6/js/bootstrap-modalmanager.min.js"></script>
    <script src="./index.js"></script>
</body>

</html>

p{
    margin:0;
}
.wrap{
    margin:10px auto;
    border:1px solid #999;
    padding:10px;
    border-radius:4px;
    display:flex;
    .btn{
        cursor:pointer;
    }
}
.line{
    height:1px;
    background-color:#e8e8e8;
    margin:10px 0;
}
.setting-img{
    margin:0;
    width:280px;
    .module-size{
        display:block;
        height:auto;
        margin:5px;
        padding:10px;
        border-radius:4px;
        border:1px solid #e8e8e8;
        h6{
            display:block;
            text-align:center;
        }
        label{
            display:block;
        }
        .input-text,input,.form-control{
            display:inline-block;
            width:80%;
        }
        .selectImg{
            width:78%;
            padding:0 5px;
        }
        .checkbox{
            width:20%;
        }
        .input-text{
            text-align: center;
            width:20%;
        }
    }
}
.right-main{
    flex-grow:1;
    display:flex;
    flex-direction:column;
}
.img-wrap{
    flex-grow: 1;
    text-align: center;
    width:100%;
    margin:10px auto;
    padding:0;
    display:flex;
    justify-content: center;
    align-items: center;
    .img-source{
        max-width:100%;
    }
    #img{
        width:100%;
    }
}