本篇文章给大家分享一款强大到没朋友的vue图片编辑插件，可以对图片进行旋转、缩放、裁剪、涂鸦、标注、添加文本等，快来试试并收藏吧！
【相关推荐：《vue.js教程》】
最近用户提出了一个新的需求，老师可以批改学生的图片作业，需要对图片进行旋转、缩放、裁剪、涂鸦、标注、添加文本等。乍一听，又要掉不少头发。有没有功能强大的插件实现以上功能，让我有更多的时间去阻止女票双十一剁手呢？答案当然是有的。
效果展示涂鸦
裁剪
标注
旋转
滤镜
是不是很强大！还有众多功能我就不一一展示了。那么还等什么，跟我一起用起来吧~
安装npm i tui-image-editor// oryarn add tui-image-editor
使用快速体验复制以下代码，将插件引入到自己的项目中。
<template> <div> <div id="tui-image-editor"></div> </div></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";export default { data() { return { instance: null, }; }, mounted() { this.init(); }, methods: { init() { this.instance = new imageeditor( document.queryselector("#tui-image-editor"), { includeui: { loadimage: { path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", name: "image", }, initmenu: "draw", // 默认打开的菜单项 menubarposition: "bottom", // 菜单所在的位置 }, cssmaxwidth: 1000, // canvas 最大宽度 cssmaxheight: 600, // canvas 最大高度 } ); document.getelementsbyclassname("tui-image-editor-main")[0].style.top = "45px"; // 图片距顶部工具栏的距离 }, },};</script><style scoped>.drawing-container { height: 900px;}</style>
可以看到活生生的图片编辑工具就出现了，是不是很简单：
国际化由于是老外开发的，默认的文字描述都是英文，这里我们先汉化一下：
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": "锁定宽高比例",};this.instance = new imageeditor( document.queryselector("#tui-image-editor"), { includeui: { loadimage: { path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", name: "image", }, initmenu: "draw", // 默认打开的菜单项 menubarposition: "bottom", // 菜单所在的位置 locale: locale_zh, // 本地化语言为中文 }, cssmaxwidth: 1000, // canvas 最大宽度 cssmaxheight: 600, // canvas 最大高度 });
效果如下：
自定义样式默认风格为暗黑系，如果想改成白底，或者想改变按钮的大小、颜色等样式，可以使用自定义样式。
const customtheme = { "common.bi.image": "", // 左上角logo图片 "common.bisize.width": "0px", "common.bisize.height": "0px", "common.backgroundimage": "none", "common.backgroundcolor": "#f3f4f6", "common.border": "1px solid #333", // header "header.backgroundimage": "none", "header.backgroundcolor": "#f3f4f6", "header.border": "0px", // 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": "#ccc", "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",};this.instance = new imageeditor( document.queryselector("#tui-image-editor"), { includeui: { loadimage: { path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", name: "image", }, initmenu: "draw", // 默认打开的菜单项 menubarposition: "bottom", // 菜单所在的位置 locale: locale_zh, // 本地化语言为中文 theme: customtheme, // 自定义样式 }, cssmaxwidth: 1000, // canvas 最大宽度 cssmaxheight: 600, // canvas 最大高度 });
效果如下：
按钮优化通过自定义样式，我们看到右上角的 load 和 download 按钮已经被隐藏了，接下来我们再隐藏掉其他用不上的按钮（根据业务需要），并添加一个保存图片的按钮。
<template> <div> <div id="tui-image-editor"></div> <el-button type="primary" size="small" @click="save">保存</el-button> </div></template>// ...methods: { init() { this.instance = new imageeditor( document.queryselector("#tui-image-editor"), { includeui: { loadimage: { path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", name: "image", }, menu: ["resize", "crop", "rotate", "draw", "shape", "icon", "text", "filter"], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask initmenu: "draw", // 默认打开的菜单项 menubarposition: "bottom", // 菜单所在的位置 locale: locale_zh, // 本地化语言为中文 theme: customtheme, // 自定义样式 }, cssmaxwidth: 1000, // canvas 最大宽度 cssmaxheight: 600, // canvas 最大高度 } ); document.getelementsbyclassname("tui-image-editor-main")[0].style.top ="45px"; // 调整图片显示位置 document.getelementsbyclassname("tie-btn-reset tui-image-editor-item help") [0].style.display = "none"; // 隐藏顶部重置按钮 }, // 保存图片，并上传 save() { const base64string = this.instance.todataurl(); // base64 文件 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" }); // blob 文件 const form = new formdata(); form.append("image", blob); // upload file },}<style scoped>.drawing-container { height: 900px; position: relative; .save { position: absolute; right: 50px; top: 15px; }}</style>
效果如下：
可以看到顶部的重置按钮，以及底部的镜像和遮罩按钮都已经不见了。右上角多了一个我们自己的保存按钮，点击按钮，可以获取到 base64 文件和 blob 文件。
完整代码<template> <div> <div id="tui-image-editor"></div> <el-button type="primary" size="small" @click="save">保存</el-button> </div></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 = { 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": "#f3f4f6", "common.border": "1px solid #333", // header "header.backgroundimage": "none", "header.backgroundcolor": "#f3f4f6", "header.border": "0px", // 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": "#ccc", "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 { data() { return { instance: null } }, mounted() { this.init() }, methods: { init() { this.instance = new imageeditor(document.queryselector('#tui-image-editor'), { includeui: { loadimage: { path: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image', name: 'image' }, menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask initmenu: 'draw', // 默认打开的菜单项 menubarposition: 'bottom', // 菜单所在的位置 locale: locale_zh, // 本地化语言为中文 theme: customtheme // 自定义样式 }, cssmaxwidth: 1000, // canvas 最大宽度 cssmaxheight: 600 // canvas 最大高度 }) document.getelementsbyclassname('tui-image-editor-main')[0].style.top = '45px' // 调整图片显示位置 document.getelementsbyclassname( 'tie-btn-reset tui-image-editor-item help' )[0].style.display = 'none' // 隐藏顶部重置按钮 }, // 保存图片，并上传 save() { const base64string = this.instance.todataurl() // base64 文件 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' }) // blob 文件 const form = new formdata() form.append('image', blob) // upload file } }}</script><style scoped>.drawing-container { height: 900px; position: relative; .save { position: absolute; right: 50px; top: 15px; }}</style>
总结以上就是 tui.image-editor 的基本使用方法，相比其他插件，tui.image-editor 的优势是功能强大，简单易上手。
插件固然好用，但本人也发现一个小 bug，当放大图片，用手掌拖动显示位置，再点击重置按钮时，图片很可能就消失不见了。解决办法有两个，一是改源码，在重置之前，先调用 resetzoom 方法，还原缩放比列；二是自己做一个重置按钮，点击之后调用 this.init 方法重新进行渲染。
赠人玫瑰，手有余香。如果觉得有用，就动动发财的小手，点个赞把~
更多 api 及 demo 请参考：
github地址：https://github.com/nhn/tui.image-editor
api 及 examples 地址：http://nhn.github.io/tui.image-editor/latest
本文转载自：https://juejin.cn/post/7027943745530101773
作者：前端阿飞
更多编程相关知识，请访问：编程入门！！
以上就是分享一个强大的 vue 图片编辑插件（快来试试！）的详细内容。