123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445 |
- <template>
- <!-- 换脸弹窗 -->
- <a-modal
- v-if="faceShowStatus"
- title="换脸操作"
- :visible="faceShowStatus"
- :confirmLoading="confirmLoading"
- dialog-class="change-face-modal"
- @ok="handlePolicyOperationSure"
- @cancel="handlePolicyOperationCancel"
- >
- <div class="face-right-div-p">
- <a-radio-group v-model="faceType" button-style="solid" @change="handleFaceTypeChange">
- <a-radio-button value="a">人脸合成</a-radio-button>
- <a-radio-button value="b">合成列表</a-radio-button>
- </a-radio-group>
- <span v-if="faceType === 'b'" class="add-acount-policy-btn">
- <a-button type="primary" @click="handleRefresh">刷新</a-button>
- </span>
- </div>
- <a-form-model
- v-if="faceType === 'a'"
- class="policy-operation-form"
- ref="policyOperationForm"
- :model="policyOperationForm"
- :label-col="labelCol"
- :wrapper-col="wrapperCol"
- >
- <a-form-model-item label="图片上传">
- <a-upload
- name="avatar"
- list-type="picture-card"
- class="avatar-uploader"
- :show-upload-list="false"
- :before-upload="beforeUpload"
- >
- <div v-if="imageUrl" class="upload-img-class">
- <div class="img-flex-url">
- <img :src="imageUrl" alt="avatar"/>
- </div>
- </div>
- <div v-else>
- <a-icon type="plus" style="margin-top: 10px;"/>
- <div class="ant-upload-text">Upload</div>
- </div>
- </a-upload>
- <p style="margin: 0;">1、请保证脸部无遮挡、光线充足</p>
- <p style="margin: 0;">2、视频、照片中只能出现一张人脸</p>
- <p style="margin: 0;">3、图片尺寸不能小于500*500</p>
- </a-form-model-item>
- </a-form-model>
- <div v-else-if="faceType === 'b'" class="face-right-div">
- <a-table
- class="face-right-table"
- ref="table"
- size="middle"
- bordered
- :columns="settlementColumns"
- :dataSource="dataSource"
- :pagination="false"
- >
- <span slot="input_video_url" slot-scope="text, record">
- <div style="width:100px;height:177px;margin-left:25px;">
- <video v-if="record.input_video_url" :src="record.input_video_url" style="width:100px" controls></video>
- <img v-else style="width:100px" src="@/assets/noImg.png">
- </div>
- </span>
- <span slot="input_image_url" slot-scope="text, record">
- <img v-if="text" :src="text" style="width:60px">
- <img v-if="!text" src="@/assets/noImg.png" style="width:60px">
- </span>
- <span slot="actions" slot-scope="text, record">
- <a :disabled="!faceShowList.projectId || record.status !== 'finished'" @click="handlePushData(record)">推送</a>
- <a-divider type="vertical"/>
- <a @click="handleDownLoadData(record)" :disabled="record.status !== 'finished'">下载</a>
- </span>
- </a-table>
- <a-pagination
- class="pagin-table-class"
- :total="totalAll"
- :show-total="total => `共 ${totalAll} 条`"
- size="small"
- :current="defaultCurrent"
- :defaultPageSize="2"
- @change="onShowSizeChange"
- @showSizeChange="onShowSizeChange"
- />
- </div>
- </a-modal>
- </template>
- <script>
- import {mapGetters} from 'vuex';
- import {fileInsertV2} from '@/api/actor';
- import {getAction, postAction} from '@/api/manage';
- import BMF from 'browser-md5-file';
- let COS = require('cos-js-sdk-v5');
- let cos = new COS({
- SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
- SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
- });
- export default {
- name: 'change-face',
- props: {
- status: {
- type: Boolean,
- default: false
- },
- defaultList: {
- type: Object,
- default: () => {}
- }
- },
- data() {
- return {
- confirmLoading: false,
- departValueInfoModality: [],
- departValueInfoMod: [],
- departValueInfoSence: [],
- getProjectId: '',
- defaultCurrent: 1,
- dataAllList: [],
- totalAll: 0,
- uploadType: 'face',
- dataSource: [],
- settlementColumns: [
- {
- title: '视频',
- dataIndex: 'input_video_url',
- align: 'center',
- width: 150,
- scopedSlots: {customRender: 'input_video_url'}
- },
- {
- title: '人脸',
- dataIndex: 'input_image_url',
- align: 'center',
- width: 150,
- scopedSlots: {customRender: 'input_image_url'}
- },
- {
- title: '状态',
- align: 'center',
- dataIndex: 'status',
- width: 100
- },
- {
- title: '操作',
- align: 'center',
- dataIndex: 'actions',
- width: 130,
- scopedSlots: {customRender: 'actions'}
- }
- ],
- labelCol: {span: 4},
- wrapperCol: {span: 16},
- imageUrl: '',
- faceShowStatus: false,
- faceType: 'a',
- policyOperationForm: {},
- urlResult: '',
- md5Result: ''
- };
- },
- watch: {
- status(newVal) {
- this.faceShowStatus = newVal;
- },
- defaultList(newVal) {
- if (newVal) {
- this.faceShowList = newVal;
- }
- }
- },
- methods: {
- ...mapGetters(['userInfo']),
- // 分页操作按钮
- onShowSizeChange(current, pageSize) {
- this.dataSource = [];
- this.defaultCurrent = current;
- const defaultData = [...this.dataAllList];
- this.dataSource = [...defaultData.slice(2 * current - 2, 2 * current)];
- },
- handleFaceTypeChange(e) {
- if (e.target.value === 'b') {
- this.handleInitTable();
- this.handleGetMaterialTagInfo();
- }
- },
- handleInitTable() {
- const paramsData = {
- videoMd5: this.faceShowList.projectId ? this.faceShowList.code : this.faceShowList.videoCode
- };
- this.dataSource = [];
- // http://192.168.1.204:8000
- // http://faceswap.tjyourong.com.cn
- postAction('http://faceswap.tjyourong.com.cn/jeecg-boot/task/query', paramsData).then(result => {
- if (result.code === 0) {
- this.dataAllList = result.data;
- this.dataSource = result.data.slice(0, 2);
- this.totalAll = result.data.length ? result.data.length : 0;
- }
- else {
- this.dataAllList = [];
- this.dataSource = [];
- this.totalAll = 0;
- }
- }).catch(error => {
- console.log(error, 'eeee');
- });
- },
- handleGetDetailList() {
- getAction('/ctop/materialInfo/queryById', {
- id: this.faceShowList.projectId ? this.faceShowList.code : this.faceShowList.videoCode
- }).then(res => {
- if (res.success) {
- this.getProjectId = res.result.projectId;
- }
- });
- },
- handleGetMaterialTagInfo() {
- getAction('/ctop/materialTagInfo/detail', {
- code: this.faceShowList.projectId ? this.faceShowList.code : this.faceShowList.videoCode
- }).then(res => {
- if (res.success) {
- this.departValueInfoModality = res.modalityTagList.map(item => item.tagId);
- this.departValueInfoMod = res.modTagList.map(item => item.tagId);
- this.departValueInfoSence = res.senceTagList.map(item => item.tagId);
- }
- });
- },
- // TODO 推送操作
- handlePushData(list) {
- const paramsData = {
- projectId: this.faceShowList.projectId, // 项目选择
- ascription: {
- planId: 'e9ca23d68d884d4ebb19d07889727dae',
- shotId: 'e9ca23d68d884d4ebb19d07889727dae',
- clipId: 'e9ca23d68d884d4ebb19d07889727dae'
- },
- status: '1',
- code: list.output_video_md5,
- url: list.output_video_url && list.output_video_url.split(':')[1],
- type: 'VIDEO',
- userId: this.userInfo().id,
- modalityTagList: this.departValueInfoModality, // 形式标签
- senceTagList: this.departValueInfoSence, // 场景标签
- modTagList: this.departValueInfoMod // 基调标签
- };
- const that = this;
- this.$confirm({
- title: '提示',
- content: '是否进行推送操作',
- onOk() {
- fileInsertV2(paramsData).then(res => {
- if (res.code === 0) {
- that.handlePolicyOperationCancel();
- that.$emit('sureface');
- that.$message.success('素材已经同步到未审核列表,请进入查看');
- }
- else {
- that.$message.error(res.message);
- }
- });
- }
- });
- },
- // 下载操作
- handleDownLoadData(list) {
- const randomTime = new Date().getTime() + '_check.mp4';
- fetch(list.output_video_url)
- .then(res => res.blob())
- .then(blob => {
- const a = document.createElement('a');
- document.body.appendChild(a);
- a.style.display = 'none';
- // 使用获取到的blob对象创建的url
- const url = window.URL.createObjectURL(blob);
- a.href = url;
- // 指定下载的文件名
- a.download = randomTime;
- a.click()
- document.body.removeChild(a);
- // 移除blob对象的url
- window.URL.revokeObjectURL(url);
- });
- },
- // 刷新按钮
- handleRefresh() {
- this.defaultCurrent = 1;
- this.handleInitTable();
- },
- checkTv(data) {
- const index = data.lastIndexOf(".");
- let tv_id = '';
- tv_id = data.substring(index);
- if(tv_id !== ".mp4" && tv_id !== ".rmvb" && tv_id !== ".avi" && tv_id !== ".ts") {
- return data + '.mp4';
- }
- else {
- return data;
- }
- },
- // 确定按钮
- handlePolicyOperationSure() {
- if (this.faceType === 'a') {
- this.confirmLoading = true;
- if (!this.md5Result) {
- this.$message.error('请上传图片');
- return;
- }
- const paramsData = {
- inputVideoUrl: this.checkTv(this.faceShowList.url),
- inputImageUrl: this.urlResult,
- videoMd5: this.faceShowList.projectId ? this.faceShowList.code : this.faceShowList.videoCode,
- imageMd5: this.md5Result,
- createBy: this.userInfo().id
- };
- postAction('http://faceswap.tjyourong.com.cn/jeecg-boot/task/single', paramsData).then(result => {
- if (result.code === 0) {
- this.handlePolicyOperationCancel();
- this.$emit('sureface');
- this.$message.success('图片上传成功');l
- this.confirmLoading = false;
- }
- else {
- this.$message.success('目标图片已存在,请下载视频');
- this.faceType = 'b';
- this.handleInitTable();
- this.handleGetMaterialTagInfo();
- this.confirmLoading = false;
- }
- }).catch(error => {
- this.confirmLoading = false;
- });
- }
- else {
- this.handlePolicyOperationCancel();
- }
- },
- // 取消按钮
- handlePolicyOperationCancel() {
- this.faceType = 'a';
- this.imageUrl = '';
- this.urlResult = '';
- this.md5Result = '';
- this.defaultCurrent = 1;
- this.$emit('closeface');
- },
- getBase64(img, callback) {
- const reader = new FileReader();
- reader.addEventListener('load', () => callback(reader.result));
- reader.readAsDataURL(img);
- },
- beforeUpload(info) {
- const isZip = info.type.includes('png') || info.type.includes('jpeg');
- if (!isZip) {
- this.$message.error('请上传正确类型的图片');
- this.imageUrl = '';
- this.urlResult = '';
- this.md5Result = '';
- return;
- }
- new Promise(function (resolve, reject) {
- let width = 500;
- let height = 500;
- let _URL = window.URL || window.webkitURL;
- let img = new Image();
- img.onload = function () {
- let valid = img.width >= width && img.height >= height;
- valid ? resolve() : reject();
- };
- img.src = _URL.createObjectURL(info);
- }).then(() => {
- this.handleMd5(info);
- this.cosUpload(info);
- this.getBase64(info, imageUrl => {
- this.imageUrl = imageUrl;
- });
- }, () => {
- this.$message.error('图片尺寸不能小于500*500');
- this.imageUrl = '';
- this.urlResult = '';
- this.md5Result = '';
- return Promise.reject();
- });
- },
- handleMd5(file) {
- let bmf = new BMF();
- let that = this;
- return new Promise(function (resolve, reject) {
- bmf.md5(file, (err, md5) => {
- that.md5Result = md5;
- });
- });
- },
- cosUpload(file) {
- let that = this;
- let date = new Date();
- let y = date.getFullYear();
- let MM = date.getMonth() + 1;
- MM = MM < 10 ? '0' + MM : MM;
- let d = date.getDate();
- d = d < 10 ? '0' + d : d;
- let timeElse = new Date().getTime();
- let arr = file.name.split('.');
- let str = '';
- for (let i = 0; i < arr.length; i++) {
- if (i === arr.length - 1) {
- }
- else {
- if (i === arr.length - 2) {
- str += arr[i];
- }
- else {
- str += arr[i] + '.';
- }
- }
- }
- cos.putObject(
- {
- Bucket: 'media-1301855440',
- Region: 'ap-chongqing',
- // 存储桶所在地域,必须字段
- Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
- StorageClass: 'STANDARD',
- Body: file // 上传文件对象
- },
- function (err, data) {
- if (err) {
- that.$message.error('上传失败!!!' + err);
- return;
- }
- that.loadingElse = false;
- that.urlResult = 'http://' + data.Location;
- }
- );
- }
- }
- }
- </script>
- <style lang="less">
- @import "change-face";
- </style>
|