Load image in website and make a tool to add numbers on the image. Save coordinates of the added numbers in XML and save plain image also.
Budget: €30 – €250 EUR
I need a website in PHP,HTML,JavaScript to add numbers on a image and save the number coordinates in a XML file.
see images in attach.
Page 1 : Select what image i want to open (list of images in directory)
JPEG,JPG and tif format has to be supported.
Page 2 : Image is opened --> search XML file , if no XML exists , show the image and make it able to click the image. The tool sets a number and circle in red where i clicked. Then the number is increased for the next click. In a input box i can fill/modify in the next number that is added on the drawing.
I can also change the size of the circle and number that will be added in the next click. (the circle and number size is fixed together so i don't need to change them both)
If i click delete, i can delete a number that already is added on the image (closest nearby).
It would be nice if the cursor on the image (hover) is already a good visualization where the circle will be look like. A red circle of the correct size is enough.
When i click save, a XML file is generated with the coordinates of all the numbers and the number
like :
<drawing>
<image>
<name>image.jpg</name>
</image>
<point>
<X>125</x>
<y>100</y>
<number>1</number>
<size>10<size>
</point></drawing>
the structure/layout can be modified as you wish.
And when i click the image is saved as a plain image also in a other directory and in the name is added "_withnumbers"
If the image is opened and a XML file is detected, the image is loaded with all the numbers visualized on the image like saved the last time. So i be able to delete a number or add a number on the current image.
When i click save then the image is saved again as plain image (overwrite) and the XML is modified.
Diretory layout
-> Image (contains images without numbers) (where the picture can be loaded from)
-> XML (contains XML files that contain the coordinates and numbers also the drawing name
-> Image_numbered
Numbers will be maximum 2 Digits so from 1 to 99.
see images in attach.
Page 1 : Select what image i want to open (list of images in directory)
JPEG,JPG and tif format has to be supported.
Page 2 : Image is opened --> search XML file , if no XML exists , show the image and make it able to click the image. The tool sets a number and circle in red where i clicked. Then the number is increased for the next click. In a input box i can fill/modify in the next number that is added on the drawing.
I can also change the size of the circle and number that will be added in the next click. (the circle and number size is fixed together so i don't need to change them both)
If i click delete, i can delete a number that already is added on the image (closest nearby).
It would be nice if the cursor on the image (hover) is already a good visualization where the circle will be look like. A red circle of the correct size is enough.
When i click save, a XML file is generated with the coordinates of all the numbers and the number
like :
<drawing>
<image>
<name>image.jpg</name>
</image>
<point>
<X>125</x>
<y>100</y>
<number>1</number>
<size>10<size>
</point></drawing>
the structure/layout can be modified as you wish.
And when i click the image is saved as a plain image also in a other directory and in the name is added "_withnumbers"
If the image is opened and a XML file is detected, the image is loaded with all the numbers visualized on the image like saved the last time. So i be able to delete a number or add a number on the current image.
When i click save then the image is saved again as plain image (overwrite) and the XML is modified.
Diretory layout
-> Image (contains images without numbers) (where the picture can be loaded from)
-> XML (contains XML files that contain the coordinates and numbers also the drawing name
-> Image_numbered
Numbers will be maximum 2 Digits so from 1 to 99.