话不多说,直接进入正题。
在 中导入 cropper.css 样式表:
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
在的结束标签之前,按顺序导入如下的 js 脚本:
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
在卡片的 layui-card-body 主体区域中,定义如下的 HTML 结构:
<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1">
<!-- 图片裁剪区域 -->
<div class="cropper-box">
<!-- 这个 img 标签很重要,将来会把它初始化为裁剪区域 -->
<img id="image" src="/assets/images/sample.jpg" />
</div>
<!-- 图片的预览区域 -->
<div class="preview-box">
<div>
<!-- 宽高为 100px 的预览区域 -->
<div class="img-preview w100"></div>
<p class="size">100 x 100</p>
</div>
<div>
<!-- 宽高为 50px 的预览区域 -->
<div class="img-preview w50"></div>
<p class="size">50 x 50</p>
</div>
</div>
</div
<!-- 第二行的按钮区域 -->
<div class="row2">
<button type="button" class="layui-btn">上传</button>
<button type="button" class="layui-btn layui-btn-danger">确定</button>
</div>
美化的样式:
/* 设置主体区域的宽度 */
.layui-card-body {
width: 500px;
}
/* 设置按钮行的样式 */
.row2 {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
/* 设置裁剪区域的样式 */
.cropper-box {
width: 350px;
height: 350px;
background-color: cyan;
overflow: hidden;
}
/* 设置第一个预览区域的样式 */
.w100 {
width: 100px;
height: 100px;
background-color: gray;
}
/* 设置第二个预览区域的样式 */
.w50 {
width: 50px;
height: 50px;
background-color: gray;
margin-top: 50px;
}
/* 设置预览区域下方文本的样式 */
.size {
font-size: 12px;
color: gray;
text-align: center;
}
/* 设置图片行的样式 */
.row1 {
display: flex;
}
/* 设置 preview-box 区域的的样式 */
.preview-box {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
/* 设置 img-preview 区域的样式 */
.img-preview {
overflow: hidden;
border-radius: 50%;
}
实现基本裁剪效果
- 获取裁剪区域的 DOM 元素
- 配置选项: 纵横比(aspectRatio)、指定预览区域
- 创建裁剪区域
// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
// 纵横比
aspectRatio: 1,
// 指定预览区域
preview: '.img-preview'
}
// 1.3 创建裁剪区域![在这里插入图片描述](https://img-blog.csdnimg.cn/20200702200350594.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9iZWltaQ==,size_16,color_FFFFFF,t_70)
$image.cropper(options)
点击弹出文件选择框
<input type="file" id="file" accept="image/png,image/jpeg" />
默认的文件选择框样式比较丑,所以我们定义这个结构,让其隐藏,给文件选择框指定可以上传的文件类型
下面定义一个按钮,文本是 上传,一旦用户点击按钮,我们手动触发 文件选择框的点击事件:
$('#btnChooseImage').on('click', function() {
$('#file').click()
})
- 给文件选择框绑定 change 事件
- 用户选择了文件就会触发这个事件,通过 e.target.files 获取用户选择文件列表
- 通过索引0拿到用户选择的文件
- 将文件转化为路径
- 利用 $image 重新初始化裁剪区域
// 为文件选择框绑定 change 事件
$('#file').on('change', function(e) {
// 获取用户选择的文件
var filelist = e.target.files
if (filelist.length === 0) {
return layer.msg('请选择照片!')
}
// 1. 拿到用户选择的文件
var file = e.target.files[0]
// 2. 将文件,转化为路径
var imgURL = URL.createObjectURL(file)
// 3. 重新初始化裁剪区域
$image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', imgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域
})
将裁剪后的头像上传到服务器
- 为确定按钮,绑定点击事件
- 要拿到用户裁剪之后的头像
- 创建一个 Canvas 画布,将 Canvas 画布上的内容,转化为 base64 格式的字符串
var dataURL = $image
.cropper('getCroppedCanvas', {
// 创建一个 Canvas 画布
width: 100,
height: 100
})
.toDataURL('image/png')
$.ajax({
method: 'POST',
url: '/my/update/avatar',
data: {
avatar: dataURL
},
success: function(res) {
if (res.status !== 0) {
return layer.msg('更换头像失败!')
}
layer.msg('更换头像成功!')
window.parent.getUserInfo()
}
})
什么是base64格式的图片
base64格式一段字符串,其实base64格式的图片,就是利用一段字符串来描述这张图片
好处:能够避免一些额外的图片请求
缺点:体积会比原来图片要大 30% 左右
使用场景:不适用大图片,一些小图片比较适合使用