<!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. Asp.net自定义控件开发任我行（6）-嵌入资源下

    摘要 上一章,我们讲了嵌入.css文件,这一章,我们来讲一下嵌入.js文件,也顺带一个嵌入Image文件 内容 我们前面的几章,一运行,下拉框就显示出来了,但是DropDwonList的下拉框是被隐藏 ...

  2. Boost入门

    [转载网友转载的 不过不知道原作者地址] Boost入门向导 简介:boost是一套开源的.高度可移植的C++模板库.它由C++标准委员发起,且里面很多组件有望成为下一代的C++标准库,其地位将会与S ...

  3. UNet简单案例讲解

    1.创建文件夹: 2.创建一个空物体,添加如下组件: Network Manager(网络管理组件): Network Manager HUD(提供一个UI): 3.创建如下模型,并设置为预制体: 给 ...

  4. CI在nginx环境下去掉url中的index.php

    在nginx环境下CI框架默认URL规则访问不了,出现500错误,如: http://blog.php230.com/index.php/keywords 今天在服务器配置CI框架环境时,去除URL中 ...

  5. BZOJ 1096： [ZJOI2007]仓库建设（DP+斜率优化）

    [ZJOI2007]仓库建设 Description L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品直接堆放在 ...

  6. 【bzoj1041】[HAOI2008]圆上的整点 数论

    题目描述 求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. 输入 只有一个正整数n,n<=2000 000 000 输出 整点个数 样例输入 4 样例输出 4 题解 数 ...

  7. POJ 3111 K Best（01分数规划）

    K Best Time Limit: 8000MS   Memory Limit: 65536K Total Submissions: 9876   Accepted: 2535 Case Time ...

  8. 解决ie8下页面刚出现时候的晃动问题

    出现这个问题的原因的页面的高度超过一屏,这个时候需要在开始的时候给 html,body {overflow:scroll;overflow-x:hidden}; 这样就可以解决这个问题了

  9. Linux服务器之SSH

    SSH 1.ssh是安全的加密协议,用于远程连接linux服务器. 2.ssh默认端口是22,安全协议版本ssh2. 3.ssh服务端主要包含两个服务功能ssh远程连接,sftp服务. 4.linux ...

  10. EasyUI-Accordion

    EasyUI-Accordion Accordion英文翻译就是 手风琴活 或者 可折叠的 参考效果图: 从图中我们其实也可以将这种组件理解为手风琴式的组件. 该组件方便对数据进行分类管理,在有限空间 ...