html5仿app头像上传裁图

　　此作品实现了html5仿app头像上传裁图，支持 单手指 滑动，双手指 放大，保存为 base64位，暂时还没有处理跨域图片的 裁图问题，只能裁剪本地照片，html5+原生javascript实现，自适应屏幕宽度=高度，作品里面的每个功能的注释写得非常详细，大家自己下载下来看吧。。。

　　核心代码如下：

function touch (event){
	 var event = event || window.event;
	 event.preventDefault();//阻止浏览器或body 其他冒泡事件
	 var mv_x1 = event.touches[0].clientX,mv_y1 = event.touches[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相对坐标
			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);//清除画布
			ctx_img.drawImage(img_obj,_x + left_x/2,_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,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/png', 1 || 0.8 );
document.querySelector("#img_base64").value = base64;
}

//图片自适应
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;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (w < maxWidth && h < maxHeight) {
	return;
}
if (maxWidth == 0 && maxHeight == 0) {
	ratio = 1;
} else if (maxWidth == 0) {
	if (hRatio < 1) {
		ratio = hRatio;
	}
} else if (maxHeight == 0) {
	if (wRatio < 1) {
		ratio = wRatio;
	}
} else if (wRatio < 1 || hRatio < 1) {
	ratio = (wRatio <= hRatio ? wRatio : hRatio);
} else {
	ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
}
if (ratio < 1) {
	if (ratio < 0.5 && w < maxWidth && h < maxHeight) {
		ratio = 1 - ratio;
	}
	w = w * ratio;
	h = h * ratio;
}
objImg.height = h;
objImg.width = w;
}

来源：网友无痕于jqueryschool