mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-03-04 08:34:32 +08:00
初始化项目
This commit is contained in:
augushong
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