bianyaqi
2 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