mui开发app之cropper裁剪后上传头像的实现
Posted devil
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mui开发app之cropper裁剪后上传头像的实现相关的知识，希望对你有一定的参考价值。
应广大读者建议，已经将该项目源码提交到地址：
https://github.com/devilyouwei/dashen
在大多数app项目中，都需要对用户头像的上传，之前做web开发的时候，我主要是通过input type=file的标签实现的，上传后，使用php对图片进行裁剪，这种方式比较传统简单。
此次app开发中需要做到用户选择本地相册或者进行拍照->对照片进行裁剪->最后同时更新本地头像和服务器端的图片。（app常见套路）
我将要结合：mui，cropper，jquery开发！
实现思路：
1.用户点击头像，打开actionsheet
2.选择图片或者拍照后返回的图片绝对地址传入单独的裁剪页面，跳转到裁剪页面
3.裁剪页面裁剪后选择确认则将裁减后图片保存到localstorage中（其实是把整个图片保存到本地数据库中）
4.触发一个更新上一页头像的事件，返回上一页
5.看到图片已经更改
6.保存，图片上传到服务器（json）
7.服务器将图片的base64保存到数据库（text类型），实现数据库保存图片，当然可以使用后端语言的方法还原为图片后保存在文件系统中（建议：小图可保存在数据库中，大图保存在文件系统）
实现工具和插件，直接看代码：
js
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script src="../js/mui.min.js"></script> <script type="text/javascript" src="../js/exif.js"></script> <script src="../js/cropper.min.js"></script> <script src="../js/fastclick.js"></script>
css
<link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/iconfont.css" rel="stylesheet" /> <link href="../css/cropper.css" rel="stylesheet" />
这里我们主要使用了一个cropper.js的插件，自行百度下载，目前比较好用的插件只有这个，大神的话自己写一个吧
注意cropper必须使用jquery，而jquery比较臃肿，在其他mui中尽量不要引入，我也是迫不得已，使用jq并非我本意
fastclcik.js是加速点击触发，一般在手机端开发其实用不到，因为一般使用tap，这里我加了进去，似乎对裁剪图片时手势操作有帮助，(+_+)?，不加也没有影响，测试过
iconfont是按钮图标
exif.js是可以检测图片拍摄时采用横向还是纵向
这几个请自行百度下载！
接下来可以开发了：
一共两个页面，
headinfo.html——编辑页面
cropper.html——裁剪页面
headinfo.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>我的资料</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/style.css" rel="stylesheet" /> <style type="text/css"> .head { height: 40px; } #head { line-height: 40px; } .head-img { width: 40px; height: 40px; } #head-img1 { position: absolute; bottom: 10px; right: 40px; width: 40px; height: 40px; } .mui-fullscreen { position: fixed; z-index: 20; background-color: #000; } .mui-content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <button type="button" id="finish" class="mui-left mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span>完成 </button> <h1 class="mui-title">头信息</h1> </header> <div class="mui-content"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a id="head" class="mui-navigate-right">个人头像 <span class="mui-pull-right head"> <img class="head-img mui-action-preview" id="head-img1" src=""/> </span> </a> </li> </ul> <div class="mui-input-row mui-margin-vertical"> <h5 class="mui-margin-horizontal-xs">个人签名：</h5> <input class="mui-padding-lg" id="signature" type="text" placeholder="个人签名" /> </div> </div> <script src="../js/mui.min.js"></script> <script src="../js/app.js"></script> <script type="text/javascript"> (function($) { mui.init({ swipeBack: true }); $.plusReady(function() { //初始化头像，和预览图 setTimeout(function() { defaultInfo(); setTimeout(function() { initImgPreview(); }, 200); }, 0); //弹出菜单 mui(".mui-table-view-cell").on("tap", "#head", function(e) { if(mui.os.plus) { var a = [{ title: "拍照" }, { title: "从手机相册选择" }]; plus.nativeUI.actionSheet({ title: "修改头像", cancel: "取消", buttons: a }, function(b) { switch(b.index) { case 0: break; case 1: getImage(); break; case 2: galleryImg(); break; default: break } }) } }); //完成并返回 document.getElementById("finish").addEventListener("tap", function() { var newSign = document.getElementById("signature").value; var oldSign = app.getUserInfo().signature; if(oldSign === newSign) $.back(); else { app.request("User", "updateSignature", { \'signature\': newSign }, function(res) { if(res.login == 0) { mui.toast(res.info); app.clearToken(); app.toLogin(); return false; } if(res.status == 1) { app.setSignature(newSign); mui.toast(res.info); var view = plus.webview.getWebviewById("index"); $.fire(view, "updateHeadInfo"); $.back(); } else { mui.toast(res.info); } }); } }); }); //拍照 function getImage() { var c = plus.camera.getCamera(); c.captureImage(function(e) { //存储到本地 plus.io.resolveLocalFileSystemURL(e, function(entry) { cutImage(entry.toLocalURL()); }, function(e) { console.log("读取拍照文件错误：" + e.message); }); }, function(s) { console.log("error" + s); }, { filename: "_doc/head.jpg" }) } //相册 function galleryImg() { plus.gallery.pick(function(a) { plus.io.resolveLocalFileSystemURL(a, function(entry) { //entry为图片原目录（相册）的句柄 cutImage(entry.toLocalURL()); }, function(e) { console.log("读取图片错误：" + e.message); }); }, function(a) {}, { filter: "image" }) }; //设置默认头像 function defaultInfo() { var my_icon = app.getHeadImg(); //头像 var signature = app.getUserInfo().signature; //签名 if(my_icon && my_icon != "") { document.getElementById("head-img1").src = my_icon; } else { document.getElementById("head-img1").src = \'../images/my_icon.jpg\'; } if(signature && signature != "") { document.getElementById("signature").value = signature; } else { document.getElementById("signature").value = ""; } } //预览图像 document.getElementById("head-img1").addEventListener(\'tap\', function(e) { e.stopPropagation(); //阻止冒泡 }); function initImgPreview() { var imgs = document.querySelectorAll("img.mui-action-preview"); imgs = mui.slice.call(imgs); if(imgs && imgs.length > 0) { var slider = document.createElement("div"); slider.setAttribute("id", "__mui-imageview__"); slider.classList.add("mui-slider"); slider.classList.add("mui-fullscreen"); slider.style.display = "none"; slider.addEventListener("tap", function() { slider.style.display = "none"; }); slider.addEventListener("touchmove", function(event) { event.preventDefault(); }) var slider_group = document.createElement("div"); slider_group.setAttribute("id", "__mui-imageview__group"); slider_group.classList.add("mui-slider-group"); imgs.forEach(function(value, index, array) { //给图片添加点击事件，触发预览显示； value.addEventListener(\'tap\'基于vue-cropper的上传裁剪后的头像基于cropper和sweetalert的简单图片/头像裁剪上传