修改iOS图片拍照功能

app/js/picture-upload.js

@@ -1,5 +1,13 @@
mui.plusReady(function() {
	//获取手机屏幕宽高
	var c_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	var c_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	var can_obj = document.querySelector("#canvas");
	var can_obj2 = document.querySelector("#canvas2");
	var img_obj = document.querySelector("#canvas_img");
	var img_obj2 = document.querySelector("#canvas_img2");
	var div_obj = document.querySelector("#canvas_div");
	var canvas_ok = document.querySelector("#canvas_ok");
	var list = plus.webview.currentWebview();
	var userId = plus.storage.getItem('userid');
@@ -8,12 +16,131 @@ mui.plusReady(function() {
	var flag = list.flag;
	var headFlag = list.headFlag;
	var resouFlag = list.resouFlag;
	console.log(resouFlag)
	var toph = (c_h - c_w - 1) / 2;
	var bottomh = (c_h - c_w + 99) / 2;
	var posX = 0,
		posY = 0; //相对坐标
	var _x = 0,
		_y = 0;
	var left_x = 0,
		left_y = 0; //计算 偏移量 设置画布中的X，Y轴 (加偏移量)
	img_obj.setAttribute("src", list.imgurl);
	can_obj.width = c_w - 50;
	can_obj.height = c_w - 50;
	can_obj.style.top = (c_h - c_w - 2) / 2 + "px";
	div_obj.style.borderWidth = toph + "px 23px " + bottomh + "px 24px";
	//旋转角度
	function rotateImage(deg) {
		can_obj2.width = img_obj.height;
		can_obj2.height = img_obj.width;
		var ctx = can_obj2.getContext("2d");
		ctx.save();
		ctx.translate(img_obj.height / 2, img_obj.width / 2);
		ctx.rotate(deg * Math.PI / 180);
		ctx.drawImage(img_obj, -img_obj.width / 2, -img_obj.height / 2);
		ctx.restore();
		document.getElementById("canvas_img2").src = can_obj2.toDataURL();
		var imgh = document.getElementById("canvas_img2");
		setTimeout(function() {
			autoResizeImage(c_w, c_h, imgh); 
		}, 100);
	}
	//初始化图片加载完成
	img_obj.onload = function() {
		EXIF.getData(img_obj, function() {
			EXIF.getAllTags(this);
			Orientation = EXIF.getTag(this, 'Orientation');
			if(Orientation == 6) {
				angle = 0;
				rotateImage(90);
			} else if(Orientation == 3) {
				angle = 0;
				rotateImage(180);
			} else if(Orientation == 8) {
				angle = 0;
				rotateImage(270);
			} else {
				var imgsrc = img_obj.getAttribute("src");
				document.getElementById("canvas_img2").src = imgsrc;
				var imgh = document.getElementById("canvas_img2");
				setTimeout(function() {
					autoResizeImage(c_w, c_h, imgh)
				}, 10);
			}
			imageMove();
		});
	}
	//手指移动图片
	function imageMove() {
		document.querySelector("#canvas_div").addEventListener('touchstart', touch, false);
		document.querySelector("#canvas_div").addEventListener('touchmove', touch, false);
		document.querySelector("#canvas_div").addEventListener('touchend', touch, false);
		ctx_img = can_obj.getContext("2d");
		function touch(event) {
			var event = event || window.event;
			event.preventDefault(); //阻止浏览器或body 其他冒泡事件
			var mv_x1 = event.changedTouches[0].clientX,
				mv_y1 = event.changedTouches[0].clientY; //手指坐标
			var img_left = img_obj2.left,
				img_top = img_obj2.top; //图片坐标
			if(event.touches.length == 1) { //单指操作
				if(event.type == "touchstart") { //开始移动
					posX = mv_x1 - img_obj2.offsetLeft; //获取img相对坐标
					//posd = mv_x1 - img_obj.offsetRight; //获取img相对坐标
					posY = mv_y1 - img_obj2.offsetTop;
				} else if(event.type == "touchmove") { //移动中
					_x = mv_x1 - posX; //移动坐标
					_y = mv_y1 - posY;
					img_obj2.style.left = _x + "px";
					img_obj2.style.top = _y + "px";
				}
			}
		}
	}
	//裁剪确定的图片
	function save_img() {
		var ctx_X = (can_obj.width - img_obj2.width) / 2,
			ctx_Y = (can_obj.height - img_obj2.height) / 2;
		if(_x == 0) {
			ctx_img.drawImage(img_obj2, ctx_X, ctx_Y, img_obj2.width, img_obj2.height); //初始化 canvas 加入图片
		} else {
			ctx_img.drawImage(img_obj2, _x + left_x / 2 - 25, _y - parseFloat(can_obj.style.top) + left_y / 2, img_obj2.width, img_obj2.height); //初始化 canvas 加入图片
		}
		var base64 = can_obj.toDataURL("image/jpeg", 1);
		var subbase = base64.substring(22);
		document.querySelector("#img_base64").value = subbase;
	}
	//图片自适应
	function autoResizeImage(maxWidth, maxHeight, objImg) {
		var w = objImg.width;
		var h = objImg.height;
		wRatio = maxWidth / w;
		hRatio = maxHeight / h;
		if(w > maxWidth) {
			if(w > h) {
				objImg.height = maxWidth - 50;
			} else {
				objImg.width = c_w - 46;
			}
		} else {
			objImg.width = maxWidth - 50;
			objImg.height = maxWidth - 50;
		}
		objImg.style.top = (c_h - objImg.height - 50) / 2 + "px";
		objImg.style.left = (c_w - objImg.width) / 2 + "px";
	}
	//提交图片
	canvas_ok.addEventListener("tap", function() {
		save_img();
		//return;
		imgOk = document.querySelector("#img_base64").value;
		console.log(imgOk)
		//alert(angle)
		console.log(flag);
		console.log(list.resourceId);
		//alert(angle)
@@ -99,235 +226,4 @@ mui.plusReady(function() {
	})
	//获取手机屏幕宽高
	var c_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	var c_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	var can_obj = document.querySelector("#canvas");
	var img_obj = document.querySelector("#canvas_img");
	var div_obj = document.querySelector("#canvas_div");
	var posX = 0,
		posY = 0; //相对坐标
	var scale = 0; //记录在缩放动作执行前的 缩放值
	var start_X1 = 0,
		start_Y1 = 0,
		start_X2 = 0,
		start_Y2 = 0;
	var start_sqrt = 0; //开始缩放比例
	var sqrt = 1;
	var left_x = 0,
		left_y = 0; //计算 偏移量 设置画布中的X，Y轴 (加偏移量)
	img_obj.onload = function() {
		EXIF.getData(img_obj, function() {
			//alert(EXIF.pretty(this));
			EXIF.getAllTags(this);
			//alert(EXIF.getTag(this, 'Orientation'));
			Orientation = EXIF.getTag(this, 'Orientation');
			//return;
			if(Orientation == 6) {
				//alert('需要顺时针（向左）90度旋转');
				angle = 90;
				var current = 0;
				//alert(angle);
				//objImg.rotate(degree); 
				current = (current + 90) % 360;
				img_obj.style.transform = 'rotate(' + current + 'deg)';
				can_obj.style.transform = 'rotate(' + current + 'deg)';
			}
			if(Orientation == 3) {
				//alert('需要顺时针（向左）90度旋转');
				angle = 180;
				var current = 0;
				//objImg.rotate(degree); 
				current = (current + 180) % 360;
				img_obj.style.transform = 'rotate(' + current + 'deg)';
				can_obj.style.transform = 'rotate(' + current + 'deg)';
			}
			if(Orientation == 8) {
				//alert('需要顺时针（向左）90度旋转');
				angle = -90;
				var current = 0;
				//objImg.rotate(degree); 
				current = (current - 90) % 360;
				img_obj.style.transform = 'rotate(' + current + 'deg)';
				can_obj.style.transform = 'rotate(' + current + 'deg)';
			}
		});
		load();
	}
	function load() {
		//设置canvas 宽度（全屏显示），高度,上下居中显示
		can_obj.width = c_w - 50;
		can_obj.height = c_w - 50;
		can_obj.style.top = (c_h - c_w - 2) / 2 + "px";
		// can_obj.style.left ="25px";
		//设置图片自适应大小及图片的居中显示
		autoResizeImage(c_w, c_h, img_obj);
		//img_obj.width=c_w - 50;
		img_obj.style.top = (c_h - img_obj.height - 50) / 2 + "px";
		img_obj.style.left = (c_w - img_obj.width) / 2 + "px";
		document.querySelector("#canvas_div").addEventListener('touchstart', touch, false);
		document.querySelector("#canvas_div").addEventListener('touchmove', touch, false);
		document.querySelector("#canvas_div").addEventListener('touchend', touch, false);
		ctx_img = can_obj.getContext("2d");
		var ctx_X = (can_obj.width - img_obj.width) / 2,
			ctx_Y = (can_obj.height - img_obj.height) / 2;
		ctx_img.drawImage(img_obj, ctx_X, ctx_Y, img_obj.width, img_obj.height); //初始化 canvas 加入图片
		function touch(event) {
			var event = event || window.event;
			event.preventDefault(); //阻止浏览器或body 其他冒泡事件
			var mv_x1 = event.changedTouches[0].clientX,
				mv_y1 = event.changedTouches[0].clientY; //手指坐标
			var img_left = img_obj.left,
				img_top = img_obj.top; //图片坐标
			if(event.touches.length == 1) { //单指操作
				if(event.type == "touchstart") { //开始移动
					posX = mv_x1 - img_obj.offsetLeft; //获取img相对坐标
					//posd = mv_x1 - img_obj.offsetRight; //获取img相对坐标
					posY = mv_y1 - img_obj.offsetTop;
				} else if(event.type == "touchmove") { //移动中
					var _x = mv_x1 - posX; //移动坐标
					var _y = mv_y1 - posY;
					img_obj.style.left = _x + "px";
					img_obj.style.top = _y + "px";
					ctx_img.clearRect(0, 0, can_obj.width, can_obj.height); //清除画布
					console.log(Orientation);
					if(Orientation == 6) {
						ctx_img.drawImage(img_obj, _y - parseFloat(can_obj.style.top) + left_y - 120 / 2, -(_x + left_x / 2 + 32), img_obj.width * sqrt, img_obj.height * sqrt); //画布内图片移动		
					} else {
						ctx_img.drawImage(img_obj, _x + left_x / 2 - 25, _y - parseFloat(can_obj.style.top) + left_y / 2, img_obj.width * sqrt, img_obj.height * sqrt); //画布内图片移动
					}
				}
			}
			/*else if(event.touches.length == 2) { //双指操作
			if(event.type == "touchstart") {
				scale = img_obj.style.Transform == undefined ? 1 : parseFloat(img_obj.style.Transform.replace(/[^0-9^\.]/g, "")); //获取在手指按下瞬间的放大缩小值（scale），作用，在移动时，记录上次移动的放大缩小值
				start_X1 = event.touches[0].clientX; //记录开始的坐标值,作用：在下次放大缩小后，去掉上次放大或缩小的值
				start_Y1 = event.touches[0].clientY;
				start_X2 = event.touches[1].clientX;
				start_Y2 = event.touches[1].clientY;
				start_sqrt = Math.sqrt((start_X2 - start_X1) * (start_X2 - start_X1) + (start_Y2 - start_Y1) * (start_Y2 - start_Y1)) / 200; //获取在缩放时 当前缩放的值
			} else if(event.type == "touchmove") {
				var mv_x2 = event.touches[1].clientX,
					mv_y2 = event.touches[1].clientY;
				var move_sqrt = Math.sqrt((mv_x2 - mv_x1) * (mv_x2 - mv_x1) + (mv_y2 - mv_y1) * (mv_y2 - mv_y1)) / 200; //动态获取上一次缩放值(随时变更)，在下次缩放时减去上一次的值，作用：防止累加之前的缩放
				sqrt = move_sqrt - start_sqrt + scale; //求出缩放值
				img_obj.style.webkitTransform = "scale(" + sqrt + ")"; //设置放大缩小
				img_obj.style.Transform = "scale(" + sqrt + ")";
				ctx_img.clearRect(0, 0, can_obj.width, can_obj.height); //清除画布
				var dImg_left = parseFloat(img_obj.style.left.replace("px", "")),
					dImg_top = parseFloat(img_obj.style.top.replace("px", ""));
				var w = img_obj.width,
					h = img_obj.height,
					sw = w * sqrt,
					sh = h * sqrt;
				left_x = w - sw; //计算 偏移量 设置画布中的X，Y轴 (加偏移量) 注：canvas 原点放大（canvas中图片左上角坐标），css3 scale 中点放大
				left_y = h - sh;
				ctx_img.drawImage(img_obj, dImg_left + left_x / 2 - 25, dImg_top - parseFloat(can_obj.style.top.replace("px", "")) + left_y / 2, sw, sh); //画布内图片重置
			}
		}*/
		}
	}
	//window.addEventListener('load', load, false);
	//裁图
	function save_img() {
		var base64 = can_obj.toDataURL("image/jpeg", 1);
		var subbase = base64.substring(22);
		document.querySelector("#img_base64").value = subbase;
	}
	//图片自适应
	function autoResizeImage(maxWidth, maxHeight, objImg) {
		//var img = new Image();
		//img.src = objImg.src;
		//var hRatio;
		//var wRatio;
		//var ratio = 1;
		var w = objImg.width;
		var h = objImg.height;
		//alert(w);
		//alert(h);
		wRatio = maxWidth / w;
		hRatio = maxHeight / h;
		if(w > maxWidth) {
			if(w > h) {
				objImg.height = maxWidth - 50;
				//alert('1')
			} else {
				objImg.width = c_w - 46;
				//objImg.height=maxHeight;
				// alert('2')
			}
		} else {
			objImg.width = maxWidth - 50;
			objImg.height = maxWidth - 50;
		}
		/* if(w < maxWidth && h < maxHeight){
		 	objImg.width=maxWidth-50;
		 	objImg.height=maxWidth-50;
		 	alert('2')
		 }
		 if(w > maxWidth && h < maxHeight){
		 	objImg.width=maxWidth-50;
		 	objImg.height=maxWidth-50;
		 	alert('3')
		 }*/
		/*if (w < maxWidth && h < maxHeight) {
		      return;
		      alert('1')
		  }
		  if (maxWidth == 0 && maxHeight == 0) {
		      ratio = 1;
		      alert('2')
		  } else if (maxWidth == 0) {
		      if (hRatio < 1) {
		          ratio = hRatio;
		          alert('3')
		      }
		  } else if (maxHeight == 0) {
		      if (wRatio < 1) {
		          ratio = wRatio;
		          alert('4')
		      }
		  } else if (wRatio < 1 || hRatio < 1) {
		      ratio = (wRatio <= hRatio ? wRatio : hRatio);
		      alert('5')
		  } else {
		      ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
		      alert('6')
		  }
		  if (ratio < 1) {
		      if (ratio < 0.5 && w < maxWidth && h < maxHeight) {
		          ratio = 1 - ratio;
		      }
		      w = w * ratio;
		      h = h * ratio;
		      alert('7')
		      objImg.width=maxWidth-45;
		  	objImg.height=maxHeight;
		  }*/
		// objImg.height = h+50;
		//objImg.width = w;
	}
})
})