需求:在一个后台页面中,插入iform页面,需求为更换头像(layui框架)
<a href="/user_buddha.html" target="fm"><i class="layui-icon layui-icon-app"></i>更换头像</a>
<link rel="stylesheet" href="/lib/cropper/cropper.css" />
<script src="/lib/jquery.js"></script> <script src="/lib/cropper/Cropper.js"></script> <script src="/lib/cropper/jquery-cropper.js"></script>
<!-- 第一行的图片裁剪和预览区域 --> <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>
css结构:
/* 设置卡片主体区域的宽度 */
.layui-card-body {
500px;
}
/* 设置按钮行的样式 */
.row2 {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
/* 设置裁剪区域的样式 */
.cropper-box {
350px;
height: 350px;
background-color: cyan;
overflow: hidden;
}
/* 设置第一个预览区域的样式 */
.w100 {
100px;
height: 100px;
background-color: gray;
}
/* 设置第二个预览区域的样式 */
.w50 {
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%;
}
四.实现基本裁剪效果
// 1.1 获取裁剪区域的 DOM 元素 var $image = $('#image') // 1.2 配置选项 const options = { // 纵横比 aspectRatio: 1, // 指定预览区域 preview: '.img-preview' } // 1.3 创建裁剪区域 $image.cropper(options)
<input type="file" id="file" accept="image/png,image/jpeg" />
定义一个按钮，文本是 上传，一旦用户点击按钮，我们手动触发 文件选择框的点击事件
$('#btnChooseImage').on('click', function() {
$('#file').click()
})
六.
-
-
用户选择了文件就会触发这个事件，通过
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) // 重新初始化裁剪区域 })
七.
var dataURL = $image .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布 100, height: 100 }) .toDataURL('image/png')
$.ajax({ method: 'POST', url: '//', data: { avatar: dataURL }, success: function(res) { if (res.status !== 0) { return layer.msg('更换头像失败！') } layer.msg('更换头像成功！') window.parent.getUserInfo() } })