3.6k Star！简单易用，过滤器强大的在线图片编辑器

最新推荐文章于 2024-07-19 11:27:03 发布

开源前哨

最新推荐文章于 2024-07-19 11:27:03 发布

阅读量871

点赞数 2

本文链接：https://blog.csdn.net/osfront/article/details/114216878

版权

ToastUI Image Editor是一个基于HTML5 Canvas的图片编辑器，支持JavaScript、Vue和React。提供丰富的编辑功能，如滤镜、文字添加、图标和镜像翻转。易于集成，可自定义菜单、本地化和主题，还有丰富的API和事件监听。

摘要由CSDN通过智能技术生成

【导语】：ToastUI Image Editor 是一个基于 HTML5 画布的图片编辑器，它使用起来非常简单，而且内置了丰富的图片编辑功能。

简介

ToastUI Image Editor 是一个基于 HTML5 Canvas 的图片编辑器，它使用起来非常简单，而且内置了丰富的图片编辑功能。它支持原生 JavaScript、Vue 组件和 React 组件三种使用方式。

基础使用

Javascript

最简单的方式安装就是直接取引用它在线的 CDN 资源，我们直接看一个 html 的例子：

<!DOCTYPE html>  
<html>  

<head>  
  <meta charset="UTF-8">  
  <title>ImageEditor Demo</title>  
  <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">  
  <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">  
  <style>  

    html,  
    body {  
      height: 100%;  
      margin: 0;  
    }  
  </style>  
</head>  

<body>  

  <div id="tui-image-editor-container"></div>  
  <!-- 依赖的第三方库 -->  
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>  
  <!-- 一些工具函数 -->  
  <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>  
  <!-- 颜色选择 -->  
  <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>  
  <!-- 文件下载的库 -->  
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>   
  <!-- 核心库 -->  
  <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>  
  <script>  
    var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {  
      includeUI: {  
        initMenu: 'filter',  
        menuBarPosition: 'left'  
      },  
      cssMaxWidth: 700,  
      cssMaxHeight: 500,  
      usageStatistics: false  
    });  
    window.onresize = function () {  
      imageEditor.ui.resizeEditor();  
    }  
  </script>  
</body>  

</html>

我们可以看到，引入了很多 CDN 资源，每个资源的作用都有解释。我们来看一下这个编辑器都使用。首先我们实例化了一个 ImageEditor 类，它第一个参数是挂载点，这里表示将编辑器挂载到 id 为 tui-image-editor-container 的元素上；接着第二个参数是这个编辑器的属性，下面是对属性的简单介绍：

includeUI：表示使用它内置的 UI 控件
- initMenu：表示编辑器加载后，第一个被选中的操作菜单，这里选的是 filter，也就是滤镜
- menuBarPosition：表示菜单栏的位置，有四个选项可选：'top', 'bottom', 'left', 'right'
cssMaxWidth：编辑器 Canvas 的最大宽度
cssMaxHeight：编辑器 Canvas 的最大高度
usageStatistics：是否开启 GA （Google Analytics）来收集数据。它是默认开启的，不想使用的话可以设置为 false

还有一些属性我们会在后面用到。这里要注意，无论是原生 JavaScript 的使用方式，还是 Vue、React 的组件使用方式，他们的配置属性几乎一致，所以你不用担心要根据不同情况修改配置的问题。实际上，Vue、React 组件就是对这个原生方式的一层包装，本质上是一回事。

介绍完了，我们先来看看上面例子的运行效果：

最低0.47元/天解锁文章

开源前哨

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
3.6k Star！简单易用，过滤器强大的在线图片编辑器

【导语】：ToastUI Image Editor 是一个基于 HTML5 画布的图片编辑器，它使用起来非常简单，而且内置了丰富的图片编辑功能。简介ToastUI Image Editor 是一个基于 HTML5 Canvas 的图片编辑器，它使用起来非常简单，而且内置了丰富的图片编辑功能。它支持原生 JavaScript、Vue 组件和 React 组件三种使用方式。基础使用Javascript最简单的方式安装就是直接取引用它在线的 CDN 资源，我们直接看一个 html 的例子：<.
复制链接

扫一扫