网站用户头像剪裁上传完整案例
2016-08-23 18:28
537 查看
做为网站前段开发人员来说,用户头像剪裁和上传是一个很常用的功能,一般这个功能涉及到图片的放大,缩小,移动,旋转,和剪裁。下面我们来做一个完整的demo,剪裁后的图片以base64的形式返回,base64怎么上传到后台服务器,很简单,这里不做介绍。图片的操作:手机端操作和其他手机图片应用操作没有任何区别。
PC端:通过鼠标的滚轮是实现图片的放大缩小,长按左键移动鼠标实现图片的移动,双击图片现实图片的旋转。demo下载地址:下载1 下载2
在这个demo中,我们使用Jquery的插件(jquery.photoClip.js)完成。【在我的下一个博客我们分析下photoClip的源码实现】。在使用jquery.photoClip.js,我们还得添加几个依赖插件:iscroll-zoom.js(实现图片的移动)、hammer.js、lrz.all.bundle.js。(这3个js扩展库,在我给出的demo下载地址一并给出)。下面是简单实现的源码:
PC端:通过鼠标的滚轮是实现图片的放大缩小,长按左键移动鼠标实现图片的移动,双击图片现实图片的旋转。demo下载地址:下载1 下载2
在这个demo中,我们使用Jquery的插件(jquery.photoClip.js)完成。【在我的下一个博客我们分析下photoClip的源码实现】。在使用jquery.photoClip.js,我们还得添加几个依赖插件:iscroll-zoom.js(实现图片的移动)、hammer.js、lrz.all.bundle.js。(这3个js扩展库,在我给出的demo下载地址一并给出)。下面是简单实现的源码:
<!doctype html> <html lang="zh-CN" id="index"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no, email=no" /> <meta name="keywords" content=""> <meta name="description" content=""> <title>图片裁剪</title> <style> body { margin: 0; text-align: center; } #clipArea { margin: auto; height: 400px; width: 400px; } #file, #clipBtn { margin: 20px; } #view { margin: 0 auto; width: 200px; height: 200px; } </style> </head> <body ontouchstart=""> <div id="clipArea"></div> <input type="file" id="file"> <button id="clipBtn">截取</button> <div id="view"></div> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script src="js/iscroll-zoom.js"></script> <!--实现图片的移动--> <script src="js/hammer.js"></script> <script src="js/lrz.all.bundle.js"></script> <script src="js/jquery.photoClip.js"></script> <!--实现图片的剪裁--> <script> //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); var clipArea = new bjj.PhotoClip("#clipArea", { size: [260, 260], outputSize: [640, 640], file: "#file", view: "#view", ok: "#clipBtn", loadStart: function() { console.log("照片读取中"); }, loadComplete: function() { console.log("照片读取完成"); }, clipFinish: function(dataURL) { console.log(dataURL); } }); //clipArea.destroy(); </script> </body> </html>如有兴趣可以加我的Q群一起讨论学习js,css,Python爬虫等技术。(QQ群:512245829)
相关文章推荐
- 网站用户头像剪裁上传完整案例
- java通过nginx+apache tomcat接收用户头像图片上传,实现网站动态和静态域名访问图片的详细教程
- 今天网站维护,想上传个app_offline.htm页面一直想不起来这页面的名字·哎~问了半天群里总算有人回答了个offine.htm然后baidu查到了完整的名字·,记录下以后免得又忘记了
- Jquery+ASP.NET 实现开心网上传头像剪裁功能[转]
- 头像上传以及之前预览再以及剪裁——javaweb版本
- 使用HTML5的Canvas画布来剪裁用户头像
- javaWeb-02-cookie案例-显示用户上次访问网站的时间
- 注册模块---用户注册后,上传大图,可以在此大图的剪裁并选择自己合适的位置
- swfupload实现用户文件上传以及头像的截取
- 实现web版用户注册(可以上传头像)
- 实现web版用户注册(可以上传头像)
- Openfire XMPP asmack开发 android客户端上传用户头像
- sharepoint自定义(Customize)用户信息(userprofile)编辑(edit details)页面调用用户头像(select pictures)上传控件
- [网站分析案例] 从淘宝首页焦点图来说用户体验
- 用户注册时上传头像的实现
- 实现web版用户注册(可以上传头像)
- Jquery+ASP.NET 实现开心网上传头像剪裁功能
- 将网站中用户上传的零散小文件存储在MongoDB中的.net解决方案
- 网站部分图片(特别是用户自己上传的图片)不显示怎么回事?
- Android上传头像,图片剪裁,压缩图片