目录
一、导入外界样式结构
1、在 <head> 中导入 cropper.css 样式表：
// 导入layui中的css样式
<link rel="stylesheet" href="./layui/css/layui.css">
// 导入cropper的css样式
<link rel="stylesheet" href="./cropper/cropper.css">
// 导入自己的css样式
<link rel="stylesheet" href="./index.css">2、在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：
// 导入layui中的JS脚本
<script src="./layui/layui.all.js"></script>、
// 导入jquery.js脚本
<script src="./cropper/jquery.js"></script>
// 导入cropper.js脚本
<script src="./cropper/Cropper.js"></script>
<script src="./cropper/jquery-cropper.js"></script>
// 导入拼接URL地址的JS脚本
<script src="./baseAPI.js"></script>
// 导入自己的JS脚本
<script src="./index.js"></script>二、编写HTML结构
结构可以更改，但是类名最好一样。这里是引用了layui组件库的结构样式，做了一个卡片结构
<div class="layui-card">
<div class="layui-card-header">
<!-- 头像区域 -->
<div class="userinfo">
<img src="" class="layui-nav-img">
</div>
</div>
<div class="layui-card-body">
<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1">
<!-- 图片裁剪区域 -->
<div class="cropper-box">
<!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
<img id="image" src="images/preview.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">
<input type="file" id="file" accept="image/png,image/jpeg" />
<button type="button" class="layui-btn" id="btnChooseImage">上传</button>
<button type="button" class="layui-btn layui-btn-danger" id="btnUpload">确定</button>
</div>
</div>
</div>三、CSS样式
/* 设置卡片主体区域的宽度 */
.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%;
}
#file {
display: none;
}
/* 头像 */
.userinfo {
height: 60px;
line-height: 60px;
font-size: 12px;
user-select: none;
}
.layui-nav-img {
width: 40px;
height: 40px;
}四、JS
1、实现基本的裁剪效果
// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
// 纵横比
aspectRatio: 1,
// 指定预览区域
preview: '.img-preview'
}
// 1.3 创建裁剪区域
$image.cropper(options)2、更换裁剪的图片
// 1. 拿到用户选择的文件
var file = e.target.files[0]
// 2. 将文件，转化为路径
var imgURL = URL.createObjectURL(file)
// 3. 重新初始化裁剪区域
$image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', imgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域3、将裁剪后的图片，输出为 base64 格式的字符串
图片转为base64格式的字符串网址：图片在线转换Base64,图片编码base64
var dataURL = $image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 100,
height: 100
})
.toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串4、封装获取用户信息函数：
这里的接口要用自己的！！！
// 获取用户基本信息
function getUserInfo() {
$.ajax({
method: 'GET',
url: '/my/userinfo',
success: function (res) {
if (res.status !== 0) {
return layui.layer.msg('获取用户信息失败!')
} else {
// 调用 renderAvatar 渲染用户头像
$('.layui-nav-img').attr('src', res.data.user_pic);
}
}
})
}五、总结
1、HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./cropper/cropper.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">
<!-- 头像区域 -->
<div class="userinfo">
<img src="" class="layui-nav-img">
</div>
</div>
<div class="layui-card-body">
<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1">
<!-- 图片裁剪区域 -->
<div class="cropper-box">
<!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
<img id="image" src="images/preview.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">
<input type="file" id="file" accept="image/png,image/jpeg" />
<button type="button" class="layui-btn" id="btnChooseImage">上传</button>
<button type="button" class="layui-btn layui-btn-danger" id="btnUpload">确定</button>
</div>
</div>
</div>
<script src="./layui/layui.all.js"></script>
<script src="./cropper/jquery.js"></script>
<script src="./cropper/Cropper.js"></script>
<script src="./cropper/jquery-cropper.js"></script>
<script src="./baseAPI.js"></script>
<script src="./index.js"></script>
</body>
</html>2、CSS代码
/* 设置卡片主体区域的宽度 */
.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%;
}
#file {
display: none;
}
/* 头像 */
.userinfo {
height: 60px;
line-height: 60px;
font-size: 12px;
user-select: none;
}
.layui-nav-img {
width: 40px;
height: 40px;
}3、JS代码
$(function () {
var layer = layui.layer;
// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image');
// 1.2 配置选项
const options = {
// 纵横比
aspectRatio: 1,
// 指定预览区域
preview: '.img-preview'
}
// 1.3 创建裁剪区域
$image.cropper(options)
// 为上传按钮绑定点击事件
$('#btnChooseImage').on('click', function () {
$('#file').click();
})
// 为文件选择框绑定 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) // 重新初始化裁剪区域
})
// 为确定按钮绑定点击事件
$('#btnUpload').on('click', function () {
var dataURL = $image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 100,
height: 100
})
.toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
$.ajax({
method: 'POST',
url: '/my/update/avatar',
data: {
avatar: dataURL
},
success: function (res) {
if (res.status !== 0) {
return layer.msg('更换头像失败！');
}
layer.msg('更换头像成功！');
getUserInfo();
}
})
})
// 调用getUserInfo 获取用户基本信息
getUserInfo();
// 获取用户基本信息
function getUserInfo() {
$.ajax({
method: 'GET',
url: '/my/userinfo',
success: function (res) {
if (res.status !== 0) {
return layui.layer.msg('获取用户信息失败!')
} else {
// 调用 renderAvatar 渲染用户头像
$('.layui-nav-img').attr('src', res.data.user_pic);
}
}
})
}
})
4110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
