canvas实现手机端用来上传用户头像的代码
作者:Yokoぃ 发布时间:2023-09-16 02:30:54
标签:canvas,上传头像
废话不多说了直接给大家介绍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 src="js/jquery-1.11.3.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实现手机端用来上传用户头像的代码,希望对大家有所帮助
来源:http://www.cnblogs.com/Yoko-815/archive/2016/10/20/5981152.html


猜你喜欢
- 1.mysql复制概念 指将主数据库的DDL和DML操作通过二进制日志传到复制服务器上,然后在复制服务器上将这些日志文件重新执行
- __import__() 函数用于动态加载类和函数 。如果一个模块经常变化就可以使用 __import__() 来动态载入。语法__impo
- 通配符:通配符描述示例%包含零个或更多字符的任意字符串。WHERE title LIKE '%computer%' 将查找处
- 微信小程序实现图片轮播及文件上传刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传。图片轮播:index.
- 前言数据处理过程中,经常会遇到数据有缺失值的情况,本文介绍如何用Pandas处理数据中的缺失值。一、什么是缺失值对数据而言,缺失值分为两种,
- golang中,一般strcut包含 interface类型后,struct类型都需要实现 interface导出的接口,从而成为相应的 i
- 目录获取二维码部分获取关注状态值解析微信服务器报文大致思路:调用微信带参数二维码接口生成二维码,前端显示二维码同时于服务器进行长链接通信,监
- 本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码,供大家参考,具体内容如下效果如下:1.vue
- 以一种有意义的方式组织数据可能是一项挑战。有时你需要的可能是一个简单的排序,但是通常你需要做更多,你需要分组来进行分析和统计。幸运的是,SQ
- 本文实例讲述了Java开发之Spring连接数据库方法。分享给大家供大家参考,具体如下:接口:package cn.com.service;
- hmac模块hmac模块用于生成HMAC码。这个HMAC码可以用于验证消息的完整性,其原理也很简单,就是一种加入了密钥的消息摘要,相比起MA
- 前言Python 开发者可能都听说过鸭子类型和猴子补丁这两个词,即使没听过,也大概率写过相关的代码,只不过并不了解其背后的技术要点是这两个词
- 最近,Facebook设计团队在其位于加州帕罗奥多市(Palo Alto)的总部,提到了他们为2.5亿用户设计的原理和方法。 他们特别强调了
- 特地查看了下手册,关于php magic quotes,常见的几个设置如下,magic_quotes_gpc,magic_quo
- 一、django的模板:在settings.py的文件中可以看到并设置这个模板。1.直接映射:通过建立的文件夹(templates)和文件(
- 一、特效预览处理前处理后细节放大后二、程序原理1.输入你想隐藏的文字2.然后写到另一张跟照片同等大小的空白纸张上3.将相同位置的文字的颜色用
- 1 前置阅读在阅读本文章之前,你可以先阅读:什么是依赖注入2 简介Autofac与C#语言的结合非常紧密,并学习它非常的简单,也是.NET领
- 在学习和使用各种数据库的过程中,我们常常会遇到聚族索引、非聚族索引、组合索引的概念,这些索引对我们使用数据库,特别是查询的速度的
- testify在团队里推行单元测试的时候,有一个反对的意见是:写单元测试耗时太多。且不论这个意见对错,单元测试确实不应该太费时间。这时候,一
- 网站,(100-1)%的内容是导航1、Jesse James Garrett 在《用户体验要素》一书中提到了多重导航系统:全局导航、局部导航