How to create image annotation with React - reactjs

I wanted to create a project allowing a user to upload an image then create annotations thanks to bullet points something like this .
I have succeeded with upload image functionality and now trying to figure out with the help of what package is it possible to achieve the image annotation as shown in the above picture. So, tried to use react-designer package itself but there is a package bug that I can't solve. Has any of you done such image annotation before? if so, what package is it possible for me to use?

Related

How to use image upload adapters as extra plugins with CKEditor 5 Classic Editor? Or, how to use CKEditor custom builder in React JS?

I was trying to integrate CKEditor5 in my MERN Stack Application. Its a kind of blog site which requires a fully functioned rich text editor. I integrated the editor and all other things are working fine except the file upload button.
I am using the predefined Classic Editor, which has all the basic functions. But when I click on the Image button to upload an image from local storage, it shows the error :
filerepository-no-upload-adapter
I tried to add Base64UploadAdapter plugin but then it shows the error :
Uncaught CKEditorError: ckeditor-duplicated-modules
Because of this error, I had to remove that plugin, but I still do not have the file upload function.
I also need some other buttons on my text editor, but I am always getting some kind of errors.
I also tried the CKEditor Custom build editor, but when I imported it to my page, it again gives me ckeditor-duplicated-modules error. I used the following code for importing:
import { CKEditor } from '#ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
And yes, I also added the custom builder's folder to my package.json before importing this.
I want all the features that I added in my Custom builder, but that's not working in my case. Can anyone please help me with this? Or else, if that is not possible, please give me a solution for file upload which I need for sure, even if I don't get other buttons except the predefined Classic Editor buttons.
But, if there is any way to fix this ckeditor-duplicated-modules error and use the Custom build only, that would be the best solution for me..!
Thanks in advance.

Adding local image in Jupyter SQL notebook

Started using Azure data studio and creating documentation for some SQL processes in our system.
As part of that I need to include a flow diagram in the document. Currently I have uploaded an image to a URL and am able to embed the image in document from the URL.
But is there any way to include an image from a local folder? Please assist.
I think this is what you want.
from IPython.display import Image
Image(filename='C:/your_path/your_image.PNG',width=200, height=100)
I was interested in this also. Syntax should be (if you store images in subfolder relative to notebook):
![ssms_subquery](images/16_ssms_subquery.png)
This didn't work for me initially: rendered as a broken image icon.
Things I tried:
Make sure you have a workspace defined for your root folder. Create the folder, then select "File > Add Folder to Workspace ..."
If that does nothing, try closing and restarting ADS. I've found the rendering to be flaky from time to time after awhile or if you have been opening/closing notebooks a lot.
Related topic has been discussed previously for markdown in general (but worth asking again for ADS!), eg. How to display local image in markdown

How to create a ReactJS zoomable image lightbox

I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect

how to make selection of input file in ADF mobile framework

i am making the MAF application for practice but in this application am giving the functionality of upload and download files from server and but input file component is not giving in the ORACLE MAF and am successfully done the upload button but i am not know how to add input select file component in the MAF. please
help me .
thank you
please answer this question...
For download, you can use this tag into an amx page :
<amx:goLink text="Download" id="bla" url="http://www.yourservlet.com/download"/>
For the upload functionality, I am not sure if that works somehow. Try to follow up this question of the Oracle Community to find out more about the upload functionality.
Hope to be helpful.
Thanks.

How to save esri map as an image file

I am using Silverlight 3 and I am trying to take a screenshot of esri map.
I was able to take a screenshot and save as a file for silverlight controls, but when I try to access Esri map image, I get "Pixel access not allowed" error. I heard this is because of different domain (I am trying to get map image on the client side, and map image is not accessible at server side in my silverlight application).
So I am trying to find a function from esri so that I can save the map image as a file.
does anybody know how to do this? or any other way around?
I am using a script from the Code Gallery for both printing and exporting map images.
The script requires a little bit of tweaking to get it to work (plus you need to dig a little bit into WCF and self-hosted services), but it has been working great for several months now. You can see it in action at our web site.

Resources