mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
fix(image-cutout|history): some bug
This commit is contained in:
parent
3ad6a5a7dd
commit
aaf6605ac6
@ -2,7 +2,7 @@
|
|||||||
* @Author: ShawnPhang
|
* @Author: ShawnPhang
|
||||||
* @Date: 2024-03-03 19:00:00
|
* @Date: 2024-03-03 19:00:00
|
||||||
* @Description: 裁剪组件
|
* @Description: 裁剪组件
|
||||||
* @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
|
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||||
* @Date: 2024-03-03 19:00:00
|
* @Date: 2024-03-03 19:00:00
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -12,7 +12,7 @@
|
|||||||
<upload-filled style="width: 64px; height: 64px" />
|
<upload-filled style="width: 64px; height: 64px" />
|
||||||
<div class="el-upload__text">在此拖入或选择<em>上传图片</em></div>
|
<div class="el-upload__text">在此拖入或选择<em>上传图片</em></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="el-upload__tip">服务器带宽过低,为了更好的体验,请上传 2M 内的图片</div>
|
<div class="el-upload__tip">服务器带宽小,为了更好的体验,请上传 2M 内的图片</div>
|
||||||
</uploader>
|
</uploader>
|
||||||
<el-progress v-if="!state.cutImage && state.progressText" :percentage="state.progress">
|
<el-progress v-if="!state.cutImage && state.progressText" :percentage="state.progress">
|
||||||
<el-button text>
|
<el-button text>
|
||||||
@ -29,10 +29,10 @@
|
|||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button v-show="state.rawImage && state.toolModel" @click="clear">清空重选</el-button>
|
<el-button v-show="state.cutImage && state.toolModel" @click="clear">清除重选</el-button>
|
||||||
<el-button v-show="state.cutImage" type="primary" plain @click="edit">进入编辑模式</el-button>
|
<el-button v-show="state.cutImage" type="primary" plain @click="edit">进入编辑模式</el-button>
|
||||||
<el-button v-show="state.cutImage && state.toolModel" type="primary" plain @click="download"> 下载 </el-button>
|
<el-button v-show="state.cutImage && state.toolModel" type="primary" @click="download"> 下载 </el-button>
|
||||||
<el-button v-show="state.cutImage && !state.toolModel" v-loading="state.loading" type="primary" plain @click="cutDone"> {{ state.loading ? '上传中..' : '完成抠图' }} </el-button>
|
<el-button v-show="state.cutImage && !state.toolModel" v-loading="state.loading" type="primary" @click="cutDone"> {{ state.loading ? '上传中..' : '完成抠图' }} </el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<ImageExtraction ref="matting" />
|
<ImageExtraction ref="matting" />
|
||||||
@ -85,12 +85,13 @@ const raw = ref(null)
|
|||||||
const matting = ref<typeof ImageExtraction | null>(null)
|
const matting = ref<typeof ImageExtraction | null>(null)
|
||||||
|
|
||||||
const open = (file: File) => {
|
const open = (file: File) => {
|
||||||
|
clear()
|
||||||
state.loading = false
|
state.loading = false
|
||||||
state.show = true
|
state.show = true
|
||||||
// store.commit('setShowMoveable', false)
|
|
||||||
controlStore.setShowMoveable(false)
|
controlStore.setShowMoveable(false)
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (file) {
|
if (file) {
|
||||||
|
state.toolModel = false // 在编辑模式打开则不展示工具模式下的下载和清除按钮
|
||||||
handleUploaderLoad(file)
|
handleUploaderLoad(file)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -106,13 +107,10 @@ const handleUploaderLoad = (file: File) => {
|
|||||||
const resultImage = URL.createObjectURL(result)
|
const resultImage = URL.createObjectURL(result)
|
||||||
state.rawImage && (state.cutImage = resultImage)
|
state.rawImage && (state.cutImage = resultImage)
|
||||||
requestAnimationFrame(run)
|
requestAnimationFrame(run)
|
||||||
|
|
||||||
})
|
})
|
||||||
state.toolModel = false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
// store.commit('setShowMoveable', true)
|
|
||||||
controlStore.setShowMoveable(true)
|
controlStore.setShowMoveable(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -127,7 +125,6 @@ const download = () => {
|
|||||||
const clear = () => {
|
const clear = () => {
|
||||||
URL.revokeObjectURL(state.rawImage)
|
URL.revokeObjectURL(state.rawImage)
|
||||||
state.rawImage = ''
|
state.rawImage = ''
|
||||||
// URL.revokeObjectURL(state.cutImage)
|
|
||||||
state.cutImage = ''
|
state.cutImage = ''
|
||||||
state.percent = 0
|
state.percent = 0
|
||||||
state.offsetWidth = 0
|
state.offsetWidth = 0
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
* @Date: 2023-09-14 11:33:44
|
* @Date: 2023-09-14 11:33:44
|
||||||
* @Description: 依赖不能直接引入,所以暂时不使用WebWorker
|
* @Description: 依赖不能直接引入,所以暂时不使用WebWorker
|
||||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||||
* @LastEditTime: 2024-04-18 20:52:17
|
* @LastEditTime: 2024-04-19 03:07:18
|
||||||
*/
|
*/
|
||||||
import diff from 'microdiff'
|
import diff from 'microdiff'
|
||||||
import { produce, applyPatches, enablePatches } from 'immer'
|
import { produce, applyPatches, enablePatches } from 'immer'
|
||||||
@ -25,6 +25,7 @@ export default class {
|
|||||||
this.notifi = cb
|
this.notifi = cb
|
||||||
}
|
}
|
||||||
public postMessage(e: any) {
|
public postMessage(e: any) {
|
||||||
|
if (!e) return
|
||||||
if (e.op === 'done') {
|
if (e.op === 'done') {
|
||||||
if (!cloneData) return
|
if (!cloneData) return
|
||||||
let fork = JSON.parse(cloneData)
|
let fork = JSON.parse(cloneData)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user