layui编写一个图片裁剪上传功能代码-html代码-BFW代码库

代码语言：html

所属分类：上传

代码描述：layui编写一个图片裁剪上传功能代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui.2.6.5.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">



    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;user-select: none;}
        .container{width: 100%;height: 100%;}
        .tz-main{position:absolute;width: 600px;height: 400px;left:50%;top:50%;margin-left:-300px;margin-top:-200px;}
        .file-name{position: absolute;width: 200px;height: 200px;top: 50%;left: 75%;margin: -93pt 0 0 -75pt;border: 1px solid #fff;z-index: 1;cursor: no-drop;}
        .tz-received{position:absolute;overflow:hidden;width:600px;height:350px;border:1px solid #eee;background:#eee;cursor:move; }
        .cut-box{top:50%;margin:-75pt 0 0 -75pt;height:200px;border: 1px solid #fff;box-shadow:0 0 0 750pt rgba(0,0,0,.3)}
        .cut-box{position:absolute;left:30%;width:200px}
        .up-box{position: relative;height: 50px;padding:4px;}
        .box-btn{width: 236px;position: absolute;left: 50%;margin-left: -118px;}
        .up-box a { display: block; float: left;margin-left: 15px;padding: 11px;}
        .up-box a:hover{color: #fff;}
        .total-btn{border-radius:4px;background:#169af3;color:#fff;cursor:pointer}
        .select-btn{margin-left: -4px !important;}
        .tz-main .tz-sm{position:absolute;bottom:0px;width:inherit;}
        .tz-sm>p{overflow:hidden;padding:15px 0 0;width:100%;text-overflow:ellipsis;white-space:nowrap}
        .tz-sm .sp,.tz-sm>p{font-weight:100;font-size:14px}
    </style>
</head>

<body>

    <div class="container">
        <div class="tz-main">
            <div style="position: relative;width: 600px;height: 400px;">
                <div class="file-name"></div>
                <div class="tz-received" id="TzReceived">
                    <div class="cut-box"></div>
                </div>
                <div class="tz-sm" id="tzsm">
                    <div class="up-box">
                        <div class="box-btn">
                            <a href="javascript:;" id="selectBtn" class="total-btn select-btn">选择图片</a>
                            <a href="javascript:;" id="cutBtn" class="total-btn cut-btn">裁剪</a>
                            <a href="javascript:;" id="uploadBtn" class="total-btn upload-btn">立即上传</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        (function () {
        let userAgent = function () {
            let ua = navigator.userAgent.toLowerCase();
            return {
                isWebkit: /webkit|khtml/.test(ua),
                isOpera: ua.indexOf('opera') > -1,
                isFirefox: ua.indexOf('firefox') > -1,
                isIE6: ua.indexOf('msie 6') > -1,
                isIE7: ua.indexOf('msie 7') > -1,
                isIE8: ua.indexOf('msie 8') > -1,
                isIE9: ua.indexOf('msie 9') > -1
            }
        }
        window.mousewheel = function(){}
        mousewheel.prototype.init=function(el, fn, capture){
            var type = (userAgent().isFirefox) ? "DOMMouseScroll" : "mousewheel";
            if(window.addEventListener){
                return function(){
                    el.addEventListener(type,fn,capture);
                }
            }else if(window.attachEvent){
                return function(){
                    el.attachEvent("on" + type, fn);
                }
            }
        }
        mousewheel.prototype.stopEvent=function(event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            }else {
                event.cancelBubble = true;
            }
            if(event.preventDefault) {
                event.preventDefault();
            }else {
                event.returnValue = false;
            }
        }
        mousewheel.prototype.wheelevent=function(ele,fn){
            var ev,_this = this,delta = 0;
            _this.init(ele,function(e){
                ev = window.event || e;
                _this.stopEvent(ev);
                delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3);
                try{
                    fn(delta);
                }catch(er){
                    return;
                }
            },false)();
        }
        mousewheel.prototype.zoomIn=function(ele,fn){
            this.wheelevent(ele,function(value){
                if(value > 0){fn(value);return;}
            });
        }
        mousewheel.prototype.zoomOut=function(ele,fn){
            this.wheelevent(ele,function(value){
                if(value < 0){fn(value);return;}
            });
        }
    })();
    (function () {
        let params = {image:new Image(),mouseX:0,mouseY:0,dragable:false,upload_file:null}
        let cut = {}
        cut.trim = function(str){
            return str.replace(/\s+/g,"");
        }
        cut.empty = function(v){
            switch(typeof v){
                case 'undefined':
                    return true;
                case 'string':
                    if(this.trim(v).length == 0){
                        return true;
                    }
                    break;
                case 'boolean':
                    if(!v){
                        return true;
                    }
                    break;
                case 'number':
                    if(0 === v){
                        return true;
                    }
                    break;
                case 'object':
                    if(null === v){
                        return true;
                    }
                    if(undefined !== v.length && v.length==0){
                        return true;
                    }
                    for(var k in v){
                        return false;
                    }
                    return true;
                    break;
            }
            return false;
        }
        cut.init = function () {
            let selectBtn = document.querySelector("#selectBtn");
            let cutBtn = document.querySelector("#cutBtn");
            let uploadBtn = document.querySelector("#uploadBtn");
            let files = document.createElement("input");
            files.type = "file";
            files.name = "file";
            selectBtn.onclick = function () {
                files.click();
            }
            cutBtn.onclick = function () {
    
                if (cut.empty(files.value)){
                    layer.msg("请选择或拖拽要裁剪的图片！");
                }else {
                    let img = cut.drawImg();
                    if (cut.empty(img)){
                        layer.msg("裁剪不正确！");
                    }else {
                        document.querySelector(".file-name").innerHTML = "<img src='" + img + "' style='width: 100%;'>";
                    }
                }
            }
            uploadBtn.onclick = function () {
                cut.upload(params.upload_file);
            }
            files.onchange = function () {
                if(!cut.empty(this.files[0])){
                    if(this.files[0].type.indexOf("image") === -1){
                        layer.msg("请选择图片文件");
                    }else{
                        let reader = new FileReader();
                        let file=this.files[0];
                        reader.onload = function(e) {
                            cut.create(file,e.target.result);
                        }
                        reader.readAsDataURL(this.files[0]);
                    }
                }
            }
            cut.events();
        }
        //ajax 传入服务器
        cut.upload = function(file){
            if(this.empty(file)){
      .........完整代码请登录后点击上方下载按钮下载查看