jQuery.photoClip头像图片上传裁剪插件

jQuery.photoClip头像图片上传裁剪插件，点击选择上传图片，支持旋转、放大、缩小图片尺寸和拖动图片操作，设置好后裁剪即可。

分类：表单代码 > 图片上传难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script type="text/javascript" src="js/iscroll-zoom.js"></script> 
<script type="text/javascript" src="js/hammer.js"></script> 
<script type="text/javascript" src="js/lrz.all.bundle.js"></script> 
<script type="text/javascript" src="js/jquery.photoClip.js"></script> 
<script>
$(function(){
	var html = '<div class="boxCen">';
		html += '<div id="clipArea" class="file-clip"></div>';
		html += '<div class="file">';
        html += '<div class="file-btn">点击上传图片</div>';
        html += '<input type="file" class="service-file" id="file">';
        html += '</div>';
		html += '<div class="file-btn" id="clipBtn">裁剪图片</div>';
		html += '<div class="file-btn" id="rotaBtn">旋转</div>';
		html += '<div class="file-btn" id="bigImg" >放大</div>';
		html += '<div class="file-btn" id="smallImg">缩小</div>';
		html += '<div class="red">（鼠标滚轮为缩放，每次双击则顺时针旋转90度）</div>';
		html += '</div>';
		html += '<div id="imgHtml" class="clipEnd"></div>';	
		$('#tt').html(html);
		clip();
		
		
});

function clip(){
	$("#clipArea").photoClip({
		size: [200, 200],
		file: "#file",
		ok: "#clipBtn",
		view:"#imgcav",
		rotaBtn:'#rotaBtn',
		bigBtn:'#bigImg',
		smallBtn:'#smallImg',
		outputSize:[200, 200],
		loadStart: function() {
			console.log("照片读取中");
		},
		loadComplete: function() {
			console.log("照片读取完成");
		},
		clipFinish: function(dataURL) {
			var img = '<img src="'+dataURL+'">';
			$('#imgHtml').html(img);
		}
	});
}
</script>