<!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 ...