Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Toast Image Editor</title> | |
| <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| height: 100%; | |
| background-color: #2e2e2e; | |
| } | |
| #tui-image-editor { | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="tui-image-editor"></div> | |
| <script src="https://uicdn.toast.com/tui-code-snippet/latest/tui-code-snippet.js"></script> | |
| <script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.js"></script> | |
| <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script> | |
| <script> | |
| const imageEditor = new tui.ImageEditor('#tui-image-editor', { | |
| includeUI: { | |
| loadImage: { | |
| path: 'https://via.placeholder.com/800x600.png', | |
| name: 'SampleImage' | |
| }, | |
| theme: {}, | |
| menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'], | |
| initMenu: '', | |
| uiSize: { | |
| width: '100%', | |
| height: '100%' | |
| }, | |
| menuBarPosition: 'bottom' | |
| }, | |
| cssMaxWidth: 700, | |
| cssMaxHeight: 500, | |
| selectionStyle: { | |
| cornerSize: 20, | |
| rotatingPointOffset: 70 | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |