mui开发app之cropper裁剪后上传头像的实现

作者：教程字体：[增加减小] 来源：互联网时间：2017-05-31

本文主要包含cropper,cropper.js,image cropper,jquery cropper,james cropper等相关知识,教程希望在学习及工作中可以帮助到您

"); </div> 在大多数app项目中，都需要对用户头像的上传，之前做web开发的时候，我主要是通过input type=file的标签实现的，上传后，使用php对图片进行裁剪，这种方式比较传统简单。

此次app开发中我需要做到用户选择本地相册或者进行拍照，对照片进行裁剪，最后更新本地头像和服务器端的图片

我将要结合mui，cropper，jquery开发

实现思路：

1.用户点击头像，打开actionsheet

2.选择图片或者拍照后返回的图片绝对地址传入单独的裁剪页面，跳转到裁剪页面

3.裁剪页面裁剪后选择确认则将裁减后图片（注意：canvas使用base64，新图片不存在url）保存到localstorage中（其实是把整个图片保存到本地数据库中）

4.触发一个更新上一页头像的事件，返回上一页

5.看到图片已经更改

6.保存，上传到服务器（json）

实现工具和插件，直接看代码：

<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是加速点击触发，一般在手机端开发其实用不到，因为一般使用tap，这里我加了进去，似乎对裁剪图片时手势操作有帮助，(+_+)?，不加也没有影响，测试过

iconfont是按钮图标

exif是可以检测图片拍摄时采用横向还是纵向

接下来可以开发了：

一共两个页面，

headinfo.html——编辑页面

cropper.html——裁剪页面

headinfo.html

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <

您可能想查找下面的文章:

mui开发app之cropper裁剪后上传头像的实现

2017-05-31mui dtpicker 时间的设置
2017-05-31苹果开发者帐号申请以及IOS安装包打包
2017-05-31Application loader上次报90167错误
2017-05-31mui back 返回刷新页面方法
2017-05-31深入理解高度。获取屏幕、webview、软键盘高度
2017-05-31真机运行、手机运行、真机联调常见问题
2017-05-31提升HTML5的性能体验系列之一避免切页白屏
2017-05-31iOS平台-Native.js获取包名
2017-05-31Mui3.2.0中ajax设置headers为{'Content-Type': 'application/json'}发起post请求，后端接收不到数据的解决方案（php为例）
2017-05-31Hbuilder MUI 分享插件开发指南

mui开发app之cropper裁剪后上传头像的实现

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容