如何实现 Toast UI 图片编辑器？答案

【问题标题】：How to implement Toast UI image editor?如何实现 Toast UI 图片编辑器？
【发布时间】：2021-01-13 16:31:27
【问题描述】：

我想获得一个图像编辑器，以便我可以编辑我的图片并在它们上面添加文本，以便我尝试 Toast UI 图像编辑器，我按照 Toast UI 图像编辑器的文档所说的那样做了，但 Toast UI 图像编辑器不是在我的浏览器上显示任何内容我在下面附上了我的代码。如果我在实现图像编辑器时做错了什么，请告诉我。

index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <!--Toast UI stylesheet-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.min.css" integrity="sha512-WEhPru82cOhEAThEMrYXgrHXc0eR69oZF0vGzXwhNf2hSbNc/q4/fb9qeDexgrIyBU6TKfhXC/DKwxYHx5CmLA==" crossorigin="anonymous" />
</head>
<body>


<div id="tui-image-editor"></div>


<!--jQuery File-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--Toast UI js file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.js" integrity="sha512-n85VUN94xSJstXJvMxHC968reNaBOSy9+LRA0slHiqYzsa6sAX3ok0cupK6HTg1sIlWXncBcCVzg7YGPJ70T0w==" crossorigin="anonymous"></script>
<script>
    var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
     includeUI: {
         loadImage: {
             path: '/media/profile-images/20/09/23/Koala_iaIdqm5.jpg',
             name: 'SampleImage'
         },
         locale: locale_ru_RU,
         theme: whiteTheme
         initMenu: 'filter',
         menuBarPosition: 'bottom'
     },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
    }
});
</script>
</body>

下面我附上了我的浏览器控制台抛出的错误

浏览器控制台

util.js:89 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at keyMirror (util.js:89)
    at eval (consts.js:48)
    at Object../src/js/consts.js (tui-image-editor.js:1579)
    at __webpack_require__ (tui-image-editor.js:36)
    at eval (util.js:38)
    at Object../src/js/util.js (tui-image-editor.js:2203)
    at __webpack_require__ (tui-image-editor.js:36)
    at eval (invoker.js:17)
    at Object../src/js/invoker.js (tui-image-editor.js:1843)
    at __webpack_require__ (tui-image-editor.js:36)

【问题讨论】：

标签： javascript html jquery html5-canvas toast-ui-image-editor

【解决方案1】：

您的代码中有错字 theme: whiteTheme -> theme: whiteTheme,

这是工作示例。

参考：https://github.com/nhn/tui.image-editor/blob/master/examples/example01-includeUi.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>0. Design</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>
            @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
            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 type="text/javascript" src="./js/theme/white-theme.js"></script>
        <script type="text/javascript" src="./js/theme/black-theme.js"></script> -->
        <script>
         // Image editor
         var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
             includeUI: {
                 loadImage: {
                     path: 'img/sampleImage2.png',
                     name: 'SampleImage'
                 },
                //  theme: blackTheme, // or whiteTheme
                 initMenu: 'filter',
                 menuBarPosition: 'bottom'
             },
             cssMaxWidth: 700,
             cssMaxHeight: 500,
             usageStatistics: false
         });
         window.onresize = function() {
             imageEditor.ui.resizeEditor();
         }
        </script>
    </body>
</html>

【讨论】：

@dharman 我不需要那个加载和下载按钮，只有一个编辑器可以在我想要的任何地方添加文本，它会从 JS 获取输入图像，而不是来自用户.
@SpyDie 我没有写这个答案，请不要ping我
@alishan-khan 有没有办法让我只添加文本部分？而且我不需要那个加载和下载按钮，只需要一个编辑器，它可以在我想要的任何地方添加文本，它会从 JS 而不是用户获取输入图像。
@SpyDie 如果您不想要这些按钮，您可以使用 css 检查隐藏它们：github.com/nhn/tui.image-editor/issues/132
@SpyDie 如果您想完全自定义。研究主题，创建自己的主题。