首页 > 代码库 > 手机端用来上传用户头像的代码canvas

手机端用来上传用户头像的代码canvas

2024-08-17 07:18:36   219人阅读

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style>
			label {
				height: 40px;
				width: 100px;
				border: 1px solid #666;
				display: block;
				text-align: center;
				line-height: 40px;
				border-radius: 10px;
				background: lightgreen;
				opacity: 1;
			}
			
			input {
				display: none;
			}
			
			span {
				display: block;
				height: 100%;
				width: 100%;
			}
			
			#canvas {
				border: 1px solid #666;
			}
		</style>
		<script type="text/javascript" src="http://www.mamicode.com/js/jquery-3.1.1.js"></script>
	</head>

	<body>
		<label>
              <input type="file" id="file" />
              <span>上传文件</span>
          </label>
		<canvas width="300" height="300" id="canvas"></canvas>

	</body>
	<script>
		$("#file").change(function() {

			var file = new FileReader(); //读取文件2进制

			file.onload = function(e) {

				var base64 = e.target.result;

				var img = new Image(); //创建一个图片对象

				img.onload = function() {

					var canvas = $("#canvas").get(0);

					var ctx = canvas.getContext("2d");

					//使用drawImage显示图片

					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
				}

				//把base64添加到图片上

				img.src = http://www.mamicode.com/base64;>

　　

手机端用来上传用户头像的代码canvas


联系
我们