|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>绘鸭AI相机演示效果图</title>
|
|
|
<link rel="stylesheet" href="./component/layui/css/layui.css" media="all">
|
|
|
<style>
|
|
|
.gallery-item {
|
|
|
display: inline-block;
|
|
|
vertical-align: top;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
margin: 0 5px; /* 上下0像素，左右5像素 */
|
|
|
}
|
|
|
|
|
|
.layui-card-body img {
|
|
|
width: 150px; /* 缩略图的宽度 */
|
|
|
height: auto;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.model-name,
|
|
|
.model-star,
|
|
|
.model-memo {
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.layui-layer-photos img {
|
|
|
max-width: 100%; /* 确保图片不会超出弹出窗口的宽度 */
|
|
|
max-height: 100%; /* 确保图片不会超出弹出窗口的高度 */
|
|
|
}
|
|
|
|
|
|
.image-container {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.image-container img {
|
|
|
display: block; /* 使图片宽度自动适应容器宽度 */
|
|
|
width: 100%; /* 或者指定具体宽度，如 max-width: 300px; */
|
|
|
max-width: 100%; /* 确保图片不会超出容器 */
|
|
|
height: auto;
|
|
|
}
|
|
|
|
|
|
.delete-button {
|
|
|
position: absolute; /* 绝对定位相对于.image-container */
|
|
|
top: 2px; /* 距离图片顶部10px */
|
|
|
right: 2px; /* 距离图片右侧10px */
|
|
|
cursor: pointer;
|
|
|
background-color: red;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 5px;
|
|
|
padding: 5px 10px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.delete-button:hover {
|
|
|
background-color: darkred;
|
|
|
}
|
|
|
|
|
|
.cover-button {
|
|
|
position: absolute; /* 绝对定位相对于.image-container */
|
|
|
top: 2px; /* 距离图片顶部10px */
|
|
|
right: 60px; /* 距离图片右侧10px */
|
|
|
cursor: pointer;
|
|
|
background-color: burlywood;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 5px;
|
|
|
padding: 5px 10px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.cover-selected-button {
|
|
|
position: absolute; /* 绝对定位相对于.image-container */
|
|
|
top: 2px; /* 距离图片顶部10px */
|
|
|
right: 60px; /* 距离图片右侧10px */
|
|
|
cursor: pointer;
|
|
|
background-color: greenyellow;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 5px;
|
|
|
padding: 5px 10px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.cover-button:hover {
|
|
|
background-color: darkorange;
|
|
|
}
|
|
|
|
|
|
.addTask-button {
|
|
|
top: 2px; /* 距离图片顶部10px */
|
|
|
right: 2px; /* 距离图片右侧10px */
|
|
|
cursor: pointer;
|
|
|
background-color: orange;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 5px;
|
|
|
padding: 5px 10px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.addTask-button:hover {
|
|
|
background-color: darkorange;
|
|
|
}
|
|
|
</style>
|
|
|
<!--引用Jquery-->
|
|
|
<script src="./component/jquery-3.5.1.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="layui-container" id="galleryContainer">
|
|
|
</div>
|
|
|
|
|
|
<script src="./component/layui/layui.js" charset="utf-8"></script>
|
|
|
<script>
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
|
var source_img_url = params.get('img_url'); // 获取 param1 的值
|
|
|
//系统用户默认图像
|
|
|
if (source_img_url == null) {
|
|
|
source_img_url = "http://hzkc.oss-cn-beijing.aliyuncs.com/Images/Upload/mote.png";
|
|
|
}
|
|
|
// 系统用户ID
|
|
|
var user_id = "16380C30-B1EA-4BFF-B5E6-4F3928CE36F3";
|
|
|
// 用户的分类代号
|
|
|
var task_type_code = "System"
|
|
|
//用户分类的ID
|
|
|
var task_type_id = 1;
|
|
|
|
|
|
//生成一张
|
|
|
function addImage(model_id, count) {
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/QingLong/HuiYa/AdminAddImage",
|
|
|
dataType: 'json',
|
|
|
data: {
|
|
|
"model_id": model_id,
|
|
|
"user_id": user_id,
|
|
|
"source_img_url": source_img_url,
|
|
|
"count": count,
|
|
|
"task_type_id": task_type_id,
|
|
|
"task_type_code": task_type_code
|
|
|
},
|
|
|
async: false,
|
|
|
success: function (res) {
|
|
|
layer.msg('任务创建成功！', {icon: 1, time: 2000}, function () {
|
|
|
location.reload(true);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//删除图片
|
|
|
function deleteImage(button, id) {
|
|
|
// 找到按钮所在的图片容器
|
|
|
var container = button.parentNode;
|
|
|
// 调用layer.confirm创建确认框
|
|
|
layer.confirm('您确定要删除掉这张图片吗？', {
|
|
|
title: '删除确认',
|
|
|
btn: ['确定', '取消'], // 按钮
|
|
|
icon: 3, // 弹层中图标，这里使用了一个问号图标
|
|
|
}, function (index) {
|
|
|
// 确定按钮的回调函数
|
|
|
layer.close(index); // 关闭确认框
|
|
|
// 从DOM中移除图片容器
|
|
|
container.remove();
|
|
|
//删除
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/QingLong/HuiYa/AdminDeleteImage",
|
|
|
dataType: 'json',
|
|
|
data: {
|
|
|
"id": id
|
|
|
},
|
|
|
async: false,
|
|
|
success: function (res) {
|
|
|
// 假设删除成功后，可以在这里做一些UI上的反馈，如提示用户删除成功
|
|
|
layer.msg('删除成功！', {icon: 1},function (){
|
|
|
// 刷新本页面
|
|
|
location.reload(true);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}, function (index) {
|
|
|
// 取消按钮的回调函数
|
|
|
layer.close(index); // 关闭确认框
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//设置封面
|
|
|
function setCover(button, id) {
|
|
|
// 调用layer.confirm创建确认框
|
|
|
layer.confirm('您确定要设置这张图片成为此模型封面吗？', {
|
|
|
title: '确认',
|
|
|
btn: ['确定', '取消'], // 按钮
|
|
|
icon: 3, // 弹层中图标，这里使用了一个问号图标
|
|
|
}, function (index) {
|
|
|
// 确定按钮的回调函数
|
|
|
layer.close(index); // 关闭确认框
|
|
|
// 从DOM中移除图片容器
|
|
|
// container.remove();
|
|
|
|
|
|
// 设置封面
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/QingLong/HuiYa/AdminSetCover",
|
|
|
dataType: 'json',
|
|
|
data: {
|
|
|
"id": id
|
|
|
},
|
|
|
async: false,
|
|
|
success: function (res) {
|
|
|
// 假设成功后，可以在这里做一些UI上的反馈，如提示用户删除成功
|
|
|
layer.msg('设置成功！', {icon: 1},function (){
|
|
|
// 刷新本页面
|
|
|
location.reload(true);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}, function (index) {
|
|
|
// 取消按钮的回调函数
|
|
|
layer.close(index); // 关闭确认框
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
layui.use(['laytpl', 'layer'], function () {
|
|
|
var laytpl = layui.laytpl;
|
|
|
var $ = layui.$;
|
|
|
var layer = layui.layer;
|
|
|
var data;
|
|
|
|
|
|
function render() {
|
|
|
// 模拟从服务器获取数据
|
|
|
$.ajax({
|
|
|
type: "GET",
|
|
|
url: "/QingLong/HuiYa/AdminGetData?page=1&limit=100&source_img_url=" + source_img_url,
|
|
|
async: false,
|
|
|
success: function (res) {
|
|
|
data = res.data;
|
|
|
var row = {};
|
|
|
//第一行
|
|
|
row['model_id'] = 0;
|
|
|
row['update_time'] = "2024-05-13 00:00:00";
|
|
|
row['model_name'] = "模拟用户上传人像";
|
|
|
row['star'] = 0;
|
|
|
row['img_count'] = 0;
|
|
|
row['memo'] = "【半身】";
|
|
|
row['img_list'] = [];
|
|
|
var record = {};
|
|
|
record['img_url'] = source_img_url;
|
|
|
record['img_url_preview'] = source_img_url + "?x-oss-process=image/resize,w_362,limit_0";
|
|
|
record['sort_id'] = 0;
|
|
|
record['id'] = 0;
|
|
|
record['hidden'] = 1;
|
|
|
row['img_list'].push(record);
|
|
|
data.unshift(row);
|
|
|
renderGallery(data);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
render();
|
|
|
|
|
|
function renderGallery(items) {
|
|
|
var galleryHtml = '<div class="gallery-row">'; // 开始新的一行
|
|
|
galleryHtml += items.map(renderImages).join('');
|
|
|
galleryHtml += '</div>'; // 结束这一行
|
|
|
$('#galleryContainer').html(galleryHtml);
|
|
|
bindImgClickEvent();
|
|
|
}
|
|
|
|
|
|
function renderImages(item) {
|
|
|
var imgListHtml = item.img_list.map(function (img) {
|
|
|
if (img.img_url == undefined || img.img_url == null || img.img_url.length == 0) {
|
|
|
img.img_url = 'http://hzkc.oss-cn-beijing.aliyuncs.com/Images/System/loading.png';
|
|
|
img.img_url_preview = 'http://hzkc.oss-cn-beijing.aliyuncs.com/Images/System/loading.png?x-oss-process=image/resize,w_362,limit_0';
|
|
|
}
|
|
|
if (item.model_id > 0) {
|
|
|
if (img.is_cover == 0) {
|
|
|
return `<div class="image-container">
|
|
|
<img src="${img.img_url_preview}" alt="Image" data-full="${img.img_url}" />
|
|
|
<button class="cover-button" onclick="setCover(this,'${img.id}')">封面</button>
|
|
|
<button class="delete-button" onclick="deleteImage(this,'${img.id}')">删除</button>
|
|
|
</div>
|
|
|
`;
|
|
|
} else {
|
|
|
return `<div class="image-container">
|
|
|
<img src="${img.img_url_preview}" alt="Image" data-full="${img.img_url}" />
|
|
|
<button class="cover-selected-button" onclick="setCover(this,'${img.id}')">封面</button>
|
|
|
<button class="delete-button" onclick="deleteImage(this,'${img.id}')">删除</button>
|
|
|
</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
return `<div class="image-container">
|
|
|
<img src="${img.img_url_preview}" alt="Image" data-full="${img.img_url}" />
|
|
|
</div>
|
|
|
`;
|
|
|
}
|
|
|
}).join('');
|
|
|
|
|
|
if (item.model_id > 0) {
|
|
|
if (item.model_type_id == 1) {
|
|
|
item.mode_type_name = 'WEBUI';
|
|
|
return `
|
|
|
<div class="gallery-item">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">
|
|
|
<span class="model-name">编号：${item.model_id}</span>
|
|
|
<span class="model-name">名称：${item.model_name}</span>
|
|
|
<span class="model-star">星值：${item.star}</span>
|
|
|
<span class="model-name">类型：${item.mode_type_name}</span>
|
|
|
<button class="addTask-button" onclick="addImage(${item.model_id},1)">生成1张</button>
|
|
|
<button class="addTask-button" onclick="addImage(${item.model_id},2)">生成2张</button>
|
|
|
<button class="addTask-button" onclick="addImage(${item.model_id},3)">生成3张</button>
|
|
|
</div>
|
|
|
<div class="layui-card-body">
|
|
|
${imgListHtml}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
|
|
|
} else {
|
|
|
if (item.model_type_id == 2) {
|
|
|
item.mode_type_name = 'ComfyUI';
|
|
|
}
|
|
|
if (item.model_type_id == 3) {
|
|
|
item.mode_type_name = 'Midjourney';
|
|
|
}
|
|
|
return `
|
|
|
<div class="gallery-item">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">
|
|
|
<span class="model-name">编号：${item.model_id}</span>
|
|
|
<span class="model-name">名称：${item.model_name}</span>
|
|
|
<span class="model-star">星值：${item.star}</span>
|
|
|
<span class="model-name">类型：${item.mode_type_name}</span>
|
|
|
<button class="addTask-button" onclick="addImage(${item.model_id},1)">生成1张</button>
|
|
|
</div>
|
|
|
<div class="layui-card-body">
|
|
|
${imgListHtml}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
return `
|
|
|
<div class="gallery-item">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">
|
|
|
<span class="model-name">模板：${item.model_name}</span>
|
|
|
<span class="model-star">星值：${item.star}</span>
|
|
|
</div>
|
|
|
<div class="layui-card-body">
|
|
|
${imgListHtml}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function lookPicture(resourcesUrl) {
|
|
|
// resourcesUrl：接受的图片地址，resourcesType之前定义的数据类型（可省略）
|
|
|
if (resourcesUrl == "") {
|
|
|
layer.msg("没有发现图片！");
|
|
|
return;
|
|
|
}
|
|
|
var img = new Image();
|
|
|
img.onload = function () {//避免图片还未加载完成无法获取到图片的大小。
|
|
|
//避免图片太大，导致弹出展示超出了网页显示访问，所以图片大于浏览器时下窗口可视区域时，进行等比例缩小。
|
|
|
var max_height = $(window).height() - 100;
|
|
|
var max_width = $(window).width();
|
|
|
|
|
|
//rate1，rate2，rate3 三个比例中取最小的。
|
|
|
var rate1 = max_height / img.height;
|
|
|
var rate2 = max_width / img.width;
|
|
|
var rate3 = 1;
|
|
|
var rate = Math.min(rate1, rate2, rate3);
|
|
|
//等比例缩放
|
|
|
var imgHeight = img.height * rate; //获取图片高度
|
|
|
var imgWidth = img.width * rate; //获取图片宽度
|
|
|
var imgHtml = "<img src='" + resourcesUrl + "' width='" + imgWidth + "px' height='" + imgHeight + "px'/>";
|
|
|
//弹出层
|
|
|
layer.open({
|
|
|
type: 1,//可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
|
|
|
shade: 0.6,
|
|
|
maxmin: true,
|
|
|
anim: 1,
|
|
|
title: '图片预览',
|
|
|
area: ['auto', 'auto'],
|
|
|
// skin: 'layui-layer-nobg', //没有背景色
|
|
|
shadeClose: true,
|
|
|
content: imgHtml
|
|
|
});
|
|
|
}
|
|
|
img.src = resourcesUrl;
|
|
|
}
|
|
|
|
|
|
// 绑定缩略图的点击事件
|
|
|
function bindImgClickEvent() {
|
|
|
$('.gallery-item img').on('click', function () {
|
|
|
var fullImgSrc = $(this).data('full');
|
|
|
lookPicture(fullImgSrc);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
