<!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. SPFA - Luogu 3385 【模板】负环

    [模板]负环 描述 找负环 输入 第一行一个正整数T表示数据组数,对于每组数据: 第一行两个正整数N M,表示图有N个顶点,M条边 接下来M行,每行三个整数a b w,表示a->b有一条权值为w ...

  2. python - 接口自动化测试 - RunTest - 测试用例加载执行/测试报告生成

    # -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: run_test.py @ide: PyCharm Com ...

  3. Django中前端界面实现级联查询

    Django前端界面实现级联查询 一.前端界面中 <span scope="col" colspan="6"> 院系:<select id=& ...

  4. 非旋Treap总结 ： 快过Splay 好用过传统Treap

    非旋$Treap$ 其高级名字叫$Fhq\ Treap$,既然叫$Treap$,它一定满足了$Treap$的性质(虽然可能来看这篇的人一定知道$Treap$,但我还是多说几句:$Fhp\ Treap$ ...

  5. POJ 2836：Rectangular Covering（状态压缩DP）

    题目大意:在一个平面内有若干个点,要求用一些矩形覆盖它们,一个矩形至少覆盖两个点,可以相互重叠,求矩形最小总面积. 分析: 数据很小,很容易想到状压DP,我们把点是否被覆盖用0,1表示然后放在一起得到 ...

  6. 【bzoj2431】[HAOI2009]逆序对数列 dp

    题目描述 对于一个数列{ai},如果有i<j且ai>aj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的 数列,可以很容易求出有多少个逆序对数.那么逆序对数为k的这 ...

  7. 基于Linux的嵌入式文件系统构建与设计

    摘 要:Linux是当今一种十分流行的嵌入式操作系统.由于其具有执行效率高.占用空间小.实时性能优良和可扩展性强等特点,因此被广泛应用于工业控制领域.该文对其文件系统进行了简单的介绍,结合嵌入式系统应 ...

  8. One-Way Streets (oneway)

    One-Way Streets (oneway) 题目描述 Once upon a time there was a country with nn cities and mm bidirection ...

  9. MFC点击控件拖动窗口

    void CMouseClickDlg::OnLButtonDown(UINT nFlags, CPoint point) { CDialogEx::OnLButtonDown(nFlags, poi ...

  10. vue2搭建简易spa

    使用vue-cli来配置webpack,webpack是一个打包工具,使程序模块化 全局安装vue-cli: npm install -g vue-cli 安装好后,使用vue-cli脚手架配置web ...