手机端用来上传用户头像的代码canvas
<!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的更多相关文章
- 【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像
纯代码不解释. 在CusotmerControllers中添加上传方法 /// <summary> /// ajax上传用户头像 /// </summary> /// < ...
- Vue+axios+Node+express实现文件上传(用户头像上传)
Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...
- JS 手机端多张图片上传
代码如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="u ...
- rails应用使用carrierwave和mini_magick上传用户头像
1. 在Gemfile添加 gem 'carrierwave' gem 'mini_magick' 执行 bundle install 2. 生成uploader rails generate upl ...
- 微信小程序--更换用户头像/上传用户头像/更新用户头像
changeAvatar:function (){ var that=this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'c ...
- 升级IOS8游戏上传自定义头像功能失效的问题
为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...
- Android图片上传（头像裁切+原图原样）
下面简单铺一下代码: (一)头像裁切.上传服务器(代码) 这里上边的按钮是头像的点击事件,弹出底部的头像选择框,下边的按钮跳到下个页面,进行原图上传. ? 1 2 3 4 5 6 7 8 9 10 1 ...
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- 【学习总结】【Java】Git学习-上传本地已有代码到GitHub
< Git学成归来后的第一次实战 > 上传本地已有代码到GitHub 以之前学了一小半的Java基础教程代码为例 <深坑预警:在GitHub新建仓库那一步,不要勾选readme,不然 ...
随机推荐
- 【Gas Station】cpp
题目: There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. ...
- 【SCOI 2010】传送带
为了方便,我们不妨设$\rm P \lt Q,R$ 我们发现,有$\rm E$点在$\rm AB$上,$\rm F$点在$\rm CD$上,最优解一定是$\rm AE\rightarrow EF\ri ...
- plsql 编程基础
分支 declare --声明变量 a ); b ); c ); begin --开始 a := '小明'; dbms_output.put_line(a); b :; c :; if b > ...
- Python+Selenium练习篇之12-获取浏览器的版本号
本文介绍,如何通过webdriver方法获取浏览器的版本号.看起来这个功能很鸡肋,不管怎么说,还是学习下,特别是在发送自动化测试报告的时候,还是可以通过这个方法来告诉别人,执行过的脚本是通过什么浏览器 ...
- Python中@property和@classmethod和@staticmethod
前戏 首先,先要弄清楚一个类里面的,各个组成部分都应该怎么称呼. - 注:可能叫法会不太一样. 关于@property 顾名思义:它的意思为‘属性’. 作用: 1:使用它你将会把类方法,变为类属性.并 ...
- Recommender System
推荐系统我们都很熟悉,淘宝推荐用户可能感兴趣的产品,搜索引擎帮助用户发现可能感兴趣的东西,这些都是推荐系统的内容.接下来讲述一个电影推荐的项目. Netflix 电影推荐系统 这个项目是使用的Netf ...
- iOS----------设计模式的六大设计原则------>开放-关闭原则(OCP,Open-Close Principle)
定义 一个软件实体(如类.模块.函数)应当对扩展开放,对修改关闭. 定义解读 在项目开发的时候,都不能指望需求是确定不变化的,大部分情况下,需求是变化的.那么如何应对需求变化的情况?这就是开放-关闭原 ...
- elasticsearch备份与恢复4_使用ES-Hadoop将ES中的索引数据写入HDFS中
背景知识见链接:elasticsearch备份与恢复3_使用ES-Hadoop将HDFS数据写入Elasticsearch中 项目参考<Elasticsearch集成Hadoop最佳实践> ...
- 事务ACID特性，其中I代表隔离性(Isolation)。
事务ACID特性,其中I代表隔离性(Isolation). 什么是事务的隔离性? 隔离性是指,多个用户的并发事务访问同一个数据库时,一个用户的事务不应该被其他用户的事务干扰,多个并发事务之间要相互隔离 ...
- NOIP2017赛前模拟10月30日总结
题目1: n个人参赛(n<=100000),每个人有一个权值··已知两个人权值绝对值之差小于等于K时,两个人都有可能赢,若大于则权值大的人赢···比赛为淘汰制,进行n-1轮·问最后可能赢的人有多 ...