cropper
作者:互联网
cropper.js (文档翻译+demo)_achejq的专栏-CSDN博客_cropper
1. 基本使用
效果预览:
-
在
<head>
中导入cropper.css
样式表:<link rel="stylesheet" href="/.../cropper.css" />
-
在
<body>
的结束标签之前,按顺序导入如下的 js 脚本:<script src="/.../jquery.js"></script> <script src="/.../Cropper.js"></script> <script src="/.../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%; }
-
实现基本裁剪效果:
// 1.1 获取裁剪区域的 DOM 元素 var $image = $('#image') // 1.2 配置选项 const options = { // 纵横比 aspectRatio: 1, // 指定预览区域 preview: '.img-preview' } // 1.3 创建裁剪区域 $image.cropper(options)
2. 更换裁剪的图片
-
拿到用户选择的文件
var file = e.target.files[0]
-
根据选择的文件,创建一个对应的 URL 地址:
var newImgURL = URL.createObjectURL(file)
-
先
销毁
旧的裁剪区域,再重新设置图片路径
,之后再创建新的裁剪区域
:$image .cropper('destroy') // 销毁旧的裁剪区域 .attr('src', newImgURL) // 重新设置图片路径 .cropper(options) // 重新初始化裁剪区域
3. 将裁剪后的图片,输出为 base64 格式的字符串
var dataURL = $image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 100,
height: 100
})
.toDataURL('image/png') // 将 Canvas 画布上的内容,转化为 base64 格式的字符串
4. 将裁剪后的图片,转化为文件对象后再继续操作
$image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 400,
height: 280
})
.toBlob(function(blob) { // 将 Canvas 画布上的内容,转化为文件对象
// 得到文件对象 'blob' 后,进行后续的操作
})
标签:flex,样式,image,裁剪,区域,cropper 来源: https://www.cnblogs.com/gh-StudyNotes/p/15856544.html