code狂魔
2023/04/02阅读:257主题:萌绿
史上最强图片编辑器
大家注意:因为微信最近又改了推送机制,经常有小伙伴说错过了之前被删的文章,或者一些限时福利,错过了就是错过了。所以建议大家加个星标,就能第一时间收到推送。 图片

「前端实验室」 专注分享 Github、Gitee 等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。
大家好,我是「前端实验室」爱分享的了不起~
最新被别的小伙伴安利了一款强大的前端图片编辑器tui.image-editor
,强不强大咱们看看再说
tui.image-editor
tui.image-editor
库是一个开源的 JavaScript 库,它提供了一系列图片编辑的功能。通过该库,用户可以使用简单的 API 来实现对图片的剪裁、旋转、缩放、调整亮度和对比度等操作。

支持渐变、图形和文字等高级特性,可用于制作复杂的图像编辑应用程序。并且可以与其他 Web 技术如 HTML5 Canvas 和 CSS3 结合使用。该库使用的是 MIT 许可证,可以免费使用和分发。
特点
-
功能强大:tui.image-editor提供了众多的图像编辑功能,包括裁剪、旋转、翻转、缩放、亮度调节、对比度调节、饱和度调节、滤镜等功能。
-
易于集成:可以很容易地集成到各种Web应用中,只需引入相关的JS和CSS文件即可。
-
可定制性高:可以通过自定义配置文件,实现不同的编辑需求和风格。
-
可扩展性好:提供了丰富的API和事件,方便进行扩展和二次开发。
-
完美的社区支持:是由ToASTeam开发和维护的,并且兼容维护了许多其他流行的Javascript库和框架,拥有完善的社区支持。
tui.image-editor
不仅能在JS中直接引用,无论你是 Vue
的忠实粉丝,还是 React
的重度用户都可以在各自的项目中无差别的使用它

接下来就以Vue为例,介绍一下它的使用方式
安装
安装
npm install --save @toast-ui/vue-image-editor
引入
// es modules
import { ImageEditor } from '@toast-ui/vue-image-editor';
// commonjs require
const { ImageEditor } = require('@toast-ui/vue-image-editor');
使用
第一次插入
<tui-image-editor :include-ui="useDefaultUI" :options="options"></tui-image-editor>
加载ImageEditor组件,然后将其添加到 components 在您的组件或Vue实例中。
import 'tui-color-picker/dist/tui-color-picker.css';
import 'tui-image-editor/dist/tui-image-editor.css';
import { ImageEditor } from '@toast-ui/vue-image-editor';
export default {
components: {
'tui-image-editor': ImageEditor,
},
data() {
return {
useDefaultUI: true,
options: {
// for tui-image-editor component's "options" prop
cssMaxWidth: 700,
cssMaxHeight: 500,
},
};
},
};
接下来就可以对图片进行一些编辑功能了
-
下载,图像加载,撤消,重做,重置,删除对象(形状,线条,蒙版图像... )
-
过滤:灰度,反转,棕褐色,模糊锐化,压花,去除白色,亮度,噪声,像素,ColorFilter,色调,乘法,混合
-
这里还可以体验一下它线上编辑器
https://ui.toast.com/tui-image-editor
https://github.com/nhn/tui.image-editor
最后
欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式:在下方公众号后台,回复 111
,按提示操作即可进群。
AI的风口即将到来,未来围绕着 ChatGPT等技术,将会涌现出无数多的机会。
我们普通人现在能做的,就是尽最大可能提前去了解这个技术,并且依靠这些技术做一些尝试、准备。
当遇到合适机遇的时候,就组队一起做点事情。如果真的能抓住机遇,这辈子就起飞了。
当有机会来临的时候,我们可以尝试做很多事情,唯一不能做的就是什么都不做。 不管你能想到什么,都去尝试一下。
欢迎和我一起加入ChatGPT俱乐部,一起掌握人工智能最新动态。
限时加入赠送ChatGPT 账号!!!
星球短短几天就发展到近4400+人规模,目前在全国ChatGPT星球排名前三
有兴趣的朋友们,欢迎扫码加入本星球:

如果该文章对你有帮助,那么就点击右下角的 [点赞]「在看」,给一个小小的鼓励吧~
作者介绍