mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-03-04 00:24:29 +08:00
初始化项目
This commit is contained in:
augushong
11
public/static/lib/layui/lib/cropper/cropper.css
Normal file
11
public/static/lib/layui/lib/cropper/cropper.css
Normal file
@@ -0,0 +1,11 @@
|
||||
body {
|
||||
}
|
||||
/*!
|
||||
* Cropper v0.7.6-beta
|
||||
* https://github.com/fengyuanchen/cropper
|
||||
*
|
||||
* Copyright 2014 Fengyuan Chen
|
||||
* Released under the MIT license
|
||||
*/
|
||||
|
||||
.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.cropper-container img{width:100%;height:100%;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important}.cropper-modal,.cropper-canvas{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-canvas{background-color:#fff;opacity:0;filter:alpha(opacity=0)}.cropper-modal{background-color:#000;opacity:.5;filter:alpha(opacity=50)}.cropper-dragger{position:absolute;top:10%;left:10%;width:80%;height:80%}.cropper-viewer{display:block;width:100%;height:100%;overflow:hidden;outline-width:1px;outline-style:solid;outline-color:#69f;outline-color:rgba(51,102,255,.75)}.cropper-dashed{position:absolute;display:block;border:0 dashed #fff;opacity:.5;filter:alpha(opacity=50)}.cropper-dashed.dashed-h{top:33.3%;left:0;width:100%;height:33.3%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.3%;width:33.3%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-face,.cropper-line,.cropper-point{position:absolute;display:block;width:100%;height:100%;opacity:.1;filter:alpha(opacity=10)}.cropper-face{top:0;left:0;cursor:move;background-color:#fff}.cropper-line{background-color:#69f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;background-color:#69f;opacity:.75;filter:alpha(opacity=75)}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;opacity:1;filter:alpha(opacity=100)}.cropper-point.point-se:before{position:absolute;right:-50%;bottom:-50%;display:block;width:200%;height:200%;content:" ";background-color:#69f;opacity:0;filter:alpha(opacity=0)}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;opacity:.75;filter:alpha(opacity=75)}}.cropper-hidden{display:none!important}.cropper-invisible{position:fixed;top:0;left:0;z-index:-1;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;opacity:0;filter:alpha(opacity=0)}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-canvas,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
|
||||
3087
public/static/lib/layui/lib/cropper/cropper.js
Normal file
3087
public/static/lib/layui/lib/cropper/cropper.js
Normal file
File diff suppressed because it is too large
Load Diff
153
public/static/lib/layui/lib/cropper/croppers.js
Normal file
153
public/static/lib/layui/lib/cropper/croppers.js
Normal file
@@ -0,0 +1,153 @@
|
||||
/*!
|
||||
* Cropper v3.0.0
|
||||
*/
|
||||
|
||||
layui.config({
|
||||
base: '/static/lib/layui/lib/cropper/' //layui自定义layui组件目录
|
||||
}).define(['jquery','layer','cropper'],function (exports) {
|
||||
var $ = layui.jquery
|
||||
,layer = layui.layer;
|
||||
var html = "<link rel=\"stylesheet\" href=\"/static/lib/layui/lib/cropper/cropper.css\">\n" +
|
||||
"<div class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" +
|
||||
" <div class=\"layui-form-item\">\n" +
|
||||
" <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto;margin-left:0\">\n" +
|
||||
" <label for=\"cropper_avatarImgUpload\" class=\"layui-btn layui-btn-primary\">\n" +
|
||||
" <i class=\"layui-icon\"></i>选择图片\n" +
|
||||
" </label>\n" +
|
||||
" <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload\" type=\"file\" value=\"选择图片\" name=\"file\">\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"layui-form-mid layui-word-aux\" style=\"margin-left:0\">头像的尺寸限定150x150px,大小在50kb以内</div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"layui-row layui-col-space15\">\n" +
|
||||
" <div class=\"layui-col-xs12 layui-col-md9 \">\n" +
|
||||
" <div class=\"readyimg\" style=\"height:450px;background-color: rgb(247, 247, 247);\">\n" +
|
||||
" <img src=\"\" >\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"layui-col-xs12 layui-col-md3 \">\n" +
|
||||
" <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"layui-row layui-col-space15\">\n" +
|
||||
" <div class=\"layui-col-xs9\">\n" +
|
||||
" <div class=\"layui-row\">\n" +
|
||||
" <div class=\"layui-col-xs6\">\n" +
|
||||
" <button type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋转</button>\n" +
|
||||
" <button type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"rotate\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋转</button>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"layui-col-xs5\" style=\"text-align: right;\">\n" +
|
||||
// " <button type=\"button\" class=\"layui-btn\" title=\"移动\"></button>\n" +
|
||||
// " <button type=\"button\" class=\"layui-btn\" title=\"放大图片\"></button>\n" +
|
||||
// " <button type=\"button\" class=\"layui-btn\" title=\"缩小图片\"></button>\n" +
|
||||
" <button type=\"button\" class=\"layui-btn layui-icon layui-icon-refresh\" cropper-event=\"reset\" title=\"重置图片\"></button>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"layui-col-xs3\">\n" +
|
||||
" <button class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave\" type=\"button\"> 保存修改</button>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
"\n" +
|
||||
"</div>";
|
||||
var obj = {
|
||||
render: function(e){
|
||||
$('body').append(html);
|
||||
var self = this,
|
||||
elem = e.elem,
|
||||
saveW = e.saveW,
|
||||
saveH = e.saveH,
|
||||
mark = e.mark,
|
||||
area = e.area,
|
||||
url = e.url,
|
||||
data = e.data,
|
||||
done = e.done;
|
||||
|
||||
if(area === true){
|
||||
if(window.innerWidth > 900){
|
||||
area = '900px'
|
||||
}else{
|
||||
area = ['100%','100%']
|
||||
}
|
||||
}
|
||||
|
||||
var content = $('.showImgEdit')
|
||||
,image = $(".showImgEdit .readyimg img")
|
||||
,preview = '.showImgEdit .img-preview'
|
||||
,file = $(".showImgEdit input[name='file']")
|
||||
, options = {aspectRatio: mark,preview: preview,viewMode:1};
|
||||
|
||||
$(elem).on('click',function () {
|
||||
layer.open({
|
||||
type: 1
|
||||
, content: content
|
||||
, area: area
|
||||
, success: function () {
|
||||
image.cropper(options);
|
||||
}
|
||||
, cancel: function (index) {
|
||||
layer.close(index);
|
||||
image.cropper('destroy');
|
||||
}
|
||||
});
|
||||
});
|
||||
$(".layui-btn").on('click',function () {
|
||||
var event = $(this).attr("cropper-event");
|
||||
//监听确认保存图像
|
||||
if(event === 'confirmSave'){
|
||||
image.cropper("getCroppedCanvas",{
|
||||
width: saveW,
|
||||
height: saveH
|
||||
}).toBlob(function(blob){
|
||||
var formData=new FormData();
|
||||
|
||||
|
||||
var last_dir_index = file.val().lastIndexOf('\\')
|
||||
var filename = file.val().substr(last_dir_index--);
|
||||
formData.append('file',blob,filename);
|
||||
console.log(data);
|
||||
|
||||
Object.keys(data).forEach(function(key){
|
||||
formData.append(key,data[key]);
|
||||
})
|
||||
|
||||
$.ajax({
|
||||
method:"post",
|
||||
url: url, //用于文件上传的服务器端请求地址
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success:function(result){
|
||||
done(result);
|
||||
if(result.code == 0){
|
||||
// layer.msg(result.msg,{icon: 1});
|
||||
layer.closeAll('page');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
//监听旋转
|
||||
}else if(event === 'rotate'){
|
||||
var option = $(this).attr('data-option');
|
||||
image.cropper('rotate', option);
|
||||
//重设图片
|
||||
}else if(event === 'reset'){
|
||||
image.cropper('reset');
|
||||
}
|
||||
//文件选择
|
||||
file.change(function () {
|
||||
var r= new FileReader();
|
||||
var f=this.files[0];
|
||||
r.readAsDataURL(f);
|
||||
r.onload=function (e) {
|
||||
image.cropper('destroy').attr('src', this.result).cropper(options);
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
exports('croppers', obj);
|
||||
});
|
||||
Reference in New Issue
Block a user