235 lines
5.8 KiB
Vue
235 lines
5.8 KiB
Vue
<script setup>
|
|
import { ref, onMounted, nextTick } from 'vue'
|
|
import 'tui-image-editor/dist/tui-image-editor.css'
|
|
// import 'tui-color-picker/dist/tui-color-picker.css'
|
|
import { base64ToBlod } from '@/utils/file'
|
|
import ImageEditor from 'tui-image-editor'
|
|
|
|
// 中文菜单
|
|
const locale_zh = {
|
|
ZoomIn: '放大',
|
|
ZoomOut: '缩小',
|
|
Hand: '手掌',
|
|
History: '历史',
|
|
Resize: '调整宽高',
|
|
Crop: '裁剪',
|
|
DeleteAll: '全部删除',
|
|
Delete: '删除',
|
|
Undo: '撤销',
|
|
Redo: '反撤销',
|
|
Reset: '重置',
|
|
Flip: '镜像',
|
|
Rotate: '旋转',
|
|
Draw: '画',
|
|
Shape: '形状标注',
|
|
Icon: '图标标注',
|
|
Text: '文字标注',
|
|
Mask: '遮罩',
|
|
Filter: '滤镜',
|
|
Bold: '加粗',
|
|
Italic: '斜体',
|
|
Underline: '下划线',
|
|
Left: '左对齐',
|
|
Center: '居中',
|
|
Right: '右对齐',
|
|
Color: '颜色',
|
|
'Text size': '字体大小',
|
|
Custom: '自定义',
|
|
Square: '正方形',
|
|
Apply: '应用',
|
|
Cancel: '取消',
|
|
'Flip X': 'X 轴',
|
|
'Flip Y': 'Y 轴',
|
|
Range: '区间',
|
|
Stroke: '描边',
|
|
Fill: '填充',
|
|
Circle: '圆',
|
|
Triangle: '三角',
|
|
Rectangle: '矩形',
|
|
Free: '曲线',
|
|
Straight: '直线',
|
|
Arrow: '箭头',
|
|
'Arrow-2': '箭头2',
|
|
'Arrow-3': '箭头3',
|
|
'Star-1': '星星1',
|
|
'Star-2': '星星2',
|
|
Polygon: '多边形',
|
|
Location: '定位',
|
|
Heart: '心形',
|
|
Bubble: '气泡',
|
|
'Custom icon': '自定义图标',
|
|
'Load Mask Image': '加载蒙层图片',
|
|
Grayscale: '灰度',
|
|
Blur: '模糊',
|
|
Sharpen: '锐化',
|
|
Emboss: '浮雕',
|
|
'Remove White': '除去白色',
|
|
Distance: '距离',
|
|
Brightness: '亮度',
|
|
Noise: '噪音',
|
|
'Color Filter': '彩色滤镜',
|
|
Sepia: '棕色',
|
|
Sepia2: '棕色2',
|
|
Invert: '负片',
|
|
Pixelate: '像素化',
|
|
Threshold: '阈值',
|
|
Tint: '色调',
|
|
Multiply: '正片叠底',
|
|
Blend: '混合色',
|
|
Width: '宽度',
|
|
Height: '高度',
|
|
'Lock Aspect Ratio': '锁定宽高比例'
|
|
}
|
|
|
|
// 画布组件自定义样式
|
|
const customTheme = {
|
|
"common.bi.image": "", // 左上角logo图片
|
|
"common.bisize.width": "0px",
|
|
"common.bisize.height": "0px",
|
|
"common.backgroundImage": "none",
|
|
"common.backgroundColor": "#f3f4f6",
|
|
"common.border": "1px solid #333",
|
|
|
|
// header
|
|
"header.backgroundImage": "none",
|
|
"header.backgroundColor": "#f3f4f6",
|
|
"header.border": "0px",
|
|
|
|
// load button
|
|
"loadButton.backgroundColor": "#fff",
|
|
"loadButton.border": "1px solid #ddd",
|
|
"loadButton.color": "#222",
|
|
"loadButton.fontFamily": "NotoSans, sans-serif",
|
|
"loadButton.fontSize": "12px",
|
|
"loadButton.display": "none", // 可以直接隐藏掉
|
|
|
|
// download button
|
|
"downloadButton.backgroundColor": "#fdba3b",
|
|
"downloadButton.border": "1px solid #fdba3b",
|
|
"downloadButton.color": "#fff",
|
|
"downloadButton.fontFamily": "NotoSans, sans-serif",
|
|
"downloadButton.fontSize": "12px",
|
|
"downloadButton.display": "none", // 可以直接隐藏掉
|
|
|
|
// icons default
|
|
"menu.normalIcon.color": "#8a8a8a",
|
|
"menu.activeIcon.color": "#555555",
|
|
"menu.disabledIcon.color": "#ccc",
|
|
"menu.hoverIcon.color": "#e9e9e9",
|
|
"submenu.normalIcon.color": "#8a8a8a",
|
|
"submenu.activeIcon.color": "#e9e9e9",
|
|
|
|
"menu.iconSize.width": "24px",
|
|
"menu.iconSize.height": "24px",
|
|
"submenu.iconSize.width": "32px",
|
|
"submenu.iconSize.height": "32px",
|
|
|
|
// submenu primary color
|
|
"submenu.backgroundColor": "#1e1e1e",
|
|
"submenu.partition.color": "#858585",
|
|
|
|
// submenu labels
|
|
"submenu.normalLabel.color": "#858585",
|
|
"submenu.normalLabel.fontWeight": "lighter",
|
|
"submenu.activeLabel.color": "#fff",
|
|
"submenu.activeLabel.fontWeight": "lighter",
|
|
|
|
// checkbox style
|
|
"checkbox.border": "1px solid #ccc",
|
|
"checkbox.backgroundColor": "#fff",
|
|
|
|
// rango style
|
|
"range.pointer.color": "#fff",
|
|
"range.bar.color": "#666",
|
|
"range.subbar.color": "#d1d1d1",
|
|
|
|
"range.disabledPointer.color": "#414141",
|
|
"range.disabledBar.color": "#282828",
|
|
"range.disabledSubbar.color": "#414141",
|
|
|
|
"range.value.color": "#fff",
|
|
"range.value.fontWeight": "lighter",
|
|
"range.value.fontSize": "11px",
|
|
"range.value.border": "1px solid #353535",
|
|
"range.value.backgroundColor": "#151515",
|
|
"range.title.color": "#fff",
|
|
"range.title.fontWeight": "lighter",
|
|
|
|
// colorpicker style
|
|
"colorpicker.button.border": "1px solid #1e1e1e",
|
|
"colorpicker.title.color": "#fff",
|
|
};
|
|
|
|
// props
|
|
const props = defineProps({
|
|
dialogVisible: {
|
|
type: Boolean,
|
|
default: () => {
|
|
return false;
|
|
},
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
imgUrl: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
|
|
});
|
|
const emit = defineEmits()
|
|
const instance = ref()
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
init() // 页面创建完成后调用
|
|
})
|
|
})
|
|
|
|
|
|
const init = ()=> {
|
|
instance.value = new ImageEditor(document.querySelector('#tui-image-editor'), {
|
|
includeUI: {
|
|
loadImage: {
|
|
path: props.imgUrl,
|
|
name: 'image'
|
|
},
|
|
menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
|
|
initMenu: 'none', // 默认打开的菜单项
|
|
menuBarPosition: 'left', // 菜单所在的位置
|
|
locale: locale_zh, // 本地化语言为中文
|
|
theme: customTheme // 自定义样式
|
|
},
|
|
cssMaxWidth: 400, // canvas 最大宽度
|
|
cssMaxHeight: 500 // canvas 最大高度
|
|
})
|
|
document.getElementsByClassName('tui-image-editor-main')[0].style.top = '0' // 调整图片显示位置
|
|
document.getElementsByClassName(
|
|
'tie-btn-reset tui-image-editor-item help'
|
|
)[0].style.display = 'none' // 隐藏顶部重置按钮
|
|
}
|
|
|
|
// 保存图片，并上传
|
|
const save = () => {
|
|
// base64 文件
|
|
const base64String = instance.value.toDataURL()
|
|
//转换blod
|
|
const url = base64ToBlod(base64String)
|
|
//传递给父组件
|
|
emit('getNewImg', url);
|
|
}
|
|
|
|
defineExpose({
|
|
save
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div id="tui-image-editor"></div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|
|
|