Vue+Tui-image-editor实现图片编辑(涂鸦,裁剪,标注,旋转,滤镜)
目录
前言
效果展示
涂鸦
裁剪
标注
旋转
滤镜
安装
使用
中文化+自定义样式+按钮优化
参考链接
前言
需求：对图片进行旋转、缩放、裁剪、涂鸦、标注、添加文本等。
效果展示
涂鸦
裁剪
标注
旋转
滤镜
安装
npm i tui-image-editor
// or
yarn add tui-image-editor
使用
<template><div class="drawing-container"><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: 'http://127.0.0.1:9999/online/Pictures/local/webupload/2024/09/09/1b88e7e1-589d-4bf9-9840-40bb69a9b61a.jpg',name: 'image'},menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩maskinitMenu: '', // 默认打开的菜单项menuBarPosition: 'bottom', // 菜单所在的位置},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 blob = this.base64ToBlob(base64String) // blob 文件// 创建FormData对象，并附加Blob对象const form = new FormData()form.append('image', blob)// upload file},// 将base64字符串转换为Blob对象base64ToBlob(base64Str) {let parts = base64Str.split(';base64,');let contentType = parts[0].split(':')[1];let raw = window.atob(parts[1]);let rawLength = raw.length;let uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], { type: contentType });},}}</script><style scoped>.drawing-container {height: 718px;position: relative;width: 70%;margin-top: 40px;margin-left: 15%;}</style>
中文化+自定义样式+按钮优化
<template><div class="drawing-container"><div id="tui-image-editor"></div><el-button class="save" 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": "0px 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: 'http://127.0.0.1:9999/online/Pictures/local/webupload/2024/09/09/1b88e7e1-589d-4bf9-9840-40bb69a9b61a.jpg',name: 'image'},menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩maskinitMenu: '', // 默认打开的菜单项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 blob = this.base64ToBlob(base64String) // blob 文件// 创建FormData对象，并附加Blob对象const form = new FormData()form.append('image', blob)// upload file},// 将base64字符串转换为Blob对象base64ToBlob(base64Str) {let parts = base64Str.split(';base64,');let contentType = parts[0].split(':')[1];let raw = window.atob(parts[1]);let rawLength = raw.length;let uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], { type: contentType });},}}</script><style scoped>.drawing-container {height: 718px;position: relative;width: 70%;margin-top: 40px;margin-left: 15%;.save {position: absolute;right: 50px;top: 15px;}}</style> 
参考链接
分享一个强大的 Vue 图片编辑插件（快来试试！） - 浅浅而谈 - 博客园
官方GitHub地址：GitHub - nhn/tui.image-editor: 🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
Api及Examples地址：http://nhn.github.io/tui.image-editor/latest/