H5裁剪图片上传

fhefh2015
2/23/2019 - 5:49 AM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no"/>
    <style>
        html {
            -webkit-text-size-adjust: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            font-family: Helvetica;
        }

        html, body {
            position: relative;
            height: 100%;
        }

        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, pre, form, input, textarea, th, td, select {
            margin: 0;
            padding: 0;
            font-weight: normal;
            text-indent: 0;
        }

        a, button, input, textarea, select {
            background: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
            outline: none;
            -webkit-appearance: none;
        }

        em {
            font-style: normal
        }

        li {
            list-style: none
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
            vertical-align: top;
        }

        table {
            border-collapse: collapse;
        }

        textarea {
            resize: none;
            overflow: auto;
        }

        .clearfix:before, .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
            overflow: hidden;
        }

        .clearfix {
            zoom: 1;
        }

        .display_flex {
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }

        .display_flex_1 {
            -moz-box-flex: 1; /*Firefox*/
            -webkit-box-flex: 1; /*Safari,Opera,Chrome*/
            -webkit-flex: 1;
            flex: 1;
        }

        .hide {
            display: none;
        }

        #imgWrapper {
            position: relative;
            min-height: 400px;
            background: #F1F1F1;
            cursor: pointer;
            text-align: center;
            line-height: 0;
        }

        #imgWrapper:after {
            display: inline-block;
            content: '+ 点选择图片';
            margin-top: 100px;
            width: 80%;
            max-width: 600px;
            line-height: 200px;
            color: #999;
            border: 1px dashed #ccc;
            border-radius: 10px;
        }

        #imgWrapper.hide:after {
            display: none;
        }

        #imgWrapper .view-wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            background: #F1F1F1;
        }

        .view-wrapper img {
            max-width: 100%;
        }

        #chooseImg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
        }

        .crop_btn {
            width: 100px;
            height: 20px;
            background: #0a9c5d;
            cursor: pointer;
        }

        .drop_image_wrap {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: #000;
            z-index: 1000;
            display: none;
        }

        .drop_image_wrap .drop_image {
            position: absolute;
            width: 600px;
            height: 400px;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            /*background: #0a9c5d;*/
            z-index: 1001;
        }

        .drop_image_wrap .drop_image .img {
            width: 600px;
            height: 400px;
        }

        .drop_image_wrap .drop_button_wrap {
            /*background: #3388ff;*/
            width: 100%;
            height: 40px;
            position: absolute;
            z-index: 1001;
            bottom: -60px;
        }

        .drop_image_wrap .drop_button_wrap .drop_image_item_btn {
            display: block;
            /*padding: 0 20px;*/
            height: 40px;
            line-height: 40px;
            font-size: 22px;
            border-radius: 4px;
            color: #fff;
            border: 0;
            background-color: #4169e1;
            cursor: pointer;
            margin-left: 10px;
            text-align: center;
        }

        .result_image_wrap {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            display: none;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.js"></script>
</head>
<body>
<div id="imgWrapper">
    <input type="file" accept="image/*" name="file" id="chooseImg">
</div>
<div class="result_image_wrap">
    <img src="" alt="" width="400" class="result_image">
</div>
<div class="drop_image_wrap">
    <div class="drop_image">
        <div class="img">
            <img src="" id="crop_image">
        </div>
        <div class="drop_button_wrap display_flex">
            <div class="drop_image_item_btn display_flex_1" id="reset_btn">复位</div>
            <div class="drop_image_item_btn display_flex_1" id="rotate_btn">旋转</div>
            <div class="drop_image_item_btn display_flex_1" id="submit_btn">确认</div>
            <div class="drop_image_item_btn display_flex_1" id="cancel_btn">取消</div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {

        $("#chooseImg").on('change', function (e) {
            var file = e.target;

            if (!file.files || !file.files[0]) {
                return;
            }

            $(".drop_image_wrap").show();

            var reader = new FileReader();
            reader.onload = function (evt) {
                var replaceSrc = evt.target.result;
                //更换cropper的图片
                $('#crop_image').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真

            }
            reader.readAsDataURL(file.files[0]);
        });

        $('#crop_image').cropper({
            aspectRatio: 1 / 1,//默认比例
            guides: true,  //裁剪框的虚线(九宫格)
            autoCropArea: 0.8,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
            movable: true, //是否允许移动图片
            dragMode: 'move',
            cropBoxMovable: false,
            cropBoxResizable: false,
            zoomable: true,  //是否允许缩放图片大小
            mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
            touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
            rotatable: true,  //是否允许旋转图片
            crop: function (e) {
                // 输出结果数据裁剪图像。
            }
        });

        $("#reset_btn").on('click', function () {
            $('#crop_image').cropper("reset");
        });

        $("#rotate_btn").on('click', function () {
            $('#crop_image').cropper("rotate", 45);
        });

        $("#submit_btn").on('click', function () {
            if ($("#crop_image").attr("src") == null) {
                alert("无法进行裁剪，请换一张图片");
                return false;
            }
            var cas = $('#crop_image').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            $(".result_image").prop("src", base64url);//显示为图片的形式

            //关闭裁剪框
            $(".drop_image_wrap").hide();
            $(".result_image_wrap").show();
        });

        $("#cancel_btn").on('click', function () {
            $('#crop_image').cropper("destroy");
            $(".drop_image_wrap").hide();
        });


    });

</script>
</body>
</html>
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

H5裁剪图片上传
