【导语】: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 组件就是对这个原生方式的一层包装,本质上是一回事。
介绍完了,我们先来看看上面例子的运行效果: