html5 canvas 头像上传

html5 canvas 头像上传

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.9.3/umd/popper.min.js" integrity="sha384-knhBOwpf8/28D6ygAjJeb0STNDZqfPbKaWQ8wIz/xgSc0xXwKsKhNype8fmfMka2" crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>  

	<div id="canvasDiv">
		<canvas id="crop" width="480" height="270" style="background-image:url(bg.png);">
	</div>
	<div>
		<div>
			<input type="file" name="imgUpload" id="imgUpload">
		</div>
		<div styel="width:100px; height:100px;padding-top:100px;">
			<img id="showImg"></img>
		</div>
	</div>
<script>
	var canvas = document.getElementById('crop');
	var ctx = canvas.getContext('2d');
	var src;
	var canvasWidth = canvas.width;
	var canvasHeight = canvas.height;
	var wheelRate = 1;
	var tx = 0;
	var ty = 0;
	var downX = 0;
	var downY = 0;
	var moveX = 0;
	var moveY = 0;

	var moveFlag = false;

	var img = new Image();

	var imgWidth = 0;
	var imgHeight = 0;
	var widthRate = 0;
	var heightRate = 0;
	var rate = 0;
	var squareSideLength = 0;

	var x = 0;
	var y = 0;

	var imgTx = 0;
	var imgTy = 0;

	$("#imgUpload").change(function(e) {
		for (var i = 0; i < e.target.files.length; i++) {
			var file = e.target.files.item(i);
			var freader = new FileReader();
			freader.readAsDataURL(file);
			freader.onload = function(e) {
				src = e.target.result;
				wheelRate = 1;
				tx = 0;
				ty = 0;
				$("#uploadhead").attr("src",src);
				img.src = src;
				imgWidth = img.width;
				imgHeight = img.height;
				squareSideLength = imgWidth < imgHeight ? imgWidth : imgHeight;
				widthRate = canvasWidth / imgWidth;
				heightRate = canvasHeight / imgHeight;
				drawCanvas();
			}
		}
	});  

	canvas.onmousewheel = function(e){
		var evt = window.event ||e;
		var delta = evt.detail ? -evt.detail/3 : evt.wheelDelta/120;
		if(delta < 0){
			wheelRate *= 0.9;
		}else {
			if(wheelRate < 1){
				wheelRate /=  0.9;
			}

		}
		ctx.restore();
		ctx.clearRect(0,0,canvasWidth,canvasHeight);
		drawCanvas();
	}

	canvas.onmousedown = function(e){
		var evt = window.event ||e;
		downX = evt.clientX;
		downY = evt.clientY;
		moveX = tx;
		moveY = ty;
		moveFlag = true;
	}

	canvas.onmousemove = function(e){
		if(moveFlag){
			var evt = window.event ||e;
			tx = evt.clientX - downX + moveX;
			ty = evt.clientY - downY + moveY;
			if(x + tx/rate < 0){
				tx = -x*rate;
			}
			if(x + tx/rate + squareSideLength*wheelRate > imgWidth){
				tx = (imgWidth - x - squareSideLength*wheelRate)*rate;
			}
			if(y + ty/rate < 0){
				ty = -y*rate;
			}
			if(y + ty/rate + squareSideLength*wheelRate > imgHeight){
				ty = (imgHeight - y - squareSideLength*wheelRate)*rate;
			}

			drawCanvas();

		}
	}

	document.onmouseup = function(){
		moveFlag = false;
	}

	function drawCanvas(){
		ctx.restore();
		ctx.clearRect(0,0,canvasWidth,canvasHeight);
		rate = widthRate < heightRate ? widthRate : heightRate;
		ctx.save();
		ctx.scale(rate,rate);
		ctx.translate((canvas.width/rate - imgWidth)/2,(canvas.height/rate - imgHeight)/2);
		//ctx.drawImage(img, 0, 0);
		ctx.globalAlpha=0.5;
		ctx.translate(-(canvas.width/rate - imgWidth)/2,-(canvas.height/rate - imgHeight)/2);
		//ctx.fillRect(0,0,canvas.width/rate,canvas.height/rate);
		ctx.translate((canvas.width/rate - imgWidth)/2,(canvas.height/rate - imgHeight)/2);
		//var sx = (canvasWidth/rate - imgWidth)/2;
		//var sy = (canvasHeight/rate - imgHeight)/2;
		x = (imgWidth - squareSideLength)/2;
		y = (imgHeight - squareSideLength)/2;
		//ctx.drawImage(img, x, y, squareSideLength, squareSideLength, x, y, squareSideLength, squareSideLength);
		ctx.globalAlpha=1.0;
		ctx.drawImage(img, x + tx/rate, y + ty/rate, squareSideLength*wheelRate, squareSideLength*wheelRate, x + tx/rate, y + ty/rate, squareSideLength*wheelRate, squareSideLength*wheelRate);
		imgData = ctx.getImageData(x - tx, y - ty, squareSideLength*wheelRate, squareSideLength*wheelRate);
		canvasToImage();
		ctx.restore();
		ctx.clearRect(0,0,canvasWidth,canvasHeight);
		rate = widthRate < heightRate ? widthRate : heightRate;
		ctx.save();
		ctx.scale(rate,rate);
		ctx.translate((canvas.width/rate - imgWidth)/2,(canvas.height/rate - imgHeight)/2);
		ctx.drawImage(img, 0, 0);
		ctx.globalAlpha=0.5;
		ctx.translate(-(canvas.width/rate - imgWidth)/2,-(canvas.height/rate - imgHeight)/2);
		ctx.fillRect(0,0,canvas.width/rate,canvas.height/rate);
		ctx.translate((canvas.width/rate - imgWidth)/2,(canvas.height/rate - imgHeight)/2);
		//var sx = (canvasWidth/rate - imgWidth)/2;
		//var sy = (canvasHeight/rate - imgHeight)/2;
		x = (imgWidth - squareSideLength)/2;
		y = (imgHeight - squareSideLength)/2;
		//ctx.drawImage(img, x, y, squareSideLength, squareSideLength, x, y, squareSideLength, squareSideLength);
		ctx.globalAlpha=1.0;
		ctx.drawImage(img, x + tx/rate, y + ty/rate, squareSideLength*wheelRate, squareSideLength*wheelRate, x + tx/rate, y + ty/rate, squareSideLength*wheelRate, squareSideLength*wheelRate);

	}

	function canvasToImage(){
		base64Str = canvas.toDataURL("image/png");
		$('#showImg').attr('src', base64Str);
		imgTx = squareSideLength*rate/2 - 240*wheelRate - tx;
		imgTy = squareSideLength*rate/2 - 135*wheelRate - ty;
		console.log(squareSideLength*rate/wheelRate);
		$('#showImg').css('transform', 'scale(' + (1/wheelRate) +') translateX(' + imgTx + 'px) translateY(' + imgTy + 'px) ');
	}
</script>
</body>
</html>