jQuery上传图片裁剪插件设置高宽图片裁剪代码



166 661 221



特效描述:jQuery 上传图片 裁剪插件 设置高宽 图片裁剪代码,jQuery图片裁剪插件,通过上传图片弹出窗口设置宽度和高度来进行图片裁剪效果,保持图片上传代码。适用于一些封面图片上传代码。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/ycbootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>

2. 引入JS

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="plugins/cover_js/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/cover_js/hammer.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/cover_js/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/cover_js/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

		<div class="yc-upload-wrap">
			<div class="yc-upload-box">
				<div class="container">
		        	<div class="row">
				        <div class="col-md-12 col-sm-12 col-xs-12" style="padding:0;">
				        	<div class="ycupload-mainbox">
				        		<div class="ycupload-main1" style="overflow:hidden;padding-left:25px;">
				        			<span style="float:left;color:#ff5a5a;font-size:14px;line-height:60px;font-weight:900;margin-right:7px;">
				        				&middot;
				        			</span>
				        			<span style="float:left;color:#333;font-size:16px;line-height:60px;margin-right:28px;">
				        				上传封面
				        			</span>
				        		</div>
				        		<div class="ycupload-line"></div>
				        		<div style="height:30px;"></div>
				        		<div  style="min-height:1px;">
				        			<div class="container">
							        	<div class="row">
									        <div class="col-md-12 col-sm-12 col-xs-12" style="padding-right:0;padding-left:36px;">
									        	<!--<a href="javascript:void(0);" class="cover-uploadBtn">
									        		<img src="img/yc_uploadimg_06.png"/>
									        		<div id="clipArea"></div>
													<input type="file" id="file">
													<button id="clipBtn">截取</button>
									        	</a>
									        	<div id="view"></div>-->
									        	<div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
									        		<div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">	
									        			<div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
									        				<div id="clipArea" style="margin:10px;height: 520px;"></div>
									        				<div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
									        					<button id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存封面</button>
									        				</div>
									        			</div>
									        		</div>
									        		<div id="view" style="width:214px;height:160.5px;" title="请上传 428*321 的封面图片"></div>
										        	<div style="height:10px;"></div>
										        	<div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
										        		点击上传封面图
										        		<input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">
										        	</div>
									        	</div>
								        	</div>
							        	</div>
						        	</div>
				        		</div>
				        		<div style="height:25px;"></div>
				        	</div>
			        	</div>
		        	</div>
	        	</div>
			</div>
		</div>
	    <script type="text/javascript">
	    //上传封面
	    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
		var clipArea = new bjj.PhotoClip("#clipArea", {
			size: [428, 321],// 截取框的宽和高组成的数组。默认值为[260,260]
			outputSize: [428, 321], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
			//outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
			file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
			view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
			ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
			loadStart: function() {
				// 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
				$('.cover-wrap').fadeIn();
				console.log("照片读取中");
			},
			loadComplete: function() {
				 // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
				console.log("照片读取完成");
			},
			//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
			clipFinish: function(dataURL) {
				 // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
				$('.cover-wrap').fadeOut();
				$('#view').css('background-size','100% 100%');
				console.log(dataURL);
			}
		});
		//clipArea.destroy();
	    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
admin
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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