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实现手机端用来上传用户头像的代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 移动端利用H5实现压缩图片上传功能

    此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法. 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的 实现.根据查看caniuse,本demo里使用到的FileRea

  • vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期

  • H5移动端图片压缩上传开发流程

    H5移动端图片压缩上传开发流程

    H5活动已十分普遍,其中一种形式是让用户上传图片进行参与.移动端上传图片,用户一般都是上传手机相册中的图片,而现在手机的拍摄质量越来越高,一般单张照片的尺寸都在3M左右.若直接上传,十分耗流量,并且体验效果也不佳.因此需要在上传之前,先进行本地压缩. 接下来总结在h5活动的开发中图片压缩上传的功能,并标记其中踩过的几个坑,分享给大家: 小白区必看 对于移动端图片上传毫无概念的话,需要补充FileReader.Blob.FormData三个概念. 1.FileReader 定义 使用FileRea

  • Angular下H5上传图片的方法（可多张上传）

    最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,不多说,直接上代码 angular.module('myApp') .directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $tim

  • 利用H5特性FormData实现不刷新文件上传

    利用H5特性FormData实现不刷新文件上传

    之前朋友说的不刷新上传文件.最暴力的解决方案就是上网上搜各种JS库,附带多图上传,预览,甚至是图片处理等特技.那么如果不接触第三方的库,可不可以利用ajax来做.就这个问题,有人给出的解决方案是借助iframe,这里就不赘述了.但是Html5是个好东西,他提供了FormData,FormData可以帮助我们拼凑参数,乃至文件资源.这样,我们就可以轻松用$.ajax不刷新上传.当然也不需要iframe. 代码 下列是前端部分. <!DOCTYLE html> <meta charset=u

  • js生成缩略图后上传并利用canvas重绘

    一般在处理图片上传时,通常的逻辑都是将源图片上传到服务器端,再由服务器端的语言进行缩放大小的操作. 此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作. //以下为源代码 复制代码 代码如下: function drawCanvasImage(obj,width, callback){ var $canvas = $('<canvas></canv

  • 使用canvas实现仿新浪微博头像截取上传功能

    使用canvas实现仿新浪微博头像截取上传功能

    最近看到微博头像上传功能很感兴趣,于是就使用canvas写了一个,本文写的不好还请见谅.本程序目前在谷歌浏览器和火狐浏览器测试可用,ie浏览器无法支持. 因为ie的安全机制不允许img使用本地路径,所以若想ie支持本程序,必须先将图片上传,然后给img对象上传后的图片地址. 我在这里没写,是因为暂时没写上传功能的后端代码,并且还不确定有没有更好的解决办法. 如下是新浪的 如下是我做的截取部分 代码: var canvas = document.getElementById('canvas'),

  • 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-alig

  • H5手机端多文件上传预览插件

    H5手机端多文件上传预览插件

    基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var para = { multiple: true, filebutton: ".filePicker", uploadButton: null, url: "/home/MUploadImg", filebase: "mfile",//mvc后台需要对应的

  • 详解Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改头像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="d

  • wap手机端解决返回上一页的js实例

    如下所示: <input id="hd_referrer" type="hidden" /> <a href="javascript:void(0)" onclick="referurl(); ">返回 </a> <script> $(function () { $("#hd_referrer").val(document.referrer); }); fun

  • AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

    AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

    1.引言 2.实现代码 2.1.服务器端代码 2.1.1. 文件上传状态类(FileUploadStatus) 2.1.2. 文件上传状态侦听类(FileUploadListener) 2.1.3. 后台服务类(BackGroundService) 2.1.4. 文件上传状态控制类(BeanControler) 2.2. 客户端代码 2.2.1. AjaxWrapper.js 2.2.2. fileUpload.html 2.2.3. result.jsp 2.2.4. fileUpload.c

  • vue中用H5实现文件上传的方法实例代码

    整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def

  • hadoop上传文件功能实例代码

    hadoop上传文件功能实例代码

    hdfs上的文件是手动执行命令从本地linux上传至hdfs的.在真实的运行环境中,我们不可能每次手动执行命令上传的,这样太过繁琐.那么,我们可以使用hdfs提供的Java api实现文件上传至hdfs,或者直接从ftp上传至hdfs. 然而,需要说明一点,之前笔者是要运行MR,都需要每次手动执行yarn jar,在实际的环境中也不可能每次手动执行.像我们公司是使用了索答的调度平台/任务监控平台,可以定时的以工作流执行我们的程序,包括普通java程序和MR.其实,这个调度平台就是使用了quart

  • 微信语音上传 下载功能实例代码

    假如现在有一个按钮 <div class="inp_btn voice_btn active" id="record"> 按住 说话 </div> 下面就是调用微信jssdk的方法 var recorder; var btnRecord = $('#record'); var startTime = 0; var recordTimer = 300; // 发语音 $.ajax({ url: 'url请求需要微信的一些东西 下面success

  • Python上传package到Pypi(代码简单)

    废话不多说了,直接给大家贴代码了. 编写setup.py后 $ python setup.py register $ python setup.py sdist upload 以上是针对Python上传package到Pypi(代码简单)的全部内容,本文写的不好,还请大家多多指教,在此小编祝大家新年快乐.

  • jquery之ajaxfileupload异步上传插件(附工程代码)

    点我下载工程代码 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6 服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1.jar 编写文

随机推荐