Image where sections can be circled
Image where sections can be circled
Hello, I need to be able to click on an image in a form to then be able to circle sections of the image and then save it so I can review it later. Here in the photos an example of another application.
- Attachments
-
- Here is the image after clicking on it
- ImageClique.png (67.17 KiB) Viewed 32010 times
-
- Here is the image before I clicked on it
- Capture d’écran 2023-02-06 141852.png (29.37 KiB) Viewed 32010 times
Re: Image where sections can be circled
We used Fabric.js to accomplish this sort of stuff.
http://fabricjs.com/
I am pretty sure it is impossible to draw circles on images in AwareIM.
http://fabricjs.com/
I am pretty sure it is impossible to draw circles on images in AwareIM.
Re: Image where sections can be circled
Excellent, do you know how to embed Fabric.js in Aware IM to make it work. Thanks for your help
Re: Image where sections can be circled
You can download the latest fabric file here: https://unpkg.com/[email protected]/dist/fabric.min.js
Save it as fabric.min.js
Put it in this folder in you AwareIM installation folder on the server (this assumes that your application name is "acme":
Tomcat/webapps/AwareIM/Custom/JS/acme/
The "acme" folder is not there by default and has to be created.
Then reload your "acme" application, and have a look at the source code in your browser (CTRL+U)
Search for "fabric", and you should see a link to the fabric.min.js.
Save it as fabric.min.js
Put it in this folder in you AwareIM installation folder on the server (this assumes that your application name is "acme":
Tomcat/webapps/AwareIM/Custom/JS/acme/
The "acme" folder is not there by default and has to be created.
Then reload your "acme" application, and have a look at the source code in your browser (CTRL+U)
Search for "fabric", and you should see a link to the fabric.min.js.
Re: Image where sections can be circled
Good morning and thanks for your help. I succeeded with Fabric.JS to do this. When I click this button
const downloadSVG = () => {
const svg = canvas.toSVG();
const a = document.createElement("a");
const blob = new Blob([svg], { type: "image/svg+xml" });
const blobURL = URL.createObjectURL(blob);
a.href = blobURL;
a.download = "ImageCircle.svg";
a.click();
URL.revokeObjectURL(blobURL);
};
Thanks again for your help.
When i click i see that
I can circle the sections like that
My only issue is that when I save the edits to SVG the file saves to my computer and I'd rather like it to save to the application and be able to see the circled sections from there application. Here is the Javascript code that saves SVG. Can you please help me modify this code so that I can save in the app instead of in my computer. const downloadSVG = () => {
const svg = canvas.toSVG();
const a = document.createElement("a");
const blob = new Blob([svg], { type: "image/svg+xml" });
const blobURL = URL.createObjectURL(blob);
a.href = blobURL;
a.download = "ImageCircle.svg";
a.click();
URL.revokeObjectURL(blobURL);
};
Thanks again for your help.
Re: Image where sections can be circled
Great to see you found it useful.
I have personally never written a single line of FabricJS code, but I think the way we solved it was saving the result image in an AwareIM plain text attribute as Base64.
Another option, If you still want the layers and editing capabilities when loading the image, you would save the JSON output in an AwareIM attribute instead.
Forum user margor has experience with FabricJS. Perhaps he will help you if you get stuck if you ask him nicely
I have personally never written a single line of FabricJS code, but I think the way we solved it was saving the result image in an AwareIM plain text attribute as Base64.
Another option, If you still want the layers and editing capabilities when loading the image, you would save the JSON output in an AwareIM attribute instead.
Forum user margor has experience with FabricJS. Perhaps he will help you if you get stuck if you ask him nicely
Re: Image where sections can be circled
Thank you very much. I sent a message to Margor.
Have a nice day.
Have a nice day.
Re: Image where sections can be circled
I once considered the supported signature pad feature for this purpose, but never followed through with it. I think with some customization of the signature_pad.js file u could get it working, albeit very basic..Set your image as a background image with some css and the user makes the marks on re invented signature pad (sized accordingly) the image as a signature
However, getting the fabric.js to work and play nicely with AwareIm would be a great feature
However, getting the fabric.js to work and play nicely with AwareIm would be a great feature