大家好,我是前端实验室的大师兄!一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料。
最近老板提出一个新的需求，要求用户上传图片时可以对图片进行旋转、标注、裁剪、滤镜、添加文本等等编辑功能。我就想那铁定不能自己写啊，我还要留出更多时间找对象呢...
终于，大师兄在 Github 找到了这款功能强大、界面还很美观的图片编辑器！
效果展示
1.图标标注
2.画画
3.裁剪
4.旋转
5.文字标注
6.滤镜
也不知道是妹子好看还是这款图片编辑器功能强大...
废话不多说，我们来看如何使用吧~
安装
npm
代码语言：javascript复制$ npm install --save tui-image-editor # Latest version
CDN
代码语言：javascript复制<link
rel="stylesheet"
href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"
/>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
用法
HTML
代码语言：javascript复制<template>
<div class="container">
<div id="tui-image-editor"></div>
</div>
</template>
javascript
代码语言：javascript复制methods: {
init() {
this.instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
includeUI: {
loadImage: {
path: "src/assets/wallhaven-1jvld9.jpg",
name: 'image'
},
menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text',
'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
initMenu: 'draw', // 默认打开的菜单项
menuBarPosition: 'bottom', // 菜单所在的位置
locale: locale_zh, // 本地化语言为中文
},
cssMaxWidth: 1000, // canvas 最大宽度
cssMaxHeight: 800 // canvas 最大高度
})
document.getElementsByClassName('tui-image-editor-main')[0].style.top = '80px' // 调整图片显示位置
},
},
这样一个简单的图片编辑器就实现啦！
ToastUI Image Editor 拥有裁切、翻转、旋转、添加绘画、添加形状、添加图标、添加文本、 添加覆盖、添加滤镜一系列强大的功能，插件默认是英文版，我们可以做汉化，还可以自定义主题！
无论是原生 JavaScript 的使用方式，还是 Vue、React 的组件使用方式，他们的配置属性几乎一致，所以不用担心要根据不同情况修改配置的问题。
大师兄最后实现了原生 JavaScript 和 Vue的 Demo
大家可以在后台回复 20220301 获取 Demo 源码。
写在最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复111，按提示操作即可进群。
