bianyaqi
3 years ago
5 changed files with 764 additions and 336 deletions
@ -0,0 +1,296 @@ |
|||
<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> |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always"> |
|||
<div class="btnBox"> |
|||
<el-button v-print="'#laserFunc'" size="small">打印</el-button> |
|||
<el-button type="primary" size="small" @click="handleSaveTable">保存</el-button> |
|||
</div> |
|||
<div id="laserFunc"> |
|||
<p style="color:#000000;font-size:32px;margin:0 0 30px 0;text-align:center;"> |
|||
眼底血管造影知情同意书 |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'MraForm', |
|||
methods: { |
|||
handleSaveTable() { |
|||
const data = { |
|||
treat: this.treatData, |
|||
beforeTreat: this.beforeTreat |
|||
} |
|||
this.$emit('save', data) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue