大家好,我是前端实验室的大师兄!一名资深的互联网玩家,专注分享大前端领域技术、面试宝典、学习资料。
最近老板提出一个新的需求,要求用户上传图片时可以对图片进行旋转、标注、裁剪、滤镜、添加文本等等编辑功能。我就想那铁定不能自己写啊,我还要留出更多时间找对象呢...
终于,大师兄在 Github 找到了这款功能强大、界面还很美观的图片编辑器!
也不知道是妹子好看还是这款图片编辑器功能强大...
废话不多说,我们来看如何使用吧~
npm
$ npm install --save tui-image-editor # Latest version
CDN
<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>
<template>
<div class="container">
<div id="tui-image-editor"></div>
</div>
</template>
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
,按提示操作即可进群。