zoukankan      html  css  js  c++  java
  • 手机端用来上传用户头像的代码canvas

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    
    		<style>
    			label {
    				height: 40px;
    				 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%;
    				 100%;
    			}
    			
    			#canvas {
    				border: 1px solid #666;
    			}
    		</style>
    		<script type="text/javascript" src="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 = base64;
    
    			};
    
    			file.readAsDataURL(this.files[0]);
    		});
    	</script>
    
    </html>
    

      

  • 相关阅读:
    oracle常用命令(比较常见好用)
    vim编辑器详解
    对话框和打印控件
    winform弹出唯一的窗体
    ListView
    菜单栏和布局
    窗体属性和公共控件
    ASPCMS和WPF
    MVC
    正则表达式
  • 原文地址:https://www.cnblogs.com/libin-1/p/5983036.html
Copyright © 2011-2022 走看看