jQuery.photoClip头像图片上传裁剪旋转放大缩小代码

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>