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

代码语言：html

所属分类：上传

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

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

<!DOCTYPE html>
<html>

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


    <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>

    <!-- 裁剪控件 可以用js动态添加-->
    <!--
<div id="ZHLCutBox">
	<input type="file" id="ZHLCutSelect" hidefocus style="display:none">
	<button onclick="ZHLCutSelect.click()">选择文件</button>
	<button id="ZHLCutGo">裁剪</button>
	<button id="ZHLCutSub">上传</button>
	<button id="ZHLCupCloseBtn">关闭</button>
	<div id="ZHLCutSee"></div>
	<div id="ZHLCutCon">
		<img src="" id="ZHLCutDeImg" />
		<div id="ZHLCutE"></div>
	</div>
</div>
-->
    <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;
        	
        	//鼠标按下事件
        	ZHLCutE.onmousedown = function(e) {
        		//获取x坐标和y坐标
        		x = e.clientX;
        		y = e.clientY;
        		//获取左部和顶部的偏移量
        		l = ZHLCutE.offsetLeft;
        		t = ZHLCutE.offsetTop;
        		//开关打开
        		isDown = true;
        		//设置样式  
        		ZHLCutE.style.cursor = 'move';
        	}
        	//鼠标移动
        	window.onmousemove = function(e) {
        		if (isDown == false) {
        			return;
        		}
        		//获取x和y
        		var nx = e.clientX;
        		var ny = e.clientY;
        		//计算移动后的左偏移量和顶部的偏移量
        		nl = nx - (x - l);
        		nt = ny - (y - t);
        		//控制最小便宜量（防止裁剪框移出图片区域）
        		nl = nl < 0 ? 0 : nl;
        		nt = nt < 0 ? 0 : nt;
        		//控制最大偏移量（防止裁剪框移出图片区域）
        		if(ZHLCutDeImgW > 0 && ZHLCutDeImgH > 0){
        			nl = nl > (ZHLCutDeImgW-cutAreaWidth-divBorder) ? ZHLCutDeImgW-cutAreaWidth-divBorder : nl;
        			nt = nt > (ZHLCutDeImgH-cutAreaHeight-divBorder) ? ZHLCutDeImgH-cutAreaHeight-divBorder : nt;
        		}else{
        			nl = nl > (500-cutAreaWidth-divBorder) ? 500-cutAreaWidth-divBorder : nl;
        			nt = nt > (500-cutAreaHeight-divBorder) ? 500-cutAreaHeight-divBorder : nt;
        		}
        		//div位置移动
        		ZHLCutE.style.left = nl + 'px';
        		ZHLCutE.style.top = nt + 'px';
        	}
        	//鼠标抬起事件
        	ZHLCutE.onmouseup = function() {
        		//开关关闭
        		isDown = false;
        		ZHLCutE.style.cursor = 'default';
        	}
        	
        /**
         * 选择图片
         */
        	var ZHLCutDeImgW = 0; .........完整代码请登录后点击上方下载按钮下载查看