Hi,
I'm trying to use the filerobot image editor https://github.com/scaleflex/filerobot-image-editor. Has anyone used this?
Please see my attached test project: ImgEditor.zip (9.6 KB)
This uses the image editor on both the main form and the subform. On the main form I can click on the red square at the bottom next to the font to display the color picker. If I open the the subform and click on this nothing is displayed. However, clicking on the back button shows that it opened on the main form!
Does anyone have any ideas on how this can be fixed?
Thanks,
Ken
I just started playing around with filerobot-image-editor a week ago or so. Seems like it is a workable solution, with just a few tweaks needed to get it working well.
When it creates these modal windows, like the color picker and the other little windows, it does so at the root of the document so that it can, in theory, overlay everything else. What I've done for this one is to add a bit of CSS to change the z-order so that it appears 'on top' rather than covered by whatever else is going on.
/******************************************************************************
** FileRobot Image Editor **
******************************************************************************/
.SfxModal-Wrapper,
.SfxPopper-wrapper {
z-index: 1000000 !important;
}
.kVmiSa.SfxPopper-wrapper {
z-index: 1000001 !important;
}
The other thing about this library that I seem to not be able to find is that while it has a 'save' button, it doesn't have a 'load' button. Even though it allows you to load a watermark file. Strange. To get around that I used another JS library - load-image - which has the benefit of also being able to parse the EXIF data of whatever is being loaded. Took many tries to get this to work with the image editor, but I've ended up with this so far. There's an element on the page that is defined as <input type='file' id='file-input'> that it uses to trigger the file loading (and that stores the current filename).
asm
...
window.imgedit = this.imgedit;
document.getElementById('file-input').onchange = function () {
// load image into editor
loadImage(this.files[0],{
}).then(function (data) {
var { TABS, TOOLS } = FilerobotImageEditor;
window.imgedit = new FilerobotImageEditor(
document.querySelector('#editor_container'),
config
);
window.imgedit.render({source: data.image});
});
// load any meta data that can be found in the image
loadImage.parseMetaData(this.files[0],{
}).then(function (data) {
console.log('Original image head: ', data.imageHead)
console.log('Exif data: ', data.exif)
console.log('IPTC data: ', data.iptc)
});
...
end;
And, curiously, I couldn't get either of these JS libraries to work reliably unless I had them downloaded and included in the project directory directly. Linking to a CDN did not seem to work. All very, very strange, but ultimately successful I think. Certainly going to be the topic of an upcoming blog post!
1 Like
Thanks Andrew. I'll try that out later. You can set the source using data:image/png;base64, xxxx
Yes, but why no load button? If you're using this as a database image editor (like I'm doing) it would be nice to load another image up and save it to the database. Seems odd, that's all.
There is an add image button.
Yes, in their demo, in the gallery beside the control, where you can add an image to the gallery and then load it into the editor. But not in the editor itself. Not a big deal, and I was interested in getting at the EXIF data anyway, just seemed odd that there isn't a load or upload button in the same place as the save button, as part of the control. But handled separately.
It does seem a bit of an omission. For my purposes I don't need a load button as I will be doing that elsewhere. I will also be looking into removing their save button. My use of the editor is providing a tool to edit composite images which are then used to create generative artwork for a ERC1155 smart contract.
I also want to get rid of that annoying spinning wheel 
Yeah, that spinner is a bit over the top! I was looking at the TUI image editor previously and it was far worse in almost every respect. This library seems tame in comparison.
You can add some CSS to hide the save button potentially. Something like
.FIE_topbar-save-wrapper {
display: none;
}
I've not tried to get rid of the spinner yet, though I'm sure it'll eventually gnaw at me enough to figure it out! There is I think a config option to remove the close button as well, if you don't need that. Or it can be done via CSS in the same way.
The spinner can likely also be hidden with CSS, I've just not tried to figure out what the CSS selector is. So far it has only appeared briefly, but if you can pause the page using the JavaScript debugger when the spinner is showing, and then figure out what class is being used to display it, you can hide it in the same way.
1 Like
Have to add important! to get it to work.
1 Like
Looking at my CSS, I noticed that I also changed the font size:
label.SfxLabel-root {
font-size: 11px !important;
}
So that's another option, if you've not already addressed that in some other way.
1 Like
Thanks.
.FIE_spinner-wrapper {
display: none !important;
}
Gets rid of the spinner!
1 Like
What seems to be missing for my required usage of the editor is to be able to fill a region of the image with a selected color.
They have an example where you can add a watermark when the image is first loaded. Which isn't exactly what you're after, but maybe you can replace watermark with rect or something like that? If you want the user to select the color and placement, like replicating what they might do with the drawing tool but in code, it isn't immediately obvious how that can be done, I agree. It seems to know about the changes being made, and there's an event for that. Just that the opportunity to interact with those seems to be when saving or loading these DesignState properties.
If you know the color ahead of time (as in your app is picking the color, not the user) then maybe another library can be used to do the overlay before giving it to this editor to handle, or picking up the editor change and then using the color chosen to then use another library to apply a color to the image. Tricky though. Could also monitor that particular element for a change, and then export-addcolor-import kind of dance.
{
// ...otherConfigurations
loadableDesignState: {
annotations: {
watermark: {
stroke: '#000000',
strokeWidth: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
shadowColor: '#000000',
shadowOpacity: 1,
opacity: 1,
height: 121.12629375000002,
width: 115.62055312500001,
padding: 1,
image:
'https://assets.scaleflex.com/Marketing/Logos/Filerobot+Logos/Logo+Vertical/FILEROBOT+LOGO+VERTICAL.png?vh=05c4c3',
x: 176.6395,
y: 245.049375,
id: 'watermark',
name: 'Image',
},
},
}
}
Can you describe what you're trying to do in a little more detail? Specifically, who is in control of the change and do you want the user to be able to modify the change that is being made?
What I need is the equivalent of "Fill with color" in Windows Paint where the end user gets to fill an area of the image with a selected color.
So, like a bucket fill rather than a rectangle or other shape? Tricky. One of the JS libraries I ran across when looking for an image editor was actually an ms paint clone 
Maybe something like this?
I think for my purposes I can use filters as only part of an image is being edited at one time.
I have implemented my own save button but I can't work out how to get the modified base64 image. Any ideas?
I have looked through the closed issues and find it really annoying how the guy answers questions 
