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

Question

I wanted to get an image editor so that I can edit my pictures and add text over them so that I tried Toast UI image editor, I did as the documentation of Toast UI Image Editor says but Toast UI Image Editor isn't showing anything on my browser I'm attaching my code below.我想要一个图像编辑器，以便我可以编辑我的图片并在它们上面添加文本，以便我尝试 Toast UI 图像编辑器，我按照 Toast UI 图像编辑器的文档进行了操作，但是 Toast UI 图像编辑器没有显示任何内容我的浏览器我在下面附上了我的代码。 Please tell me if I did something wrong while implementing the image editor.请告诉我在实施图像编辑器时是否做错了什么。

index.html索引.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>

Below I'm attaching the error my browser's console is throwing下面我附上了浏览器控制台抛出的错误

Browser's console浏览器控制台

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

You have a typo in your code theme: whiteTheme -> theme: whiteTheme,您的代码theme: whiteTheme有一个错字theme: whiteTheme -> theme: whiteTheme,

Here is the working example.这是工作示例。

Reference: https://github.com/nhn/tui.image-editor/blob/master/examples/example01-includeUi.html参考： 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 图像编辑器？

问题描述

1 个解决方案

解决方案1
6 已采纳 2020-09-28 07:33:46

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

问题描述

1 个解决方案

解决方案1 6 已采纳 2020-09-28 07:33:46

解决方案1
6 已采纳 2020-09-28 07:33:46