jquery-cropper图片裁剪插件使用
站长
· 阅读数 21
一、基本使用
1、在 <head> 中导入 cropper.css 样式表：
**插件下载：**gitee.com/wen-chen/pl…
<link rel="stylesheet" href="/lib/cropper/cropper.css" />
2、在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：
<script src="/lib/jquery.js"></script>
<script src="/lib/cropper/Cropper.js"></script>
<script src="/lib/cropper/jquery-cropper.js"></script>
3、在卡片的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>
4、美化的样式
/* 设置卡片主体区域的宽度 */
.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 元素
var $image = $('#image')
// 1配置选项
const options = {
// 纵横比
aspectRatio: 1,
// 指定预览区域
preview: '.img-preview'
}
// 创建裁剪区域
$image.cropper(options)
三、更换裁剪后的图片
1、拿到用户选择的文件
var file = e.target.files[0]
2、根据选择的文件，创建一个对应的 URL 地址：
var newImgURL = URL.createObjectURL(file)
3、先销毁旧的裁剪区域，再重新设置图片路径，之后再创建``新``的``裁剪区域：
$image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', newImgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域
四、裁剪后的图片，输出为base64的字符串
var dataURL = $image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 100,
height: 100
})
.toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
六、完整代码
插件下载： gitee.com/wen-chen/pl…
注意：若使用layui可将脚本直接打开即可正常显示，若不需要可将其注释
1、files.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>
<script></script>
<!-- <link rel="stylesheet" href="./lib/layui/css/layui.css" /> -->
<link rel="stylesheet" href="./lib/cropper/cropper.css" />
<link rel="stylesheet" href="./css/file.css" />
</head>
<body>
<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1" style="width: 60%;" >
<!-- 图片裁剪区域 -->
<div class="cropper-box">
<!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
<img id="image" src="/image/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">
<!-- 1、 隐藏域 -->
<input type="file" hidden accept="image/jpg,image/jpeg,image/png" id="files">
<button type="button" class="layui-btn" id="btnUpdate">上传</button>
<button type="button" class="layui-btn layui-btn-danger" id="uploadSuccess">确定</button>
</div>
<!-- <script src="./lib/layui/layui.all.js"></script> -->
<script src="./lib/jquery.js"></script>
<script src="./lib/cropper/Cropper.js"></script>
<script src="./lib/cropper/jquery-cropper.js"></script>
<script src="./js/file.js"></script>
</body>
</html>
2、files.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%;
}
3、files.js(重点）
$(function () {
// !# 2 cropper图片裁剪插件使用
//获取裁剪区域的dom元素
var $image = $('#image')
// 配置选项
const options = {
// 从横比
aspectRatio: 1,
// 指定预览区域
preview: '.img-preview',
}
// 创建裁剪区域
$image.cropper(options)
// 3、模拟点击
$('#btnUpdate').on('click', function () {
$('#files').click()
})
//4 监听图片(隐藏文件)的变化，也就是用户是否选择文件
$('#files').on('change', function (e) {
// 拿到用户选择的文件
var file = e.target.files[0]
// 根据选择的文件，创建一个对应的 URL 地址：
var newImgURL = URL.createObjectURL(file)
// 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建``新``的``裁剪区域
$image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', newImgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域
})
// 5 确定功能
$('#uploadSuccess').on('click', function () {
//5.1 将裁剪后的图片，输出为 base64 格式的字符串
var dataURL = $image
.cropper('getCroppedCanvas', {
// 创建一个 Canvas 画布
width: 100,
height: 100,
})
.toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式
// 5.2 裁剪后的图片发送到服务器
$.ajax({
method: 'POST',
url: 'xxxxx',
data: { avatar: dataURL },
success: function (res) {
if (res.status !== 0) {
return layer.msg('更新头像失败！')
}
// 更新头像成功后的操作
layer.msg('更新头像成功！')
// 头像更新成功后，调用父页面的方法来更新头像
window.parent.getuserinfo()
},
})
})
})
七、拓展-裁剪后的图片输出为文件（blob二进制）
1、裁剪后的图片，输出为文件（blob二进制）
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 400,
height: 280
})
.toBlob(function(blob) { // 将 Canvas 画布上的内容，转化为文件对象
// 得到文件对象后，进行后续的操作
})
注意：
1、有表单且接口请求体要求Formdata格式，可用下列图片
2、向服务器发送Formdata格式，必须设置以下两个属性， contentType:false,processData:false
2、完整代码
注意：其他代码都一样，就裁剪后的图片输出方式不同
//监听表单提交行为
$('#formSubmit').on('submit', function (e) {
e.preventDefault()
// 1 创建FormData对象
var fd = new FormData($(this)[0])//将标题、分类、富文本三项放进去
// fd.forEach(function(k,v){
// console.log(k,v);//标题、分类、富文本编辑器的名称及内容
// })
// 2 添加state参数数据
fd.append("state",art_state)
// 3 将裁剪后的图片，添加cover_img参数数据输出为文件
$image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 400,
height: 280
}).toBlob(function(blob) { // 将 Canvas 画布上的内容，转化为文件对象// 得到文件对象后，进行后续的操作
//4 将文件对象添加到fd中
fd.append("cover_img",blob)
// 5 发起请求
$.ajax({
method:'POST',
url:xxxx',
data:fd,
//若向服务器提交的是FormData格式的数据，必须添加以下两个配置
contentType:false,
processData:false,
success:function(res){
if(res.status!==0){
return layer.mesage(res.message)
}
// 6添加成功，跳转到指定页面
location.href="./xxxx.js"
}
})
})
})
转载自:https://juejin.cn/post/7093525010907660295