cropper使用基本步骤
1、在头部引入cropper.css
<link rel="stylesheet" href="cropper.css" />
2、在底部body结束前引入cropper的两个js文件,再加上jQuery
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
3、定义下面的结构,直接复制
<!-- 第一行的图片裁剪和预览区域 -->
<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>
4、再新建index.css文件并引入到html,样式内容直接复制
/* 设置卡片主体区域的宽度 */
.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%;
}
5、创建index.js 并迎入到html 关键
// 1. 获取裁剪区域的 DOM 元素,赋值到一个变量
var $image = $('#image')
// 2创建出一个裁剪框 :定义好丛横比跟预览的区域
const options = {
// 纵横比 宽/高
aspectRatio: 1/1,
// 指定预览区域
$image.preview: '.img-preview'
}
// 3将裁剪框运用到裁剪区域: 裁剪区域调用cropper方法,并将options对象值赋进去
image.cropper(options)
6、拿到裁剪后的图片,赋值给dataURL
var dataURL = $image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 100,
height: 100
})
.toDataURL('image/png') // 将 Canvas 画布上的内容,转化为 base64 格式的字符串
拿到的是个base64字符串图片,也就是说这个字符串本身就是一个src的值,不需要做其他引用
7、下面是个扩展
将一个图片文件转化成url格式,用来替换src的值
//.拿到用户选择的文件
var file = e.target.files[0]
//.根据选择的文件,创建一个对应的 URL 地址
var newImgURL = URL.createObjectURL(file)
//.先销毁旧的裁剪区域,再重新设置图片路径,之后再创建新的裁剪区域:
$image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', newImgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域