hjq/PixelAI-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图片管理

Browse Source
This commit is contained in:
Double-_-Z 2024-12-10 10:25:46 +08:00
parent 5321fdbbe6
commit b4e4b9d5a7
6 changed files with 286 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
common/http.api.js
View File

@ -6,6 +6,9 @@ const install = (Vue, vm) => {
vm.$api.login = async (params = {}) => await vm.$u.get('/acUser/phoneLogin', params);// 手机号登录
vm.$api.register = async (params = {}) => await vm.$u.get('/acUser/phoneRegister', params);// 手机号注册
// 图片管理
vm.$api.getCpPhotoById = async (params = {}) => await vm.$u.get('/cpPhoto/all', params);// 根据标签id查询全部图片
// 应用服务
vm.$api.allServices = async (params = {}) => await vm.$u.get('/paServices/all', params);// 获取全部应用
vm.$api.singleServices = async (id) => await vm.$u.get(`/paServices/${id}`);// 获取单个应用
@ -13,12 +16,6 @@ const install = (Vue, vm) => {
// 留言板
vm.$api.addMessage = async (params = {}) => await vm.$u.post('/cpMessage', params);// 添加留言
// 百度ai调用
vm.$api.colouRize = async (params = {}) => await vm.$u.post('/AiPicture/Colourize', params);// 旧照修复
vm.$api.selfieAnime = async (params = {}) => await vm.$u.post('/AiPicture/selfie_anime', params);// 人像动漫化
// 火山引擎ai接口
vm.$api.imageDeal = async (params = {},Action,Version) => await vm.$u.post(configService.aiUrl+`?Action=${Action}&Version=${Version}`, params);// 图片处理统一接口
}
export default {

18
pages/mobile_web/home/home.vue
View File

@ -32,9 +32,9 @@
<view class="category flex" :style="item.length===5?{justifyContent: 'space-between'}:{}">
<template v-for="(category, itemIndex) in item">
<view class="category-item" @click="toDeal(category.id)">
<image :style="category.name==='人物动漫化'?{width:'115rpx'}:category.name==='证件照'?{width:'85rpx'}:{}"
:src="fileUrl+(category.icon||'autoreplace.png')"></image>
{{ category.name }}
<image :style="category.icon?{}:{width:'80rpx',height:'70rpx'}"
:src="fileUrl+(category.icon||'default-work.png')"></image>
<view>{{ category.name }}</view>
</view>
</template>
</view>
@ -393,17 +393,23 @@ export default {
height: auto;
display: flex;
justify-content: start;
flex-flow: wrap;
.category-item{
max-width: 20%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 12rpx;
color: #fff;
font-size: 28rpx;
&:active{
filter: opacity(0.8);
}
view{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: 25rpx;
}
image{
width: 110rpx;
height: 60rpx;

3
pages/mobile_web/workshops/common/imgDeal.js
View File

@ -4,6 +4,9 @@ import configService from "@/common/config.service";
const selectDealFunction = (vm,model,params,success) => {
switch(model){
case 0 :
case 1 :
case 2 :
case 3 :
diagramOfTheSketch(vm,params,success);
break;
};

22
pages/mobile_web/workshops/components/editor.vue
View File

@ -7,9 +7,9 @@
</slot>
</view>
<view class="we-content">
<u-input :placeholder="placeholder" v-model="value" :clearable="false"
type="textarea" :custom-style="{ height: '150rpx', fontSize: '25rpx', overflowY: 'scroll',
color: '#fff'}" placeholderStyle="color:#7f7c86"/>
<u-input :placeholder="placeholder" v-model="defaultValue" :clearable="false" maxlength="200"
type="textarea" :custom-style="{ height: height+'rpx', fontSize: '25rpx', overflowY: 'scroll',
color: '#fff'}" placeholderStyle="color:#7f7c86" @input="input"/>
</view>
</view>
</template>
@ -17,6 +17,10 @@
<script>
export default {
props: {
value: {
type: [String, Number],
default: ''
},
title: {
type: String,
default: '',
@ -28,11 +32,20 @@ export default {
icon: {
type: String,
default: ''
},
height: {
type: [String, Number],
default: '150'
}
},
data(){
return{
value:''
defaultValue: this.value,
}
},
methods: {
input(){
this.$emit('input', this.defaultValue);
}
}
}
@ -58,6 +71,7 @@ export default {
background: #2a233d;
border-radius: 30rpx;
padding: 30rpx;
box-shadow: 0 0 8rpx #eee;
}
}
</style>

262
pages/mobile_web/workshops/index.vue
View File

@ -19,17 +19,28 @@
{{ form.name }}
</view>
<view class="mw-upload">
<view class="mwu-cover" v-if="uploadFile==''" @click="selectImage">
<!-- 文生图-空格位 -->
<view v-if="form.type === 1 && !resultFile"></view>
<!-- 未有结果+类型为文生图可选options -->
<view class="mwu-promt" v-else-if="form.type===3 && !resultFile">
<u-input :customStyle="{color:'#dcf1fc',fontSize:'50rpx'}" v-model="form.text"
placeholder="请输入需要生成的文字" trim inputAlign="center" :clearable="false" :maxlength="6"/>
</view>
<!-- 类型为图生图类 -->
<view class="mwu-cover" v-else-if="uploadFile==''&&form.type!==3&&form.type!==1" @click="selectImage">
<u-icon name="plus-circle" size="100" color="#fff" label="上传图片" labelSize="40"
labelColor="#fff" labelPos="bottom" marginTop="25"></u-icon>
</view>
<!-- 上传了需修改图 -->
<view class="center-image" v-else-if="resultFile===''">
<image mode="widthFix" :src="uploadFile" @click="selectImage"></image>
</view>
<!-- 结果图 -->
<view class="center-image" v-else>
<image mode="widthFix" :src="ip+resultFile" @click="previewImage"></image>
</view>
<view class="selections" v-if="form.type===1">
<!-- 其他-涂抹重绘 -->
<view class="selections" v-if="!resultFile && form.type===-1">
<view class="selections-item" :style="currentSelect===index?{ backgroundImage: `url(${fileUrl+selectBackground})` }:
{ color: '#000', backgroundImage: `url(${fileUrl+noSelectBackground})` }"
v-for="(item,index) in selections" :key="index" @click="currentSelect=index">
@ -37,7 +48,9 @@
</view>
</view>
</view>
<view class="mw-editor" v-if="form.type===1">
<!-- -->
<view class="mw-editor" v-if="!resultFile && form.type===-1">
<EditorBox :icon="fileUrl+editorIcon"
placeholder="如: 衣服/鞋子/头发或者英文:clothes and shose">
<template #title>
@ -51,10 +64,39 @@
</template>
</EditorBox>
</view>
<view class="workshops-tip" v-else>
Tips：{{ resultFile ? '点击预览图片效果~' : '尝试魔法吧~~' }}
<view class="workshops-tip" v-if="form.type !== 1 || (form.type === 1 && resultFile)">
Tips：{{ resultFile ? '点击预览图片效果~' : form.tips+"~" }}
</view>
<!-- 文生图 -->
<view class="mw-editor" v-if="!resultFile && form.type===1">
<EditorBox :height="200" :icon="fileUrl+editorIcon" title="提示词"
v-model="form.text" placeholder="请输入描述的提示词~~"/>
</view>
<!-- 提示文字 -->
<view class="mw-editor" v-if="!resultFile && form.type===3">
<EditorBox :icon="fileUrl+editorIcon" title="提示词" v-model="form.promt"
placeholder="请输入描述的提示词~~"/>
</view>
<!-- 选项生图 -->
<view class="mw-editor" v-if="!resultFile && (form.type===2||form.type===3 || form.type === 1)">
<u-section title="类型选择" color="#fff" :right="false" lineColor="#c2ea04" fontSize="40" @click="toList"></u-section>
<view class="section-options">
<u-tag v-for="(item,index) in getOptions" :key="item.id" :index="index"
:text="item.optionName" @click="selectElement" :class="selectElementIndex===index?'u-tag-select':''"></u-tag>
<u-tag v-if="form.options.length>9" :index="-1" :class="selectElementIndex>=getOptions.length?'u-tag-select':''"
text="更多" @click="showMoreOptions = true"></u-tag>
</view>
</view>
<!-- 换衣选择 -->
<view class="mw-editor" v-if="!resultFile && form.type===4">
<DressSelect />
</view>
</view>
<view class="workshops-btn">
<u-button class="wbu-btn" @click="startDeal" v-if="resultFile===''"
ripple :hairLine="false" shape="circle" rippleBgColor="#f0fdbf" :loading='dotLoading'>
@ -70,8 +112,26 @@
<u-icon :name="fileUrl+'change.png'" size="50" @click="changeFunction"></u-icon>
</view>
</view>
<!-- 更多类型 -->
<u-popup class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
closeable close-icon="arrow-down" close-icon-color="#fff">
<view class="op-content">
<view class="op-top">
<u-icon name="tags" size="42" label="更多类型" color="#a7b6b8"
label-size="35" label-color="#a7b6b8" margin-left="20"></u-icon>
</view>
<scroll-view :scrollY="true" class="options-list">
<view class="section-options">
<u-tag v-for="(item,index) in form.options" :key="item.id" :index="index"
:text="item.optionName" @click="selectElement" :class="selectElementIndex===index?'u-tag-select':''"></u-tag>
</view>
</scroll-view>
</view>
</u-popup>
<u-toast ref="uToast"></u-toast>
<DotLoading :show="dotLoading" />
<Loading :show="loading"></Loading>
</view>
</template>
@ -79,13 +139,17 @@
import configService from '@/common/config.service.js';
import { tools } from '@/utils/utils.js';
import EditorBox from './components/editor.vue';
import DressSelect from './components/dress_select.vue';
import { selectDealFunction } from './common/imgDeal'
import { toList } from './common/functionalClassification'
export default {
components: {
EditorBox
EditorBox, DressSelect
},
data(){
return{
// 全加载
loading: false,
// 顶部距离等级
topLevel: 0,
// 基础路径
@ -131,10 +195,17 @@ export default {
fun: ()=>{this.download()}
},
reUpload: {
name: '重新上传',
name: '重新制图',
icon: 'camera',
background: 'linear-gradient(to right, #c2fc3b 0%, #c2ffd8 51%, #c2fc3b 100%)',
fun: ()=>{this.selectImage()}
fun: ()=>{
if(this.form.type===0)
this.selectImage();
else{
this.resultFile = '';
this.uploadFile = '';
}
}
},
saveWork: {
name: '保存作品',
@ -152,7 +223,11 @@ export default {
// 过渡动画
transition: false,
// 图片处理加载动画
dotLoading: false
dotLoading: false,
// 元素选择下标
selectElementIndex: '',
// 弹窗显示更多选项
showMoreOptions: false
}
},
// #ifndef H5
@ -184,9 +259,18 @@ export default {
this.form.id = options.id;
this.getForm();
},
computed: {
getOptions(){
let options = this.form.options;
const length = this.form.options.length;
return length > 9 ? options.slice(0,8) : options;
}
},
methods: {
// 获取ai功能详情
async getForm(){
this.loading = true;
try{
let res = await this.$api.singleServices(this.form.id);
if(res.success){
res.data.type = Number(res.data.type);
@ -194,6 +278,10 @@ export default {
}else{
this.$refs.uToast.show({type:'error',title: "ai功能暂未开放!"});
}
}catch(e){}
finally{
this.loading = false;
}
},
// 返回
back(){
@ -223,20 +311,18 @@ export default {
},
// 预览图片
previewImage(){
tools.methods.lookImage(0,[this.ip+this.resultFile,this.uploadFile]);
const previewImages = [this.ip+this.resultFile];
if(this.uploadFile) previewImages.push(this.uploadFile);
tools.methods.lookImage(0,previewImages);
},
// 开始处理图片
async startDeal(){
try{
this.dotLoading = true;
let that = this;
if(this.uploadFile===''){
this.$refs.uToast.show({type:'error',title: "请上传图片!"});
this.dotLoading = false;
return;
}
if(!this.legalJudge()) return;
// 再实际处理
selectDealFunction(that,that.form.type,that.getParams(that.form.type),
selectDealFunction(that,that.form.type,that.getParams(that.form),
(path)=>{
that.resultFile = path;
that.$refs.uToast.show({type:'success',title: `${that.form.name}成功!`});
@ -247,16 +333,68 @@ export default {
}finally{
}
},
// 表单合法判断
legalJudge(){
const currentType = this.form.type;
if(currentType !== 3 && currentType !== 1 && this.uploadFile===''){
this.$refs.uToast.show({type:'error',title: "请上传图片!"});
this.dotLoading = false;
return false;
}
if(currentType === 1){
if(this.selectElementIndex === '' || !this.form.text){
this.$refs.uToast.show({type:'error',title: "完善信息!"});
this.dotLoading = false;
return false;
}
}
if(currentType === 2 && this.selectElementIndex === ''){
this.$refs.uToast.show({type:'error',title: "请选择图片元素!"});
this.dotLoading = false;
return false;
}
if(currentType === 3){
if(this.selectElementIndex === '' || !this.form.text || !this.form.promt){
this.$refs.uToast.show({type:'error',title: "完善信息!"});
this.dotLoading = false;
return false;
}
}
return true;
},
// 获取参数值
getParams(type){
getParams({id, type, options, text, promt}){
let result,that = this;
switch(type){
case 0 :
result = {
serviceId: that.form.id,
serviceId: id,
filePath: that.uploadFile,
}
break;
case 1 :
result = {
serviceId: id,
option: options[that.selectElementIndex].optionKey,
text: text,
}
break;
case 2 :
result = {
serviceId: id,
filePath: that.uploadFile,
option: options[that.selectElementIndex].optionKey
}
break;
case 3 :
result = {
serviceId: id,
option: options[that.selectElementIndex].optionKey,
text: text,
promt: promt
}
break;
}
return result;
},
@ -348,7 +486,15 @@ export default {
setTimeout(()=>{
this.transition = false;
},500)
}
},
// 元素选择
selectElement(index){
this.selectElementIndex = index;
// this.form.options[index];
},
// 导入的方法
toList,
}
}
</script>
@ -404,6 +550,12 @@ export default {
display: flex;
flex-direction: column;
margin: 15rpx 100rpx;
.mwu-promt{
height: 100rpx;
margin-top: 120rpx;
display: flex;
align-items: center;
}
.mwu-cover{
width: 100%;
height: 550rpx;
@ -451,7 +603,7 @@ export default {
}
}
.mw-editor{
margin: 12rpx 46rpx;
margin: 50rpx 46rpx 12rpx;
display: flex;
flex-direction: column;
.slot{
@ -459,6 +611,32 @@ export default {
font-size: 32rpx;
font-weight: bold;
}
.section-options{
margin-top: 40rpx;
display: grid;
grid-gap: 30rpx;
grid-template-columns: repeat(3,1fr);
.u-tag{
width: 200rpx;
height: 80rpx;
font-size: 28rpx;
display: flex;
color: rgba(41,121,255,0.6);
background-color: rgba(236,245,255,0.8);
align-items: center;
justify-content: center;
&:active{
opacity: 0.8;
}
}
.u-tag-select{
box-shadow: 0 0 15rpx #eee;
color: #2979ff;
background-color: rgba(236,245,255,1);
}
}
}
.workshops-tip{
margin-top: 70rpx;
@ -507,6 +685,50 @@ export default {
}
}
}
.options-popup{
.op-content{
background-color: #2D3240;
padding: 10rpx 25rpx;
display: flex;
flex-direction: column;
.op-top{
height: 80rpx;
display: flex;
align-items: center;
}
.options-list{
height: 800rpx;
color: #a7b6b8;
width: 100%;
margin-top: 20rpx;
.section-options{
display: grid;
grid-gap: 30rpx;
grid-template-columns: repeat(3,1fr);
.u-tag{
width: 200rpx;
height: 80rpx;
font-size: 28rpx;
display: flex;
color: rgba(41,121,255,0.6);
background-color: rgba(236,245,255,0.8);
align-items: center;
justify-content: center;
&:active{
opacity: 0.8;
}
}
.u-tag-select{
box-shadow: 0 0 15rpx #eee;
color: #2979ff;
background-color: rgba(236,245,255,1);
}
}
}
}
}
@keyframes fadeIn {
from {
opacity: 0;

2
uview-ui/components/u-tag/u-tag.vue
View File

@ -114,7 +114,7 @@
// 文字颜色（如果有此值，会覆盖type值的颜色）
if(this.color) style.color = this.color;
// tag的背景颜色（如果有此值，会覆盖type值的颜色）
if(this.bgColor) style.backgroundColor = this.bgColor;
if(this.bgColor) style.background = this.bgColor;
// 如果是镂空型tag，没有传递边框颜色（borderColor）的话，使用文字的颜色（color属性）
if(this.mode == 'plain' && this.color && !this.borderColor) style.borderColor = this.color;
else style.borderColor = this.borderColor;