搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > HTML5 > 正文

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

发布时间：2022-12-31 12:05:55 来源：互联网
.
又是一场大雪过后，天空像海一样蔚蓝，甚至比海更加晶莹剔透。千峰万岭，极目望去，尽是白色，闪耀着一片连接不断的银光。山顶积雪未融，如白银宫网。

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

下图为裁剪后的效果：

html部分：

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

JavaScript部分：

JavaScript Code复制内容到剪贴板
  1. var$imgCrop=$("#imgCrop");
  2. var$img=$imgCrop.find("img");
  3. varimg=$img[0];
  4. varwidth=parseInt($imgCrop.css("width"));
  5. varheight=parseInt($imgCrop.css("height"));
  6. varstartX,startY,scale=1;
  7. varx=0,y=0;
  8. $("input").on("change",function(){
  9. varfr=newFileReader();
  10. varfile=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("heightwidth");
  18. fr.readAsDataURL(file);
  20. fr.onload=function(){
  21. img.src=fr.result;
  22. varwidthInit=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);
  35. };
  37. });
  39. img.addEventListener("touchstart",function(e){
  40. startX=e.targetTouches[0].pageX;
  41. startY=e.targetTouches[0].pageY;
  43. return;
  45. });
  46. img.addEventListener("touchmove",function(e){
  47. e.preventDefault();
  48. e.stopPropagation();
  50. varchangeX=e.changedTouches[0].pageX-startX+x;
  51. varchangeY=e.changedTouches[0].pageY-startY+y;
  53. move($(this),changeX,changeY);
  54. return;
  56. });
  57. img.addEventListener("touchend",function(e){
  58. varchangeX=e.changedTouches[0].pageX-startX+x;
  59. varchangeY=e.changedTouches[0].pageY-startY+y;
  61. x=x+e.changedTouches[0].pageX-startX;
  62. y=y+e.changedTouches[0].pageY-startY;
  64. move($(this),changeX,changeY);
  65. return;
  67. });
  68. //确定目标图片的样式
  69. functionmove(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. }
  76. $("#save").on("click",function(){
  77. varurl=imageData($img);
  78. console.log(url);
  80. $("#imgShow").html("<imgsrc="+url+"/>");;
  81. });
  82. //裁剪图片
  83. functionimageData($img){
  84. varcanvas=document.createElement('canvas');
  85. varctx=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. returncanvas.toDataURL();
  90. }

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

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

以下您可能有感兴趣的文章:
标签： 拖拽
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图