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

Question

我想要一个图像编辑器，这样我就可以编辑我的照片并在它们上面添加文字，这样我就尝试了 Toast UI 图像编辑器，我按照 Toast UI Image 的文档做了编辑说，但是 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)

Answer 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>

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

How to implement Toast UI image editor?

html

javascript

jquery

html5-canvas

toast-ui-image-editor