You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
7.8 KiB
296 lines
7.8 KiB
<template>
|
|
<el-dialog
|
|
title="图片编辑3"
|
|
top="1vh"
|
|
width="95%"
|
|
:visible.sync="visible"
|
|
fullscreen
|
|
append-to-body
|
|
class="img-editor"
|
|
@closed="closeDialog"
|
|
>
|
|
<i class="el-icon-picture-outline replace-picture" />
|
|
<input id="inputFile" class="replace-picture" type="file" name="" accept="image/jpeg,image/jpg,image/png" @change="replaceHandle">
|
|
<div class="dialog-container">
|
|
<div id="tui-image-editor" />
|
|
</div>
|
|
<template slot="footer">
|
|
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
|
|
<el-button type="primary" @click="submit">{{ $t('confirm') }}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import 'tui-image-editor/dist/tui-image-editor.css'
|
|
import 'tui-color-picker/dist/tui-color-picker.css'
|
|
import ImageEditor from 'tui-image-editor'
|
|
// 汉化
|
|
const locale_zh = {
|
|
// override default English locale to your custom
|
|
Crop: '裁剪',
|
|
Resize: '调整大小',
|
|
ZoomIn: '放大',
|
|
Hand: '拖拽',
|
|
History: '历史记录',
|
|
ZoomOut: '缩小',
|
|
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: '混合色'
|
|
// etc...
|
|
}
|
|
// 去除不需要的右上角的Load和Download和左上角这个默认的logo
|
|
const customTheme = {
|
|
// image 坐上角度图片
|
|
'common.bi.image': '', // 在这里换上你喜欢的logo图片
|
|
'common.bisize.width': '0px',
|
|
'common.bisize.height': '0px',
|
|
'common.backgroundImage': 'none',
|
|
'common.backgroundColor': '#f3f4f6',
|
|
'common.border': '1px solid #444',
|
|
|
|
// 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': '#8a8a8a',
|
|
'menu.activeIcon.color': '#555555',
|
|
'menu.disabledIcon.color': '#434343',
|
|
'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'
|
|
}
|
|
export default {
|
|
props: {
|
|
bodyStyleShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否为病例模板
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
imgUrl: '',
|
|
imgAlt: '',
|
|
instance: null,
|
|
textOne: '',
|
|
textTwo: '',
|
|
textThree: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
// ImageEditor
|
|
|
|
},
|
|
methods: {
|
|
init(textOne, textTwo, textThree) {
|
|
textOne ? this.textOne = textOne : ''
|
|
textTwo ? this.textTwo = textTwo : ''
|
|
textThree ? this.textThree = textThree : ''
|
|
this.visible = true
|
|
this.$nextTick(() => {
|
|
// console.log(this.imgUrl)
|
|
this.instance = new ImageEditor(
|
|
document.querySelector('#tui-image-editor'),
|
|
{
|
|
includeUI: {
|
|
loadImage: {
|
|
path: this.imgUrl,
|
|
name: 'image'
|
|
},
|
|
// menu: ['crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
|
|
initMenu: 'draw',
|
|
selectionStyle: {
|
|
lineWidth: 5,
|
|
borderColor: '#000000'
|
|
},
|
|
menuBarPosition: 'bottom',
|
|
locale: locale_zh, // 本地化语言为中文
|
|
theme: customTheme // 自定义主题
|
|
}
|
|
}
|
|
)
|
|
// document.querySelector('.tie-btn-resize').style.display = 'none' // 隐藏顶部重置按钮
|
|
document.querySelector('.tie-btn-mask').style.display = 'none' // 隐藏遮罩按钮
|
|
})
|
|
},
|
|
submit() {
|
|
const base64String = this.instance.toDataURL()
|
|
// console.log(base64String)
|
|
this.$emit('fullImgBack', base64String, this.imgAlt, this.textOne, this.textTwo, this.textThree)
|
|
this.visible = false
|
|
// 掉后台接口存入后台 --- 暂时用不到
|
|
// 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' })
|
|
// const fd = new FormData()
|
|
// fd.append('image', blob)
|
|
// upload fd
|
|
},
|
|
// 替换图片
|
|
replaceHandle(e) {
|
|
var file = e.target.files[0]
|
|
console.log(file)
|
|
var reader = new FileReader()
|
|
var that = this
|
|
reader.readAsDataURL(file)
|
|
console.log(reader)
|
|
reader.onload = function(e) {
|
|
that.imgUrl = reader.result
|
|
that.init()
|
|
}
|
|
},
|
|
closeDialog() {
|
|
this.$emit('closeDialog')
|
|
this.visible = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.img-editor{
|
|
.replace-picture {
|
|
z-index: 999;
|
|
position: fixed;
|
|
right:35px;
|
|
top: 73px;
|
|
cursor: pointer;
|
|
}
|
|
.dialog-container {
|
|
height: calc(100vh - 1vh - 54px - 70px);
|
|
}
|
|
#inputFile {
|
|
opacity: 0;
|
|
}
|
|
.el-icon-picture-outline {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
</style>
|