程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > html5 >

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

  发布时间：2016-03-14 11:00:19   作者：佚名   我要评论
这篇文章主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

本示例使用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拖拽排序多图片上传插件特效源码

    html5实现多图多文件上传与拖拽上传，拖拽排序功能。支持上传图片替换、图片删除、预览等功能。本段代码可以在各个网页使用，有需要的朋友可以直接下载使用
    2018-04-02

  • HTML5 拖拽批量上传文件的示例代码

    这篇文章主要介绍了HTML5 拖拽批量上传文件的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-28

  • html5实现多图片预览上传及点击可拖拽控件

    这篇文章主要介绍了html5实现多图片预览上传及点击可拖拽控件的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-15

  • html5使用Drag事件编辑器拖拽上传图片的示例代码

    这篇文章主要介绍了html5使用Drag事件编辑器拖拽上传图片的示例代码的相关资料,需要的朋友可以参考下
    2017-08-22

  • HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）

    本篇文章主要介绍了HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量），现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放实现上传提供
    2017-01-05

  • 结合html5+nodejs+express实现拖拽上传的功能

    html5开始支持拖拽上传的需要的api。nodejs也是一个最近越来越流行的技术，在nodejs开发中，最常用的开发框架之一是expess，它是一个类似mvc模式的框架。
    2014-08-08

  • HTML5拖拽文件到浏览器并实现文件上传下载功能代码

    使用HTML5拖拽文件到浏览器并实现文件上传下载，html5的功能是越来越强大了，下面与大家分享下具体的实现代码，感兴趣的朋友可以参考下哈
    2013-06-06

  • html5 拖拽上传图片实例演示

    拖拽上传最重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台，然后做对应的处理，比如压缩啊，裁剪啊云云，感兴趣的朋友可以参考下哈，希望
    2013-04-01

  • HTML5拖拽文件上传的示例代码

    这篇文章主要介绍了HTML5拖拽文件上传的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
    2021-03-04

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com