html5手机端图片上传裁剪代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5手机端图片上传裁剪代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>html5手机端图片上传裁剪代码</title>
</head>
<style type="text/css">
	html,body{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.toBar{
		width: 100%;
		padding: 15px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	.toBar label input{
		display: none;
	}
	.toBar label,.toBar button{
		display: inline-block;
		width: 100px;
		text-align: center;
		padding: 10px 0;
		font-size: 12px;
		color: #fff;
		background: #8080ca;
		border-radius: 6px;
		cursor: pointer;
	}
	.toBar button{
		border: none;
		float: right;
	}
	.img_content,canvas{
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}
	canvas{
		border: 1px solid #333;
	}
</style>

<body>
<div class="toBar">
	<label>
		选择图片
		<input type="file" />
	</label>
	<button type="button">使用</button>
</div>
<div class="img_content">
	<img src="img/1.jpg" />
</div>
<!--裁剪图片框。宽高为定义裁剪出的图片大小-->
<canvas width="300" height="300"></canvas>

<script src="js/img.js"></script>
<script src="js/require.js"></script>
<script src="js/main.js"></script>
<script>
	window.addEventListener("load",function(){
		var $input = document.querySelector("input");
		var $img = document.querySelector("img");
		var $canvas = document.querySelector("canvas");
		//选择图片
		$input.addEventListener("change",function(){
			$img.src = getFileUrl(this);
		},false);
		
		
		
		var myCrop;
		require(["jquery", 'hammer', 'tomPlugin', "tomLib", 'hammer.fake', 'hammer.showtouch'], function($, hammer, plugin, T) {
			document.addEventListener("touchmove", function(e) {
					e.preventDefault();
			});
			var opts = {
					cropWidth: $canvas.width,
					cropHeight: $canvas.height
			},
			previewStyle = {
				x: 0,
				y: 0,
				scale: 1,
				rotate: 0,
				ratio: 1
			},
			transform = T.prefixStyle("transform"),
			myCrop = T.cropImage({
				bindFile: $("input"),
				enableRatio: false, //是否启用高清,高清得到的图片会比较大
				canvas: $canvas, //放一个canvas对象
				cropWidth: opts.cropWidth, //剪切大小
				cropHeight: opts.cropHeight,
				bindPreview: $("img"), //绑定一个预览的img标签
				useHammer: true, //是否使用hammer手势，否的话将不支持缩放
				oninit: function() {

				},
				onLoad: function(data) {
					//用户每次选择图片后执行回调
					resetUserOpts();
					previewStyle.ratio = data.ratio;
					$("img").attr("src", data.originSrc).css({
						width: data.width,
						height: data.height
					}).css(transform, 'scale(' + 1 / previewStyle.ratio + ')');
					myCrop.setCropStyle(previewStyle)
				}
			});

			function resetUserOpts() {
				$("canvas").hammer('reset');
				previewStyle = {
					scale: 1,
					x: 0,
					y: 0,
					rotate: 0
				};
				$("img").attr("src", '');
			};
			$("canvas").hammer({
				gestureCb: function(o) {
					//每次缩放拖拽的回调
					$.extend(previewStyle, o);
					console.log("用户修改图片", previewStyle)
					$("img").css(transform, "translate3d(" + previewStyle.x + 'px,' + previewStyle.y + "px,0) rotate(" + previewStyle.rotate + "deg) scale(" + (previewStyle.scale / previewStyle.ratio) + ")")
				}
			});
			
			$("button").on("click", function() {
				myCrop.setCropStyle(previewStyle)
				var src = myCrop.getCropFile({});
				window.location.href = src;
			});
		});
		
		
	},false);
</script>
</body>
</html>

JS代码(jquery-private.js):

/** * Created by tom.chang on 2015/5/14. */
define(["jquery"],function(jq){
	return jq.noConflict(true);
}
)

JS代码(main.js):

var baseUrl=baseUrl||"./js/";
	require.config({
	//测试防止js文件缓存 //urlArgs:"bust=" + (new Date()).getTime(),/*模块依赖配置*/
 baseUrl:baseUrl,shim:{
	'jquery.ui.core':['jquery'],'jquery.ui.widget':['jquery'],'jquery.ui.mouse':['jquery'],'jquery.ui.slider':['jquery'],"zepto.touch":"Zepto","zepto.fx":"Zepto"}
,/*模块路径配置*/
 paths:{
	"exif-js":"exif","jquery":"jquery-2.1.4","jquery.eraser":"jquery.eraser","underscore":"underscore.min","backbone":"backbone.min","Zepto":"zepto.min","zepto.touch":"zepto.touch","zepto.fx":"zepto.fx","tomLib":"tom.Lib","zxxLib":"zxx.Lib","jquery-private":"jquery-private","tom":"tomRequire","tomTest":"tomRequire","lodash":"lodash","jcanvas":"jcanvas","hammer":"Hammer/hammer.min","hammer.fake":"Hammer/hammer.fakemultitouch","hammer.showtouch":"Hammer/hammer.showtouches","tomPlugin":"plugins/tom-jqplugins",'Caman':"caman.full",'slider':"rangeslider.js-1.3.3/rangeslider.min","iscroll-lite":"iscroll-lite","megapix-image":"megapix-image",'fastclick':'fastclick'}
,/*模块规则配置*/
 map:{
	'*':{
	'jquery':'jquery-private','tomLib':'tomLib'}
,"jquery-private":{
	"jquery":"jquery"}
}
}
);

附件:下载该文件资源,减少时间成本(增值服务)