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> 