Image editor for the user

Ask the community
1

Sorry if I’m repeating something that has already been discussed, but I couldn’t find it. Is there a way to build an image editor for the end user of the website? I wanted people to be able to take a photo they uploaded themselves or downloaded from some bank, resize it, and crop it. After that, we would apply a layer with their logo and a layer with editable text, where it would be possible to edit the font, color, etc. Does anyone see a way to do this? Can I use some external API, perhaps?

2

You can generate your own IMAGE-EDITOR using CUSTOM-ELEMENT.

Or you use an HTML-Component to generate it…
Something like…

<html>
<head>
    <title>
      "My IMG-Editor"
    </title>
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.js"></script>
    <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.4.0/tui-code-snippet.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.color-picker/v2.2.0/dist/tui-color-picker.js"></script>
    <script type="text/javascript" src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
    
    
    
    <style>
      @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
      html,
      body {height: 100%;margin: 0;}
    </style>
</head>

<body>
  <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.0/tui-color-picker.css" rel="stylesheet">
  <link type="text/css" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css" rel="stylesheet">
  <div id="tui-image-editor-container"></div>
  <script>
        console.clear();   
      // Image editor
      var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
        usageStatistics: false,
        includeUI: {
          loadImage: {
            path: 'https://raw.githubusercontent.com/nhnent/tui.image-editor/master/examples/img/sampleImage2.png',
            name: 'SampleImage'
          },
          initMenu: 'filter',
          menuBarPosition: 'bottom'
        },
        cssMaxWidth: 700,
        cssMaxHeight: 500,
          'menu.normalIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-d.svg',
          'menu.activeIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-b.svg',
          'menu.disabledIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-a.svg',
          'menu.hoverIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-c.svg',
          'submenu.normalIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-d.svg',
          'submenu.activeIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-c.svg',
      });

      window.onresize = function() {imageEditor.ui.resizeEditor();}
    </script>
</body>

</html>

Paste into a HTML-COMPONENT and save it. Test it! Have fun!