一、安装插件

npm i @toast-ui/vue-image-editor

npm i tui-code-snippet

npm i tui-image-editor

 

Image-editor | TOAST UI :: Make Your Web Delicious!  

官网介绍说是“凭借简单和美观的完美结合，图像编辑器是一个功能齐全的编辑器，非常适合日常使用” ，的确，日常的功能需求确实可以满足了。

二、使用插件

1、引入插件

import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
// 改写原插件样式
import "../../assets/css/editPicture.css";
//引入所要编辑的图片
import ImageEditor from "tui-image-editor";

2、插件配置

// 中文菜单
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": "#e9e9e9","submenu.normalIcon.color": "rgba(255,255,255,.5)","submenu.activeIcon.color": "#e9e9e9","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 init = () => {instance.value = new ImageEditor(document.querySelector("#tui-image-editor"),{includeUI: {loadImage: {path: imgPath,name: "image",},menu: ["draw", "shape", "text"], // 底部菜单按钮列表 隐藏镜像flip和遮罩maskinitMenu: "draw", // 默认打开的菜单项menuBarPosition: "bottom", // 菜单所在的位置locale: locale_zh, // 本地化语言为中文theme: customTheme, // 自定义样式},});// 调整图片显示位置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";
};

 3、改写效果图