html5移動端上傳圖片裁剪插件



113 451 151



特效描述: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

加群請備注:從官網了解到

老夫子电子