Vue实现对图片的涂鸦等操作
新的项目中要求在聊天消息中可以对发送的图片进行标注,经过分析发现可以使用tui-image-editor插件可以实现,在此记录一下使用的方式和过程,下次在遇到类似的需求可以直接参考使用.
安装插件
npm i tui-image-editor --save
引入组件
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
使用
汉化和主题配置
{
"operatorImageLocaleZh": {
"Crop": "裁剪",
"ZoomIn": "放大",
"ZoomOut": "缩小",
"Hand": "拖拽",
"History": "历史记录",
"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": "混合色",
"Load": "记录列表"
},
"operatorImageTheme": {
"header.display": "none",
"loadButton.display": "none",
"downloadButton.display": "none",
"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.backgroundColor": "#1e1e1e",
"submenu.partition.color": "#858585",
"submenu.normalLabel.color": "#858585",
"submenu.normalLabel.fontWeight": "lighter",
"submenu.activeLabel.color": "#fff",
"submenu.activeLabel.fontWeight": "lighter",
"checkbox.border": "1px solid #ccc",
"checkbox.backgroundColor": "#fff",
"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.button.border": "1px solid #1e1e1e",
"colorpicker.title.color": "#fff"
}
}