原生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; //鼠标按下事件 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; // 需要裁剪原始图片的宽 var ZHLCutDeImgH = 0; // 需要裁剪原始图片的高 var ZHLCutSelect = document.getElementById("ZHLCutSelect"); ZHLCutSelect.onchange = function () { var file = ZHLCutSelect.files[0]; //判断文件大小不能超过10M ,免去服务器的压力。 if (file.size > 10 * 1024 * 1024) { alert("上传文件必须 &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0