125 lines
5.4 KiB
HTML
125 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title></title>
|
||
<link rel="stylesheet" href="../../../component/layui/css/layui.css" />
|
||
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
|
||
<link rel="stylesheet" href="../../../component/pear/css/pear-module/cropper.css" />
|
||
</head>
|
||
<body class="pear-container">
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-xs9">
|
||
<div style="height:325px;background-color: rgb(247, 247, 247);">
|
||
<img id="sourceImage" src="">
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs3" style="padding-left:0px;">
|
||
<div id="previewImage" style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row">
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
|
||
<button class="pear-btn pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button>
|
||
<button class="pear-btn pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button>
|
||
<button class="pear-btn pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button>
|
||
<label for="uploadPicture" class="pear-btn pear-btn-primary" title="选择图片">
|
||
<span class="layui-icon layui-icon-upload"></span>
|
||
</label>
|
||
<input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
|
||
</div>
|
||
</div>
|
||
<script src="../../../component/layui/layui.js"></script>
|
||
<script src="../../../component/pear/pear.js"></script>
|
||
<script>
|
||
layui.use(['jquery','layer','cropper'], function () {
|
||
let $ = layui.jquery;
|
||
let layer = layui.layer;
|
||
let cropper = layui.cropper;
|
||
|
||
var options = {
|
||
aspectRatio: 1 / 1, // 裁剪框比例
|
||
preview: '#previewImage', // 预览div
|
||
viewmode: 1
|
||
};
|
||
|
||
$("#sourceImage").attr("src", parent.layui.$("#userAvatar").attr("src"));
|
||
console.log(parent.layui.$("#userAvatar").attr("src"));
|
||
$("#sourceImage").cropper(options);
|
||
|
||
window.submitForm = function () {
|
||
$("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题
|
||
$("#sourceImage").cropper("getCroppedCanvas", {
|
||
width: 280,
|
||
height: 140
|
||
}).toBlob(function (blob) {
|
||
var timeStamp = Date.parse(new Date());
|
||
var fileName = timeStamp + '.jpg';
|
||
var formData = new FormData();
|
||
formData.append('file', blob, fileName);
|
||
formData.append('fileName', fileName);
|
||
formData.append('fileToken', timeStamp);
|
||
// $.ajax({
|
||
// method: "post",
|
||
// url: "", //用于文件上传的服务器端请求地址
|
||
// data: formData,
|
||
// processData: false,
|
||
// contentType: false,
|
||
// success: function (result) {
|
||
// //后续操作
|
||
// }
|
||
// });
|
||
|
||
//demo环境，直接返回
|
||
console.log(blob);
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(blob);
|
||
reader.onload = function (e) {
|
||
var data={
|
||
index:parent.layer.getFrameIndex(window.name),
|
||
newAvatar : e.target.result
|
||
};
|
||
console.log(data);
|
||
parent.window.callback(data);
|
||
};
|
||
});
|
||
}
|
||
|
||
$(".pear-btn").on('click', function () {
|
||
var event = $(this).attr("cropper-event");
|
||
|
||
if (event === 'rotate') {
|
||
var option = $(this).attr('data-option');
|
||
$("#sourceImage").cropper('rotate', option);
|
||
} else if (event === 'reset') {
|
||
$("#sourceImage").cropper('reset');
|
||
}
|
||
|
||
$("#uploadPicture").change(function () {
|
||
var r = new FileReader();
|
||
var f = this.files[0];
|
||
|
||
var uploadFileSize = f.size / 1024;
|
||
if (uploadFileSize > 5120) {
|
||
parent.layer.msg("上传文件不得超过5m", { icon: 5 });
|
||
return false;
|
||
}
|
||
|
||
r.readAsDataURL(f);
|
||
r.onload = function (e) {
|
||
$("#sourceImage")
|
||
.cropper('destroy')
|
||
.attr('src', this.result)
|
||
.cropper(options);
|
||
};
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |