卧槽，这个前端图片编辑器有点牛！

「前端实验室」 专注分享 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');

使用

第一次插入 在模板或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