html5移动端上传图片裁剪插件



111 440 147



特效描述:html5移动端 上传图片 裁剪插件,html5移动端图片裁剪。支持缩放。

代码结构

1. 引入JS

<script src="js/img.js"></script>
<script src="js/require.js"></script>
<script src="js/main.js"></script>

2. HTML代码

		<div class="toBar">
			<label>
				选择图片
				<input type="file" />
			</label>
			<button type="button">使用</button>
		</div>
		<div class="img_content">
			<img src="http://static.hdslb.com/live-static/images/bg/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>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 拖动 拖拽 拖动插件 拖拽插件 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 图片拖动 图片拖拽 头像上传 图片上传 缩放切换 按钮控制 头像截图

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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