首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5 canvas实现移动端上传头像拖拽裁剪效果

Posted in HTML / CSS onMarch 14, 2016

本示例使用HTML5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全：

下图为裁剪后的效果：

HTML5 canvas实现移动端上传头像拖拽裁剪效果

html部分：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>上传头像</title>  
  6.     <meta name="renderer" content="webkit">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  8. </head>  
  9. <body>  
  10. <div id="imgCrop" style="width:200px;height:200px;border:1px solid #ccc;overflow:hidden;">  
  11.     <img src="img/test.jpg" alt="">  
  12. </div>  
  13. <input type="file" accept="image/*" />  
  14. <button id="save">保存</button>  
  15. <p>下面为剪切的图片:</p>  
  16. <div id="imgShow"></div>  
  17. </body>  
  18. </html>  

JavaScript部分：

JavaScript Code复制内容到剪贴板
  1. var $imgCrop = $("#imgCrop");   
  2. var $img = $imgCrop.find("img");   
  3. var img = $img[0];   
  4. var width = parseInt($imgCrop.css("width"));   
  5. var height = parseInt($imgCrop.css("height"));   
  6. var startX,startY,scale = 1;   
  7. var x = 0,y = 0;   
  8. $("input").on("change",function(){   
  9.     var fr = new FileReader();   
  10.     var file = this.files[0]   
  11.     //console.log(file);   
  12.     if(!/image\/\w+/.test(file.type)){   
  13.         alert(file.name + "不是图片文件！");   
  14.         return;   
  15.     }   
  16.     console.log(file);   
  17.     $img.removeAttr("height width");   
  18.     fr.readAsDataURL(file);   
  19.   
  20.     fr.onload = function(){   
  21.         img.src = fr.result;   
  22.         var widthInit = img.width;   
  23.         if(img.width>img.height){   
  24.             img.height = height;   
  25.             x = (width - img.width)/2;   
  26.             y = 0;   
  27.         }else{   
  28.             img.width = width;   
  29.             x = 0;   
  30.             y = (height - img.height)/2;   
  31.         }   
  32.         scale = widthInit/img.width;   
  33.         move($img, x, y);   
  34.            
  35.     };   
  36.        
  37. });   
  38.   
  39. img.addEventListener("touchstart",function(e){     
  40.     startX = e.targetTouches[0].pageX;   
  41.     startY = e.targetTouches[0].pageY;   
  42.     
  43.     return;     
  44.   
  45. });    
  46. img.addEventListener("touchmove",function(e){     
  47.     e.preventDefault();     
  48.     e.stopPropagation();     
  49.   
  50.     var changeX = e.changedTouches[0].pageX - startX + x;   
  51.     var changeY = e.changedTouches[0].pageY - startY + y;   
  52.   
  53.     move($(this), changeX, changeY);   
  54.     return;     
  55.      
  56. });    
  57. img.addEventListener("touchend",function(e){      
  58.    var changeX = e.changedTouches[0].pageX - startX + x;   
  59.     var changeY = e.changedTouches[0].pageY - startY + y;   
  60.   
  61.     x = x + e.changedTouches[0].pageX - startX;   
  62.     y = y + e.changedTouches[0].pageY - startY;   
  63.   
  64.     move($(this), changeX, changeY);   
  65.     return;     
  66.      
  67. });     
  68. //确定目标图片的样式   
  69. function move(ele, x, y){   
  70.     ele.css({   
  71.         '-webkit-transform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)',   
  72.         'transform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)'  
  73.     });   
  74. }   
  75.   
  76. $("#save").on("click",function(){   
  77.     var url = imageData($img);   
  78.     console.log(url);   
  79.   
  80.     $("#imgShow").html("<img src="+url+" />");;   
  81. });   
  82. //裁剪图片   
  83. function imageData($img) {   
  84.         var canvas = document.createElement('canvas');   
  85.         var ctx = canvas.getContext('2d');   
  86.         canvas.width = width ;   
  87.         canvas.height = height;   
  88.         ctx.drawImage(img, -x*scale, -y*scale, width*scale, height*scale, 0, 0, width, height);   
  89.         return canvas.toDataURL();   
  90.     }   
  91.   

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/yifengBlog/p/5265598.html

HTML5 canvas实现移动端上传头像拖拽裁剪效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
详解css3 Transition属性（平滑过渡菜单栏案例）
Sep 05 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 #HTML / CSS
HTML5实现多张图片上传功能
Mar 11 #HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 #HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 #HTML / CSS
HTML5的新特性(1)
Mar 03 #HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 #HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 #HTML / CSS
tfx(1) 面向接口(1) Odoo(1) OpenAI baselines(1) OpenGL(1) tkFileDialog(1) BeautifulSoup4(2) exec(1) ElementTree(1) Flask Web(1)
You might like
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
javascript鼠标跟随运动3种效果（眼球效果，苹果菜单，方向跟随）
2016/10/27 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
利用python求相邻数的方法示例
2017/08/18 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python爬取内容存入Excel实例
2019/02/20 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
Python学习之time模块的基本使用
2021/01/17 Python
英国Office鞋店德国网站：在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
2015年加油站站长工作总结
2015/05/27 职场文书
创业不要错过，这4种餐饮新模式
2019/07/18 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android