原生js实现图片裁剪上传效果代码-html代码-BFW代码库

原生js实现图片裁剪上传效果代码

代码语言：html

所属分类：上传

代码描述：原生js实现图片裁剪上传效果代码

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯js选择图片裁剪上传服务端简单示例</title>

<style>
/*页面其他样式*/
body{width:auto;height:auto;margin:0;padding:10px;}
#inputBox{width:300px;height:20px;}
#ZHLCutBox{display:none;padding:0 0 10px 0;position:absolute;top:0;left:0;border:1px solid #ccc;background:#fff;}

/*裁剪控件样式*/
button{margin:10px;}
#ZHLCutCon,#ZHLCutSee{margin:0 10px; 10px 10px;}
#ZHLCutCon{min-width:500px;min-height:500px;max-width:100%;max-height:100%;border:1px solid #ccc;position:relative;}
#ZHLCutDeImg{position:absolute;z-index:1;user-select: none;display:none;}
#ZHLCutE{position:absolute;z-index:3;background:#fff;opacity:0.4;user-select: none;}

</style>
</head>
<body>
        <!-- 普通表单 -->
        <form action="" method="post" autocomplete="off">
                <!-- 这里只获得图片路径进行保存即可（点击这里触发裁剪空间并上传文件然后返回图片路径） -->
                <input type="text" id="inputBox" placeholder="点击上传图片" />
                <input type="submit" value="保存">
        </form>
        

<script>

/**
 * 初始值
 */
        addZHLCutTool(); // 初始html元素
        var divBorder = 2; // 裁剪区边框
        var cutAreaWidth = 150; // 裁剪区宽
        var cutAreaHeight = 100;// 裁剪区高
        var ZHLCutConWidth = 500;  // 容器初始宽
        var ZHLCutConHeight = 500; // 容器初始高
        var ZHLCutE = document.getElementById('ZHLCutE');
                ZHLCutE.style.border = divBorder+'px dashed #111';
                ZHLCutE.style.width = cutAreaWidth+'px';
                ZHLCutE.style.height = cutAreaHeight+'px';
        var ZHLCutCon = document.getElementById('ZHLCutCon');
                ZHLCutCon.style.width = ZHLCutConWidth+'px';
                ZHLCutCon.style.height = ZHLCutConHeight+'px';
/**
 * 添加控件html基本元素
 */ 
        function addZHLCutTool(){
                var ZHLCutBox = document.getElementById("ZHLCutBox");
                if(!ZHLCutBox){
                        let ZHLCutBox = document.createElement("div");
                        //裁剪控件
                        let html = '';
                                html += '<div id="ZHLCutBox">';
                                html += '<input type="file" id="ZHLCutSelect" hidefocus style="display:none">';
                                html += '<button onclick="ZHLCutSelect.click()">选择文件</button>';
                                html += '<button id="ZHLCutGo">裁剪</button>';
                                html += '<button id="ZHLCutSub">上传</button>';
                                html += '<button id="ZHLCupCloseBtn">关闭</button>';
                                html += '<div id="ZHLCutSee"></div>';
                                html += '<div id="ZHLCutCon">';
                                html += '<img src="" id="ZHLCutDeImg" />';
                                html += '<div id="ZHLCutE"></div>';
                                html += '</div>';
                                html += '</div>';
                        document.body.appendChild(ZHLCutBox);
                        ZHLCutBox.innerHTML = html;
                }
        }
        
/**
 * 拖动DIV
 */
        //获取元素
        //var ZHLCutE = document.getElementById('ZHLCutE');
        var x = 0;
        var y = 0;
        var l = 0;
        var t = 0;
        var nl = 0;
        var nt = 0;
        var isDown = false;
        
.........完整代码请登录后点击上方下载按钮下载查看