js 上传头像

　　

　　css 

　　

 .con4{width: 230px;height: auto;overflow: hidden;margin: 20px auto;color: #FFFFFF;}
.con4 .btn{width: 100%;height: 45px;line-height: 30px;text-align: center;background: #d8b49c;display: block;font-size: 16px;border-radius: 5px;}
.upload{float: left;position: relative;margin-bottom: 30px;}
.upload_pic{display: block;width: 100%;height: 40px;position: absolute;left: 0;top: 0;opacity: 0;border-radius: 5px;}
#cvs{border: 1px solid #000;margin:20px 0 20px 50px auto;border-radius: 50%;}

　　HTML

　　

    <div class="con4">
        <span class="btn upload">上传头像
			<input type="file" class="upload_pic" id="upload" />
		</span>
        <canvas id="cvs" width="100%" height="100%">
        </canvas>
    </div>

　　js

var input1 = document.getElementById("upload"); 
 
if(typeof FileReader==='undefined'){
	input1.setAttribute('disabled','disabled');
}else{
	input1.addEventListener('change',function () {
		var file = this.files[0];
		if(!/image\/\w+/.test(file.type)){
			alert("文件必须为图片！");
			return false;
		}
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(e){


			var image = new Image();
			image.src = e.target.result;
			var max=200;
			image.onload = function(){
				var canvas = document.getElementById("cvs");
				var ctx = canvas.getContext("2d");
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				ctx.drawImage(image, 0, 0, 200, 200);
			};
		}
	},false);
}

　　

转载于:https://www.cnblogs.com/BeautifulBoy/p/6923806.html