How to implement Toast UI image editor?

Question

How to implement Toast UI image editor?

8.2k views Asked by Saroj At 28 September 2020 at 05:16

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. Please tell me if I did something wrong while implementing the image editor.

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>

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)

Original Q&A

There are 1 answers

**Alishan Khan** · Accepted Answer · 2020-09-28 07:33:46

You have a typo in your code theme: whiteTheme -> theme: whiteTheme,

Here is the working example.

Reference: 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>

TechQA.

How to implement Toast UI image editor?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JQUERY

Related Questions in HTML5-CANVAS

Related Questions in TOAST-UI-IMAGE-EDITOR

Popular Questions

Popular Tags

Trending Questions