JS图片上传裁剪获取地址特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

7 25 9



特效描述:图片上传裁剪 获取地址。JS图片上传裁剪获取地址代码是一款基于JS+HTML5实现的选择图片裁剪并上传服务端简单示例。

代码结构

1. HTML代码

<!-- 普通表单 -->
<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; // 需要裁剪原始图片的宽
	var ZHLCutDeImgH = 0; // 需要裁剪原始图片的高
	var ZHLCutSelect = document.getElementById("ZHLCutSelect");
    ZHLCutSelect.onchange = function () {
        var file = ZHLCutSelect.files[0];
        //判断文件大小不能超过10M ,免去服务器的压力。
        if (file.size > 10 * 1024 * 1024) {
            alert("上传文件必须 < 10Mb!");
            return false;
        }
        // 获取文件
        var reader = new FileReader();  // 实例化
        reader.readAsDataURL(file);     // 加载
        reader.onload = function () {   // 异步加载完成
            var base64 = reader.result; // 获取 base64 DataURL
            var imgDom = document.getElementById("ZHLCutDeImg");
			imgDom.style.display = 'inline-block';
            imgDom.src = base64;
		    var image = new Image();
			image.src = base64;
			image.onload = function () {
				ZHLCutDeImgW = image.naturalWidth;
				ZHLCutDeImgH = image.naturalHeight;
				ZHLCutCon.style.width = ZHLCutDeImgW+'px';
				ZHLCutCon.style.height = ZHLCutDeImgH+'px';
				console.log(ZHLCutDeImgW+'=='+ZHLCutDeImgH);
			}
        }
    }
/**
 * 裁剪
 */
	var cutNewImgBase64 = ''; // 裁剪后的图片base64全局变量
	var ZHLCutGo = document.getElementById('ZHLCutGo');
	ZHLCutGo.onclick = function(e){
		var imgDom = document.getElementById("ZHLCutDeImg");
		var canvas = document.createElement('canvas');  // 获取canvas对象
		var context = canvas.getContext('2d');          // 获取canvas的上下文
		canvas.width = cutAreaWidth;
		canvas.height = cutAreaHeight;
		//context.fillStyle = "#0000ff";
		//context.fillRect(0, 0, canvas.width, canvas.height);
		context.clearRect(0, 0, canvas.width, canvas.height); // 首先先清空canvas里面的内容,以防内容叠加
		context.drawImage(imgDom, nl, nt, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); // 画图
		cutNewImgBase64 = canvas.toDataURL('image/jpeg', 0.92);         // 格式和质量
		document.getElementById('ZHLCutSee').innerHTML = '<img src="'+cutNewImgBase64+'">'; // 裁剪的图片进行浏览
	}
/**
 * 上传
 */	
	// 自封装纯js ajax post 上传方法
	function jsPost(url,data,s,e){
		var xhr = new XMLHttpRequest();
		xhr.open('POST',url);
		xhr.onreadystatechange=function(){
			if (xhr.readyState==4){
				if (xhr.status==200 || xhr.status==304){
					s(xhr.responseText);
				}else if(xhr.status>=400){
					e(xhr.responseText);
				}
			}
		}
		xhr.send(data);
	}
	// 点击提交按钮进行文件上传
	var ZHLCutSub = document.getElementById("ZHLCutSub");
    ZHLCutSub.onclick = function () {
		let url = 'upload.php';
		let formData = new FormData(); // 实例化创建form表单
			formData.append("img", cutNewImgBase64); // 增加参数(如果进行大文件上传时可以吧base64数据转换成blob)
		/** 测试模拟已经上传成功获得了图片路径了 **/
		var filepath = './uploads/20210325130617_136.jpeg';
			filePathVal(filepath); // 赋值
		/** 配合后端接口上传 **/
		/*
        jsPost(url,formData,function(data){
			console.log('请求成功');
			console.log(data);
			//jsonData = JSON.stringify(data);
			var objData = JSON.parse(data);
			if(objData.code == 10000){
				alert('上传成功:'+objData.data.filepath);
				filePathVal(objData.data.filepath); // 赋值
			}else{
				alert('上传失败:'+objData.msg);
			}
		},function(data){
			console.log('请求失败');
			console.log(data);
			alert('上传异常');
		});
		*/
		// 上传完毕后这里可以直接关闭裁剪框
		document.getElementById("ZHLCutBox").style.display = 'none';
    }
/**
 * 扩展
 */
	// 点击显示裁剪控件
    document.getElementById("inputBox").onclick = function () {
		document.getElementById("ZHLCutBox").style.display = 'block';
    }
	// 图片上传路径赋值
	function filePathVal(value){
		document.getElementById("inputBox").value = value;
	}
	// 点击隐藏裁剪控件
    document.getElementById("ZHLCupCloseBtn").onclick = function () {
		document.getElementById("ZHLCutBox").style.display = 'none';
    }
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://sc.51qianduan.com/" target="_blank">站长素材</a></p>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到