<!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="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>

　　

手机端用来上传用户头像的代码canvas的更多相关文章

  1. 【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像

    纯代码不解释. 在CusotmerControllers中添加上传方法 /// <summary> /// ajax上传用户头像 /// </summary> /// < ...

  2. Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...

  3. JS 手机端多张图片上传

    代码如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="u ...

  4. rails应用使用carrierwave和mini_magick上传用户头像

    1. 在Gemfile添加 gem 'carrierwave' gem 'mini_magick' 执行 bundle install 2. 生成uploader rails generate upl ...

  5. 微信小程序--更换用户头像/上传用户头像/更新用户头像

    changeAvatar:function (){ var that=this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'c ...

  6. 升级IOS8游戏上传自定义头像功能失效的问题

    为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...

  7. Android图片上传（头像裁切+原图原样）

    下面简单铺一下代码: (一)头像裁切.上传服务器(代码) 这里上边的按钮是头像的点击事件,弹出底部的头像选择框,下边的按钮跳到下个页面,进行原图上传. ? 1 2 3 4 5 6 7 8 9 10 1 ...

  8. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  9. 【学习总结】【Java】Git学习-上传本地已有代码到GitHub

    < Git学成归来后的第一次实战 > 上传本地已有代码到GitHub 以之前学了一小半的Java基础教程代码为例 <深坑预警:在GitHub新建仓库那一步,不要勾选readme,不然 ...

随机推荐

  1. IOS开发---菜鸟学习之路--（七）-自定义UITableViewCell

    本篇将介绍如何自定义 UITableViewCell 首先选择新建文件 可以直接使用快捷键 COMMAND+n打开新建页面,然后选Objective-C class 然后选择继承之UITableVie ...

  2. uReplicator实现分析

    MirrorMakerWorker分析 是整个同步机制的主入口,主要组织的逻辑有: 配置数据的传入与处理,ConsumerConfig对象的构建 度量对象的准备,定时上报的度量数据收集线程的定义与启动 ...

  3. Wordpress 作者模板页中的自定义帖子类型分页问题

    <?php // 获取当前页面的页数,函数的参数为 paged $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $ ...

  4. [问题解决]docker启动不了

    问题描述:昨天下午整合了同事的代码,发现docker启动好后,docker ps查看不到,docker ps -a发现docker容器没有启动. 尝试多次启动发现都是启动不了. 经过搜索发现 http ...

  5. asp.net允许跨域访问

    C# ASP.NET MVC 配置允许跨域访问 在web.config文件中的 system.webServer 节点下 增加如下配置 <httpProtocol> <customH ...

  6. Quotes

    A man's gotta do what a man's gotta do.

  7. 【一个比较bug free的二分写法】

    lower_bound: [l, r)区间内大于等于val的第一个位置 int lower_bound(int l, int r, int val){ while(l < r){ ); if(a ...

  8. 【WC笔记】字符串前沿算法

    Q1 对于给定的字符串,求本质不同的子串数. A1 在加入 $s_l$ 时,考虑 $s[l:r]$ 的上一次出现是 $s[k:k+r-l]$,那么应该在线段树上 $[r,k+r-l]$ 这个区间 $+ ...

  9. Python之时间：calender模块（日历）

    import calendar 1.星期 (1)calendar.day_name 星期的全称 print calendar.day_name for i in calendar.day_name: ...

  10. COGS 2485. [HZOI 2016]从零开始的序列

    2485. [HZOI 2016]从零开始的序列 ★★   输入文件:sky_seq.in   输出文件:sky_seq.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] ...