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?
top of page
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
bottom of page
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!