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');

使用

第一次插入在模板或html中。includeUi 和 options 需要道具。

<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星球排名前三

有兴趣的朋友们，欢迎扫码加入本星球：

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