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

HTML / CSS 相关文章推荐
CSS3使用多列制作瀑布流
May 10 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
PHP实现文件上传与下载
2020/08/28 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python pandas用法最全整理
2019/08/04 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
家长会演讲稿范文
2014/01/10 职场文书
陈欧的广告词
2014/03/18 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL