您现在的位置是：网站首页> 编程资料编程资料

HTML5 canvas实现移动端上传头像拖拽裁剪效果html5拖拽排序多图片上传插件特效源码HTML5 拖拽批量上传文件的示例代码html5实现多图片预览上传及点击可拖拽控件html5使用Drag事件编辑器拖拽上传图片的示例代码HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）结合html5+nodejs+express实现拖拽上传的功能HTML5拖拽文件到浏览器并实现文件上传下载功能代码html5 拖拽上传图片实例演示HTML5拖拽文件上传的示例代码

2023-10-14 436人已围观

简介 这篇文章主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

下图为裁剪后的效果：

html部分：

XML/HTML Code复制内容到剪贴板
  1. >  
  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,

    上一篇：html5 canvas移动浏览器上实现图片压缩上传使用canvas压缩图片上传的方法示例浅析图片上传及canvas压缩的流程

    下一篇：HTML5 Canvas入门学习教程HTML5中的nav标签学习笔记HTML5学习笔记之html5与传统html区别 HTML 5零距离接触:学习快速入门 中文pdf扫描版[1MB]HTML5学习心得总结(推荐)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网