Skip to content

GitLab

Q
qk_admin
Commit e3d5185e authored by yaya's avatar yaya
Browse files
Options

feat:钱币图片添加编辑功能

parent da88a4da
Hide whitespace changes
Inline Side-by-side
Showing with 732 additions and 219 deletions
src/views/goods/components/CutEditImageDialog.vue 0 → 100644
View file @ e3d5185e
<template>
<div>
<el-dialog
:visible.sync="showCutEditDialog"
:before-close="handleClose"
width="800px"
height="800px"
title="图片操作">
<!-- <div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleSelectSuccess">确定</el-button>
</div>-->
<div>
<div class="tool">
<!-- <div>第二步：对去完水印的图片进行抠图</div>-->
<div v-if="!imageBase64 || isCancel" class="select">
<el-button style="width: 95px" @click="handleRemoveLama">去水印</el-button>
<el-button style="width: 150px;margin-top: 20px" @click="handleCut">裁剪</el-button>
</div>
<div v-if="imageBase64 && !isCancel" class="cut">
<VuePictureCut
ref="pictureCut"
:src="imageBase64"
:init-angle="cutInfo.initAngle"
:msk-option="cutInfo.mskOption"
:menu-thickness="cutInfo.menuThickness"
:menu-position="cutInfo.menuPosition"
@on-change="cutChange"
>
<VuePictureCutMask
:width="mastInfo.width"
:height="mastInfo.height"
:is-round="mastInfo.isRound"
:resize="mastInfo.resize"
/>
</VuePictureCut>
</div>
<div v-if="imageBase64 && !isCancel" class="cut-menu">
<div class="shape">
<div>
裁剪形状：
</div>
<div :class="{active: mastInfo.isRound}" class="shape_item" @click="handleChangeShape(1)">
圆形
</div>
<div :class="{active: !mastInfo.isRound}" class="shape_item" @click="handleChangeShape(2)">
正方形
</div>
</div>
<div class="cut-menu">
<vue-picture-cut-menu
:root="pictureCut"
:max-pixel="menuInfo.maxPixel"
:encoder-options="menuInfo.encoderOptions"
:format="menuInfo.format"
theme="gray"
size-auto-name="auto"
size-raw-name="raw"
menu-rotate-name="Rotate"
cancel-name="重置"
confirm-name="裁剪"
@on-change="cutChange"
@on-cancel="cutCancel"
/>
</div>
</div>
</div>
</div>
</el-dialog>
<LamaImageDialog
v-if="showLamaImageDialog"
:show-lama-dialog="showLamaImageDialog"
@closeLamaDialog="showLamaImageDialog = false"
@imageBase64="handleGetImageBase64" />
</div>
</template>
<script>
import { VuePictureCut, VuePictureCutMask, VuePictureCutMenu } from 'vue-picture-cut'
import SelectImageDialog from './selectImageDialog'
import LamaImageDialog from './lamaImageDialog'
export default {
name: 'CutEditImageDialog',
components: { LamaImageDialog, SelectImageDialog, VuePictureCut, VuePictureCutMask, VuePictureCutMenu },
props: {
showCutEditDialog: {
type: Boolean,
default: true
},
/* imageBase64: {
type: String,
default: ''
},*/
editImageUrl: {
type: String,
default: ''
}
},
data() {
return {
pictureCut: null,
// src: this.imageBase64,
cutInfo: {
initAngle: 0,
maxPixel: 500,
encoderOptions: 0.8
},
mastInfo: {
width: 1,
height: 1,
isRound: true,
resize: true
},
menuInfo: {
format: 'image/jpeg/png',
maxPixel: 500,
encoderOptions: 0.8
},
showLamaImageDialog: false,
imageBase64: '',
isCancel: false
}
},
watch: {
imageBase64() {
this.init()
}
},
methods: {
// 初始化图片裁剪工具
// 初始化图片裁剪工具
init() {
if (this.imageBase64) {
setTimeout(() => {
this.pictureCut = this.$refs['pictureCut']
console.log('==7777777777==', this.pictureCut)
}, 1000)
}
},
/**
* 关闭
*/
handleClose() {
this.$emit('cutEditImageDialogClose')
},
// 裁剪图片结果
cutChange(res) {
this.imageBase64 = ''
this.$emit('cutEditSuccess', this.editImageUrl, res.base64)
// console.log('=====blob', this.blob)
console.log('=====base64', this.base64)
},
handlerGetBase64(currentImageUrl, imgUrlBase64) {
this.changeImageUrl = currentImageUrl
if (imgUrlBase64) {
this.imageBase64 = imgUrlBase64
} else {
this.$message.error('获取失败，请重试...')
}
},
// 裁剪工具取消
cutCancel() {
this.isCancel = true
},
// 选择形状
handleChangeShape(type) {
if (type === 1) {
this.mastInfo.isRound = true
} else {
this.mastInfo.isRound = false
}
},
/**
* 去除水印
*/
handleRemoveLama() {
this.isCancel = false
this.copyContent(this.editImageUrl)
this.$message.success('复制链接成功，粘贴链接去水印吧')
this.showLamaImageDialog = true
},
/**
* 复制链接
*/
copyContent(content) {
// 复制结果
let copyResult = true
// 设置想要复制的文本内容
const text = content || ''
// 判断是否支持clipboard方式
if (window.navigator.clipboard) {
// 利用clipboard将文本写入剪贴板（这是一个异步promise）
window.navigator.clipboard.writeText(text).then((res) => {
console.log('复制成功')
// 返回复制操作的最终结果
return copyResult
}).catch((err) => {
copyResult = false
console.log('复制失败', err)
// 返回复制操作的最终结果
return copyResult
})
} else {
// 不支持clipboard方式 则采用document.execCommand()方式
// 创建一个input元素
const inputDom = document.createElement('textarea')
// 设置为只读 防止移动端手机上弹出软键盘
inputDom.setAttribute('readonly', 'readonly')
// 给input元素赋值
inputDom.value = text
// 将创建的input添加到body
document.body.appendChild(inputDom)
// 选中input元素的内容
inputDom.select()
// 执行浏览器复制命令
// 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
// Input要在正常的编辑状态下原生复制方法才会生效
const result = document.execCommand('copy')
// 判断是否复制成功
if (result) {
console.log('复制成功')
} else {
console.log('复制失败')
copyResult = false
}
// 复制操作后再将构造的标签 移除
document.body.removeChild(inputDom)
// 返回复制操作的最终结果
return copyResult
}
},
/**
* 去除水印后的base64结果
* @param imgUrlBase64
*/
handleGetImageBase64(imgUrlBase64) {
this.imageBase64 = imgUrlBase64
this.showLamaImageDialog = false
},
/**
* 点击裁剪，生成base64图片
*/
async handleCut() {
const base64Str = await this.getBase64Image(this.editImageUrl)
this.imageBase64 = base64Str
this.isCancel = false
},
/** url 转换成img */
getBase64Image(img) {
return this.downloadImage(img).then(image => {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
const ext = img.substring(img.lastIndexOf('.') + 1).toLowerCase()
const dataURL = canvas.toDataURL('image/' + ext)
return dataURL
})
},
downloadImage(url) {
return new Promise(resolve => {
const img = new Image()
if (!url) {
resolve(null)
return
}
if (url.indexOf('data:image') !== 0) {
img.crossOrigin = 'Anonymous'
}
img.src = url
img.onload = () => {
resolve(img)
}
img.onerror = (err) => {
console.log(img.src)
console.error(err)
resolve(null)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.tool {
.select {
width: 100%;
height: 230px;
overflow: hidden;
margin: 0 0 20px;
background: white;
border: 1px dashed transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.25em, white 0, white 0.75em);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cut {
width: 100%;
height: 400px;
margin-top: 20px;
}
.cut-menu {
.shape {
display: flex;
flex-direction: row;
height: 80px;
padding-bottom: 20px;
background: #35362e;
justify-content: center;
color: #bbb;
font-size: 14px;
align-items: center;
.shape_item {
border: 1px solid #444;
border-radius: 2px;
width: 60px;
height: 28px;
display: inline-block;
text-align: center;
line-height: 24px;
margin-right: 20px;
&.active {
border: 1px solid #bbb;
}
}
}
}
.tool_content {
margin-left: 20px;
}
}
</style>
src/views/goods/components/CutImageDialog.vue 0 → 100644
View file @ e3d5185e
<template>
<div>
<el-dialog
:visible.sync="showCutDialog"
:before-close="handleClose"
width="800px"
height="800px"
title="图片裁剪">
<!-- <div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleSelectSuccess">确定</el-button>
</div>-->
<div>
<div class="tool">
<!-- <div>第二步：对去完水印的图片进行抠图</div>-->
<div v-if="!imageBase64" class="select">
<el-button style="width: 95px" @click="handleSelectImage(0)">在线选图</el-button>
<el-button style="width: 150px;margin-top: 20px" @click="handleSelectImage(1)">在线选图，去水印</el-button>
<el-button
type="primary"
style="position: relative;overflow: hidden;margin-top: 20px;margin-left: 0px; ">本地上传
<div id="clone_input">
<input
style="position: absolute;top: 0;left: 0;width: 120px;height: 50px;opacity: 0;"
type="file"
accept="image/*"
@change="fileChange">
</div>
</el-button>
</div>
<div v-if="imageBase64" class="cut">
<VuePictureCut
ref="pictureCut"
:src="imageBase64"
:init-angle="cutInfo.initAngle"
:msk-option="cutInfo.mskOption"
:menu-thickness="cutInfo.menuThickness"
:menu-position="cutInfo.menuPosition"
@on-change="cutChange"
>
<VuePictureCutMask
:width="mastInfo.width"
:height="mastInfo.height"
:is-round="mastInfo.isRound"
:resize="mastInfo.resize"
/>
</VuePictureCut>
</div>
<div v-if="imageBase64" class="cut-menu">
<div class="shape">
<div>
裁剪形状：
</div>
<div :class="{active: mastInfo.isRound}" class="shape_item" @click="handleChangeShape(1)">
圆形
</div>
<div :class="{active: !mastInfo.isRound}" class="shape_item" @click="handleChangeShape(2)">
正方形
</div>
</div>
<div class="cut-menu">
<vue-picture-cut-menu
:root="pictureCut"
:max-pixel="menuInfo.maxPixel"
:encoder-options="menuInfo.encoderOptions"
:format="menuInfo.format"
theme="gray"
size-auto-name="auto"
size-raw-name="raw"
menu-rotate-name="Rotate"
cancel-name="重置"
confirm-name="裁剪"
@on-change="cutChange"
@on-cancel="cutCancel"
/>
</div>
</div>
</div>
</div>
</el-dialog>
<SelectImageDialog
v-if="selectImageDialogVisible"
:select-image-dialog-visible="selectImageDialogVisible"
:select-type="selectType"
:image-list="imageList"
@closeDialog="selectImageDialogVisible = false"
@imageBase64Str="handlerGetBase64" />
</div>
</template>
<script>
import { VuePictureCut, VuePictureCutMask, VuePictureCutMenu } from 'vue-picture-cut'
import SelectImageDialog from './selectImageDialog'
export default {
name: 'CutImageDialog',
components: { SelectImageDialog, VuePictureCut, VuePictureCutMask, VuePictureCutMenu },
props: {
showCutDialog: {
type: Boolean,
default: true
},
imageType: {
type: Number,
default: 1
},
/* imageBase64: {
type: String,
default: ''
},*/
imageList: {
type: Array,
default: () => []
},
editImageUrl: {
type: String,
default: ''
}
},
data() {
return {
pictureCut: null,
// src: this.imageBase64,
cutInfo: {
initAngle: 0,
maxPixel: 500,
encoderOptions: 0.8
},
mastInfo: {
width: 1,
height: 1,
isRound: true,
resize: true
},
menuInfo: {
format: 'image/jpeg/png',
maxPixel: 500,
encoderOptions: 0.8
},
selectImageDialogVisible: false,
selectType: 0,
imageBase64: ''
}
},
watch: {
imageBase64() {
this.init()
}
},
methods: {
// 初始化图片裁剪工具
// 初始化图片裁剪工具
init() {
if (this.imageBase64) {
setTimeout(() => {
this.pictureCut = this.$refs['pictureCut']
console.log('==7777777777==', this.pictureCut)
}, 1000)
}
},
/**
* 关闭
*/
handleClose() {
this.$emit('cutImageDialogClose')
},
// 选择图片
handleSelectImage(type) {
if (!this.imageList || this.imageList.length === 0) {
this.$message.error('无线上图片选择')
return
}
this.selectType = type
this.selectImageDialogVisible = true
},
// 选择本地图片结果
fileChange(e) {
if (e.target.files.length) {
this.imageBase64 = URL.createObjectURL(e.target.files[0])
// this.$emit('selectSuccess', URL.createObjectURL(e.target.files[0]))
}
console.log('imageBase64====', this.imageBase64)
},
// 裁剪图片结果
cutChange(res) {
this.imageBase64 = ''
this.$emit('cutSuccess', this.imageType, res)
// console.log('=====blob', this.blob)
console.log('=====base64', this.base64)
},
handlerGetBase64(currentImageUrl, imgUrlBase64) {
this.changeImageUrl = currentImageUrl
if (imgUrlBase64) {
this.imageBase64 = imgUrlBase64
} else {
this.$message.error('获取失败，请重试...')
}
},
// 裁剪工具取消
cutCancel() {
this.$emit('selectSuccess', '')
},
// 选择形状
handleChangeShape(type) {
if (type === 1) {
this.mastInfo.isRound = true
} else {
this.mastInfo.isRound = false
}
}
}
}
</script>
<style lang="scss" scoped>
.tool {
.select {
width: 100%;
height: 230px;
overflow: hidden;
margin: 0 0 20px;
background: white;
border: 1px dashed transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.25em, white 0, white 0.75em);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cut {
width: 100%;
height: 400px;
margin-top: 20px;
}
.cut-menu {
.shape {
display: flex;
flex-direction: row;
height: 80px;
padding-bottom: 20px;
background: #35362e;
justify-content: center;
color: #bbb;
font-size: 14px;
align-items: center;
.shape_item {
border: 1px solid #444;
border-radius: 2px;
width: 60px;
height: 28px;
display: inline-block;
text-align: center;
line-height: 24px;
margin-right: 20px;
&.active {
border: 1px solid #bbb;
}
}
}
}
.tool_content {
margin-left: 20px;
}
}
</style>
src/views/goods/components/selectImageDialog.vue
View file @ e3d5185e
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
title="选择图片"> title="选择图片">
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取消</el-button> <el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleSelectSuccess">确定</el-button> <el-button type="primary" @click="handleSelectCommit">确定</el-button>
</div> </div>
<div class="list"> <div class="list">
<div v-for="(item, index) in imageList" :key="item + index" class="select_item" @click="handleCheckImg(index)"> <div v-for="(item, index) in imageList" :key="item + index" class="select_item" @click="handleCheckImg(index)">
...@@ -65,7 +65,7 @@ export default { ...@@ -65,7 +65,7 @@ export default {
handleCheckImg(index) { handleCheckImg(index) {
this.currentPosition = index this.currentPosition = index
}, },
handleSelectSuccess() { handleSelectCommit() {
if (this.currentPosition === -1) { if (this.currentPosition === -1) {
this.$message.error('请选择图片') this.$message.error('请选择图片')
return return
...@@ -76,13 +76,14 @@ export default { ...@@ -76,13 +76,14 @@ export default {
} }
if (this.selectType === 1) { // 去水印 if (this.selectType === 1) { // 去水印
this.copyContent(this.imageList[this.currentPosition]) this.copyContent(this.imageList[this.currentPosition])
this.$message.info('复制链接成功，粘贴链接去水印吧') this.$message.success('复制链接成功，粘贴链接去水印吧')
this.showLamaImageDialog = true this.showLamaImageDialog = true
this.currentImageUrl = this.imageList[this.currentPosition] this.currentImageUrl = this.imageList[this.currentPosition]
} else { } else {
this.$emit('selectSuccess', this.imageList[this.currentPosition]) this.handleSelectSuccess(this.imageList[this.currentPosition])
/* this.$emit('selectSuccess', this.imageList[this.currentPosition])
this.$emit('closeDialog') this.$emit('closeDialog')
this.currentImageUrl = '' this.currentImageUrl = ''*/
} }
}, },
handleGetImageBase64(imgUrlBase64) { handleGetImageBase64(imgUrlBase64) {
...@@ -90,6 +91,50 @@ export default { ...@@ -90,6 +91,50 @@ export default {
this.showLamaImageDialog = false this.showLamaImageDialog = false
this.$emit('closeDialog') this.$emit('closeDialog')
}, },
// 选择线上图片后的图片链接
async handleSelectSuccess(url) {
this.changeImageUrl = url
const base64Str = await this.getBase64Image(url)
this.$emit('imageBase64Str', this.currentImageUrl, base64Str)
this.showLamaImageDialog = false
this.$emit('closeDialog')
console.log('=====&&&&==', base64Str)
},
/** url 转换成img */
getBase64Image(img) {
return this.downloadImage(img).then(image => {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
const ext = img.substring(img.lastIndexOf('.') + 1).toLowerCase()
const dataURL = canvas.toDataURL('image/' + ext)
return dataURL
})
},
downloadImage(url) {
return new Promise(resolve => {
const img = new Image()
if (!url) {
resolve(null)
return
}
if (url.indexOf('data:image') !== 0) {
img.crossOrigin = 'Anonymous'
}
img.src = url
img.onload = () => {
resolve(img)
}
img.onerror = (err) => {
console.log(img.src)
console.error(err)
resolve(null)
}
})
},
copyContent(content) { copyContent(content) {
// 复制结果 // 复制结果
let copyResult = true let copyResult = true
......
src/views/goods/infoSet.vue
View file @ e3d5185e
...@@ -25,8 +25,9 @@ ...@@ -25,8 +25,9 @@
<div class="detail_image"> <div class="detail_image">
<div class="detail_title">{{ `钱币图片：` }}</div> <div class="detail_title">{{ `钱币图片：` }}</div>
<div class="list"> <div class="list">
<div v-for="(item, index) in imageList" :key="item + index" class="select_item" @click="handleShowLargeDialog(item)"> <div v-for="(item, index) in imageList" :key="item + index" class="select_item" >
<img :src="item" class="gallery"> <img :src="item" class="gallery" @click="handleShowLargeDialog(item)">
<div class="edit" @click="handlerChangeImage(item)">编辑</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -34,78 +35,12 @@ ...@@ -34,78 +35,12 @@
</el-card> </el-card>
<div class="info"> <div class="info">
<div class="info_left"> <div class="info_left">
<el-card> <!-- <el-card>
<div> <div>
<div>第一步：请选择图片，去水印，并保存图片（若无需去水印，可直接进行第二步抠图）</div> <div>第一步：请选择图片，去水印，并保存图片（若无需去水印，可直接进行第二步抠图）</div>
<el-button type="primary" style="margin-top: 20px" @click="handleSelectImage(1)">选择图片，去水印</el-button> <el-button type="primary" style="margin-top: 20px" @click="handleSelectImage(1)">选择图片，去水印</el-button>
</div> </div>
</el-card> </el-card>-->
<el-card style="margin-top: 20px">
<div class="tool">
<div>第二步：对去完水印的图片进行抠图</div>
<div v-if="!src && isShowCutImage" class="select">
<el-button style="width: 95px" @click="handleSelectImage(0)">在线选图</el-button>
<el-button
type="primary"
style="position: relative;overflow: hidden;margin-top: 20px;margin-left: 0px; ">本地上传
<div id="clone_input">
<input
style="position: absolute;top: 0;left: 0;width: 120px;height: 50px;opacity: 0;"
type="file"
accept="image/*"
@change="fileChange">
</div>
</el-button>
</div>
<div v-if="src && isShowCutImage" class="cut">
<VuePictureCut
ref="pictureCut"
:src="src"
:init-angle="cutInfo.initAngle"
:msk-option="cutInfo.mskOption"
:menu-thickness="cutInfo.menuThickness"
:menu-position="cutInfo.menuPosition"
@on-change="cutChange"
>
<VuePictureCutMask
:width="mastInfo.width"
:height="mastInfo.height"
:is-round="mastInfo.isRound"
:resize="mastInfo.resize"
/>
</VuePictureCut>
</div>
<div v-if="isShowCutImage" class="cut-menu">
<div class="shape">
<div>
裁剪形状：
</div>
<div :class="{active: mastInfo.isRound}" class="shape_item" @click="handleChangeShape(1)">
圆形
</div>
<div :class="{active: !mastInfo.isRound}" class="shape_item" @click="handleChangeShape(2)">
正方形
</div>
</div>
<div class="cut-menu">
<vue-picture-cut-menu
:root="pictureCut"
:max-pixel="menuInfo.maxPixel"
:encoder-options="menuInfo.encoderOptions"
:format="menuInfo.format"
theme="gray"
size-auto-name="auto"
size-raw-name="raw"
menu-rotate-name="Rotate"
cancel-name="重置"
confirm-name="裁剪"
@on-change="cutChange"
@on-cancel="cutCancel"
/>
</div>
</div>
</div>
</el-card>
<el-card class="box-card"> <el-card class="box-card">
<div class="image_result"> <div class="image_result">
<div class="image_result--left"> <div class="image_result--left">
...@@ -120,8 +55,8 @@ ...@@ -120,8 +55,8 @@
:href="base64" :href="base64"
:style="{'background-image': `url(${newSrc})`}" :style="{'background-image': `url(${newSrc})`}"
class="content_img--show" class="content_img--show"
@click="deleteCutImage(1)"> @click="addCutImage(1)">
<i v-if="newSrc" class="el-icon-delete" /> <i class="el-icon-plus" />
</a> </a>
</div> </div>
...@@ -134,8 +69,8 @@ ...@@ -134,8 +69,8 @@
:href="base64Second" :href="base64Second"
:style="{'background-image': `url(${newSecondSrc})`}" :style="{'background-image': `url(${newSecondSrc})`}"
class="content_img--show" class="content_img--show"
@click="deleteCutImage(2)"> @click="addCutImage(2)">
<i v-if="newSecondSrc" class="el-icon-delete" /> <i class="el-icon-plus" />
</a> </a>
</div> </div>
</div> </div>
...@@ -198,19 +133,31 @@ ...@@ -198,19 +133,31 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<SelectImageDialog <!-- <SelectImageDialog
v-if="dialogVisible" v-if="dialogVisible"
:select-image-dialog-visible="dialogVisible" :select-image-dialog-visible="dialogVisible"
:select-type="selectDialogType" :select-type="selectDialogType"
:image-list="imageList" :image-list="imageList"
@closeDialog="dialogVisible = false" @closeDialog="dialogVisible = false"
@selectSuccess="handleSelectSuccess" @imageBase64Str="handlerGetBase64" />-->
@imageBase64Str="handlerGetBase64" />
<CheckLargeImageDialog <CheckLargeImageDialog
:show-large-dialog="showLargeDialog" :show-large-dialog="showLargeDialog"
:image-url="imageUrl" :image-url="imageUrl"
@closeLargeDialog="showLargeDialog = false" @closeLargeDialog="showLargeDialog = false"
/> />
<CutImageDialog
v-if="cutImageDialogVisible"
:image-type="imageType"
:image-list="imageList"
:show-cut-dialog="cutImageDialogVisible"
@cutImageDialogClose="cutImageDialogVisible = false"
@cutSuccess="handleCutSuccess"/>
<CutEditImageDialog
v-if="cutEditImageDialogVisible"
:edit-image-url="editImageUrl"
:show-cut-dialog="cutImageDialogVisible"
@cutEditImageDialogClose="cutEditImageDialogVisible = false"
@cutEditSuccess="handleSaveImageBase64"/>
</div> </div>
</template> </template>
...@@ -222,10 +169,12 @@ import SelectImageDialog from './components/selectImageDialog' ...@@ -222,10 +169,12 @@ import SelectImageDialog from './components/selectImageDialog'
import { listCategories } from '@/api/business/goods' import { listCategories } from '@/api/business/goods'
import { detailGoods, editGoods, saveImageBase64 } from '@/api/business/goodsNew' import { detailGoods, editGoods, saveImageBase64 } from '@/api/business/goodsNew'
import CheckLargeImageDialog from './components/CheckLargeImageDialog' import CheckLargeImageDialog from './components/CheckLargeImageDialog'
import CutImageDialog from './components/CutImageDialog'
import CutEditImageDialog from './components/CutEditImageDialog'
export default { export default {
name: 'InfoSet', name: 'InfoSet',
components: { CheckLargeImageDialog, SelectImageDialog, VuePictureCut, VuePictureCutMask, VuePictureCutMenu }, components: { CutEditImageDialog, CutImageDialog, CheckLargeImageDialog, SelectImageDialog, VuePictureCut, VuePictureCutMask, VuePictureCutMenu },
filters: { filters: {
trimHtml(html_str) { trimHtml(html_str) {
var text = html_str && html_str.replace(/<[^<>]+>/g, '') || '' var text = html_str && html_str.replace(/<[^<>]+>/g, '') || ''
...@@ -235,29 +184,11 @@ export default { ...@@ -235,29 +184,11 @@ export default {
}, },
data() { data() {
return { return {
pictureCut: null,
blob: '', blob: '',
base64: '', base64: '',
blobSecond: '', blobSecond: '',
base64Second: '', base64Second: '',
compositeImageSrc: '', compositeImageSrc: '',
src: '',
cutInfo: {
initAngle: 0,
maxPixel: 500,
encoderOptions: 0.8
},
mastInfo: {
width: 1,
height: 1,
isRound: true,
resize: true
},
menuInfo: {
format: 'image/jpeg/png',
maxPixel: 500,
encoderOptions: 0.8
},
dialogVisible: false, dialogVisible: false,
selectDialogType: 0, selectDialogType: 0,
categoryList: [], // 所属分类 categoryList: [], // 所属分类
...@@ -270,7 +201,10 @@ export default { ...@@ -270,7 +201,10 @@ export default {
isFixed: false, isFixed: false,
imageList: [], imageList: [],
currentGoodId: '', currentGoodId: '',
changeImageUrl: '' // 用于处理是否合成或者替换原图 cutImageDialogVisible: false, // 钱币正反面图片操作
imageType: 0, // 1正面 2反面
cutEditImageDialogVisible: false, // 钱币图片编辑
editImageUrl: '' // 用于处理是否合成或者替换原图
} }
}, },
computed: { computed: {
...@@ -294,11 +228,6 @@ export default { ...@@ -294,11 +228,6 @@ export default {
return !(this.currentIndex - 1 >= 0 && this.currentIndex - 1 < this.goodIdList.length) return !(this.currentIndex - 1 >= 0 && this.currentIndex - 1 < this.goodIdList.length)
} }
}, },
watch: {
src() {
this.init()
}
},
created() { created() {
this.initContent() this.initContent()
}, },
...@@ -339,15 +268,6 @@ export default { ...@@ -339,15 +268,6 @@ export default {
this.categoryList = response.data.data.categoryList this.categoryList = response.data.data.categoryList
}) })
}, },
// 初始化图片裁剪工具
init() {
if (this.src) {
setTimeout(() => {
this.pictureCut = this.$refs['pictureCut']
console.log('==7777777777==', this.pictureCut)
}, 1000)
}
},
handleGetDetail(id, type) { handleGetDetail(id, type) {
const param = { const param = {
id: id, id: id,
...@@ -397,17 +317,9 @@ export default { ...@@ -397,17 +317,9 @@ export default {
this.base64Second = '' this.base64Second = ''
this.blob = '' this.blob = ''
this.blobSecond = '' this.blobSecond = ''
this.src = ''
this.compositeImageSrc = '' this.compositeImageSrc = ''
this.categoryIds = [] this.categoryIds = []
}, },
// 选择图片结果
fileChange(e) {
if (e.target.files.length) {
this.src = URL.createObjectURL(e.target.files[0])
}
console.log('src====', this.src)
},
// 取消，回到钱币列表页 // 取消，回到钱币列表页
handleCancel() { handleCancel() {
this.$router.push({ path: '/goods/list' }) this.$router.push({ path: '/goods/list' })
...@@ -423,20 +335,8 @@ export default { ...@@ -423,20 +335,8 @@ export default {
handleEdit() { handleEdit() {
this.$router.push({ path: '/goods/edit', query: { id: this.currentGoodId }}) this.$router.push({ path: '/goods/edit', query: { id: this.currentGoodId }})
}, },
// 选择形状
handleChangeShape(type) {
if (type === 1) {
this.mastInfo.isRound = true
} else {
this.mastInfo.isRound = false
}
},
// 选择图片 // 选择图片
handleSelectImage(type) { handleSelectImage(type) {
if (!this.isShowCutImage) {
this.$message.error('请先删除已裁剪图片')
return
}
if (!this.imageList || this.imageList.length === 0) { if (!this.imageList || this.imageList.length === 0) {
this.$message.error('无线上图片选择') this.$message.error('无线上图片选择')
return return
...@@ -444,43 +344,28 @@ export default { ...@@ -444,43 +344,28 @@ export default {
this.dialogVisible = true this.dialogVisible = true
this.selectDialogType = type this.selectDialogType = type
}, },
// 裁剪图片结果
cutChange(res) { handleCutSuccess(type, result) {
if (this.changeImageUrl && this.changeImageUrl.length > 0) { if (type === 1) {
this.$confirm( this.blob = result.blob
'请确定该图片是用于合成还是替换原图', this.base64 = result.base64
'提示', { } else if (type === 2) {
confirmButtonText: '替换原图', this.blobSecond = result.blob
cancelButtonText: '用于合成', this.base64Second = result.base64
type: 'warning'
}).then(() => {
this.handleSaveImageBase64(this.changeImageUrl, res.base64)
}).catch(() => {
this.changeImageUrl = null
this.src = ''
if (!this.blob) {
this.blob = res.blob
this.base64 = res.base64
} else {
this.blobSecond = res.blob
this.base64Second = res.base64
}
})
} else { } else {
this.src = ''
if (!this.blob) { if (!this.blob) {
this.blob = res.blob this.blob = result.blob
this.base64 = res.base64 this.base64 = result.base64
} else { } else {
this.blobSecond = res.blob this.blobSecond = result.blob
this.base64Second = res.base64 this.base64Second = result.base64
} }
} }
// console.log('=====blob', this.blob) this.cutImageDialogVisible = false
console.log('=====base64', this.base64)
}, },
handleSaveImageBase64(url, base64Url) { handleSaveImageBase64(url, base64Url) {
this.cutEditImageDialogVisible = false
const params = { const params = {
id: this.currentGoodId, id: this.currentGoodId,
imgBaseStr: base64Url imgBaseStr: base64Url
...@@ -488,7 +373,7 @@ export default { ...@@ -488,7 +373,7 @@ export default {
saveImageBase64(params).then((response) => { saveImageBase64(params).then((response) => {
this.$message.success('替换成功') this.$message.success('替换成功')
this.src = '' this.src = ''
this.changeImageUrl = null this.editImageUrl = null
const resultImage = response.data.data const resultImage = response.data.data
this.imageList = this.imageList.map((item) => { this.imageList = this.imageList.map((item) => {
if (item === url) { if (item === url) {
...@@ -515,62 +400,13 @@ export default { ...@@ -515,62 +400,13 @@ export default {
cutCancel() { cutCancel() {
this.src = '' this.src = ''
}, },
// 删除裁剪后图片 // 添加裁剪后图片
deleteCutImage(type) { addCutImage(type) {
event.preventDefault() event.preventDefault()
if (type === 1 && !this.blob) { // 正面 this.imageType = type
return this.cutImageDialogVisible = true
}
if (type === 2 && !this.blobSecond) {
return
}
this.$confirm(
'你确定删除吗?',
'提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (type === 1) { // 正面
this.blob = ''
this.base64 = ''
} else {
this.blobSecond = ''
this.base64Second = ''
}
this.compositeImageSrc = ''
})
}, },
// 选择线上图片后的图片链接
async handleSelectSuccess(url) {
this.changeImageUrl = url
var base64Str = await this.getBase64Image(url)
this.src = base64Str
console.log('=====&&&&==', base64Str)
},
// 去除水印后拿到的base64
handlerGetBase64(currentImageUrl, imgUrlBase64) {
this.changeImageUrl = currentImageUrl
if (imgUrlBase64) {
this.src = imgUrlBase64
} else {
this.$message.error('获取失败，请重试...')
}
},
/** url 转换成img */
getBase64Image(img) {
return this.downloadImage(img).then(image => {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
const ext = img.substring(img.lastIndexOf('.') + 1).toLowerCase()
const dataURL = canvas.toDataURL('image/' + ext)
return dataURL
})
},
downloadImage(url) { downloadImage(url) {
return new Promise(resolve => { return new Promise(resolve => {
const img = new Image() const img = new Image()
...@@ -659,6 +495,10 @@ export default { ...@@ -659,6 +495,10 @@ export default {
handleShowLargeDialog(imageUrl) { handleShowLargeDialog(imageUrl) {
this.imageUrl = imageUrl this.imageUrl = imageUrl
this.showLargeDialog = true this.showLargeDialog = true
},
handlerChangeImage(imageUrl) {
this.editImageUrl = imageUrl
this.cutEditImageDialogVisible = true
} }
} }
} }
...@@ -751,6 +591,15 @@ export default { ...@@ -751,6 +591,15 @@ export default {
height: 100px; height: 100px;
object-fit: contain; object-fit: contain;
} }
.edit {
position: absolute;
top: 0;
right: 0;
padding: 6px;
font-size: 12px;
color: white;
background: #505153;
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment