369 lines
10 KiB
Vue
369 lines
10 KiB
Vue
<template>
|
||
<div id="tui-image-editor" ></div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { message, Modal } from 'ant-design-vue';
|
||
import { ref,onBeforeUnmount} from 'vue';
|
||
import 'tui-image-editor/dist/tui-image-editor.css';
|
||
import 'tui-color-picker/dist/tui-color-picker.css';
|
||
import ImageEditor from 'tui-image-editor';
|
||
import { caseplatformCaseApi } from '/@/api/business/case/caseplatform-case-api';
|
||
const prosp=defineProps({
|
||
imgsrc:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
imgType:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
caseId:{
|
||
type:String,
|
||
default:'',
|
||
},
|
||
caseObj:{
|
||
type:Object,
|
||
default:()=>{},
|
||
}
|
||
})
|
||
const emit=defineEmits(['freshDetail'])
|
||
// 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': '#fff',
|
||
'common.border': 'none',
|
||
|
||
// header
|
||
'header.backgroundImage': 'none',
|
||
'header.backgroundColor': '#f3f4f6',
|
||
'header.border': '0px',
|
||
'header.display': 'none',
|
||
|
||
// 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': '#fff',
|
||
'menu.activeIcon.color': '#4080ff',
|
||
'menu.disabledIcon.color': '#ccc',
|
||
'menu.hoverIcon.color': '#4080ff',
|
||
'submenu.normalIcon.color': 'rgba(255,255,255,.9)',
|
||
'submenu.activeIcon.color': '#4080ff',
|
||
|
||
'menu.iconSize.width': '16px',
|
||
'menu.iconSize.height': '16px',
|
||
'submenu.iconSize.width': '18px',
|
||
'submenu.iconSize.height': '18px',
|
||
|
||
// submenu primary color
|
||
'submenu.backgroundColor': 'transparent',
|
||
'submenu.partition.color': 'transparent',
|
||
|
||
// submenu labels
|
||
'submenu.normalLabel.color': 'rgba(255,255,255,.5)',
|
||
'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': 'rgba(255,255,255,0.5)',
|
||
'range.subbar.color': '#fff',
|
||
|
||
'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 #496fb9',
|
||
'range.value.backgroundColor': '#496fb9',
|
||
'range.title.color': '#fff',
|
||
'range.title.fontWeight': 'lighter',
|
||
|
||
// colorpicker style
|
||
'colorpicker.button.border': '1px solid #fff',
|
||
'colorpicker.title.color': '#fff',
|
||
};
|
||
const instance = ref(null);
|
||
const HandleMainDiagnoseImg=()=>{
|
||
caseplatformCaseApi.updateMainDiagnose({
|
||
caseId:current_caseId.value,
|
||
mainDiagnose:JSON.stringify(caseVO.value.mainDiagnose)
|
||
}).then(res=>{
|
||
message.success('保存成功')
|
||
})
|
||
};
|
||
const HandleDpmasImg=(dmpsId)=>{
|
||
caseplatformCaseApi.updateDpmas({
|
||
caseId:current_caseId.value,
|
||
dmpsId:dmpsId,
|
||
dpmasImg:dpmasImg
|
||
}).then(res=>{
|
||
message.success('保存成功')
|
||
})
|
||
};
|
||
const HandleCheckImg=(dmpsId)=>{
|
||
caseplatformCaseApi.updatecheck({
|
||
caseId:current_caseId.value,
|
||
dmpsId:dmpsId,
|
||
checkImg:checkImg
|
||
}).then(res=>{
|
||
message.success('保存成功')
|
||
})
|
||
};
|
||
const getImageFormat=(imageUrl)=>{
|
||
console.log(imageUrl)
|
||
var parts = imageUrl.split('.');
|
||
return parts[parts.length - 1];
|
||
};
|
||
const getOss=()=>{
|
||
caseplatformCaseApi.getOssSign(1).then(res=>{
|
||
let { accessid, dir,policy,signature,host} = res;
|
||
let imgUrl = file;
|
||
})
|
||
}
|
||
const save = () => {
|
||
instance.value.resetZoom();
|
||
const base64String = instance.value.toDataURL(); // base64 文件
|
||
const data = window.atob(base64String.split(',')[1]);
|
||
const ia = new Uint8Array(data.length);
|
||
for (let i = 0; i < data.length; i++) {
|
||
ia[i] = data.charCodeAt(i);
|
||
}
|
||
const blob = new Blob([ia], { type: 'image/png' }); // blob 文件
|
||
//下面懒得弄组件直接用当前时间弄得文件名，如果后台写了这里可以随便，也可以使用uuid进行生成
|
||
// const file = new File([blob], new Date().getTime() + '.jpeg', { type: blob.type });
|
||
// fileToBase64(file).then((res) => {
|
||
// newSrc.value = res;
|
||
// });
|
||
if(props.imgType==='mainDiagnose'){
|
||
HandleMainDiagnoseImg();
|
||
}
|
||
};
|
||
|
||
const fileToBase64 = (file) => {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.readAsDataURL(file);
|
||
reader.onload = () => resolve(reader.result);
|
||
reader.onerror = (error) => reject(error);
|
||
});
|
||
};
|
||
const init = (src) => {
|
||
instance.value = new ImageEditor(document.querySelector('#tui-image-editor'), {
|
||
includeUI: {
|
||
loadImage: {
|
||
path: src,
|
||
name: '编辑图片',
|
||
},
|
||
menu: ['draw', 'text'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
|
||
initMenu: 'draw', // 默认打开的菜单项
|
||
menuBarPosition: 'bottom', // 菜单所在的位置
|
||
locale: locale_zh, // 本地化语言为中文
|
||
theme: customTheme, // 自定义样式
|
||
},
|
||
cssMaxWidth: 1000, // canvas 最大宽度
|
||
cssMaxHeight: 600, //
|
||
usageStatistics: false,
|
||
});
|
||
|
||
document.getElementsByClassName('tui-image-editor-main')[0].style.top = '45px'; // 调整图片显示位置
|
||
//document.getElementsByClassName('tie-btn-reset tui-image-editor-item help')[0].style.display = 'none'; // 隐藏顶部重置按钮
|
||
document.getElementsByClassName('tie-text-align-button')[0].style.display = 'none'; // 隐藏文字对齐选项
|
||
|
||
// // 调整图片显示位置
|
||
// document.getElementsByClassName("tui-image-editor-main")[0].style.top = "0px";
|
||
// //隐藏重置按钮
|
||
document.getElementsByClassName('tie-btn-reset tui-image-editor-item help')[0].style.display = 'none';
|
||
//隐藏移动按钮
|
||
document.getElementsByClassName('tie-btn-hand tui-image-editor-item help')[0].style.display = 'none';
|
||
//隐藏历史记录按钮
|
||
document.getElementsByClassName('tie-btn-history tui-image-editor-item help')[0].style.display = 'none';
|
||
//隐藏单个删除按钮
|
||
document.getElementsByClassName('tie-btn-delete tui-image-editor-item')[0].style.display = 'none';
|
||
};
|
||
|
||
onBeforeUnmount(() => {
|
||
if (instance.value) {
|
||
instance.value.destroy();
|
||
instance.value = null;
|
||
}
|
||
});
|
||
defineExpose({init,save})
|
||
|
||
</script>
|
||
|
||
<style>
|
||
.tui-image-editor-help-menu {
|
||
background: skyblue !important;
|
||
}
|
||
.tui-image-editor-container .tui-image-editor-controls {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
background: transparent;
|
||
height: 40px !important;
|
||
}
|
||
.tui-image-editor-container .color-picker-value {
|
||
width: 20px !important;
|
||
height: 20px !important;
|
||
}
|
||
.tui-image-editor-container.bottom .tui-image-editor-submenu > div {
|
||
padding-bottom: 0 !important;
|
||
}
|
||
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li {
|
||
display: flex !important;
|
||
}
|
||
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline {
|
||
display: flex !important;
|
||
align-items: center;
|
||
}
|
||
.tui-image-editor-menu {
|
||
width: 300px !important;
|
||
height: 50px;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center;
|
||
background: skyblue !important;
|
||
}
|
||
|
||
.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item,
|
||
.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active {
|
||
padding: 0 !important;
|
||
width: 25px;
|
||
height: 25px;
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
}
|
||
.tui-image-editor-container {
|
||
background: transparent !important;
|
||
}
|
||
.tui-image-editor-submenu-item {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
width: 800px !important;
|
||
margin: 0 auto !important;
|
||
align-items: center !important;
|
||
background: skyblue !important;
|
||
}
|
||
.tui-image-editor-container .tui-image-editor-range {
|
||
top: 0 !important;
|
||
}
|
||
.tui-image-editor-container .tui-image-editor-range-value {
|
||
margin-top: 0;
|
||
}
|
||
.editorcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
.save {
|
||
position: absolute;
|
||
right: 195px;
|
||
top: 14px;
|
||
z-index: 999;
|
||
cursor: pointer;
|
||
color:#fff;
|
||
font-size: 17px;
|
||
opacity: 0.8;
|
||
}
|
||
</style>
|