Draw over image (1 Viewer)

[stu_c]

Hi all
this may not be possible but till give it an ask anyway, I have the below image on a form and I would like users to be able to draw over the top of it with a clear button which would clear everything afterwards.
It could the the user clicks on it and opens another program to do the edit etc and when closed changes it but just need some pointers

The biggest thing would be to be able to save this to the record and then when I create a report via Word for this to display

 

[cheekybuddha]

Would using the new web-browser control be an option for you?

 

[stu_c]

it might work? what are you thinking?

 

[cheekybuddha]

Use HTML5 canvas element and javascript to record drawing made by mouse moves or touch, and record drawn output in db.

You can place the canvas over your image.

You will need to know/learn some javascript.

I looked at some code I wrote for a web app several years ago and found this link in my comments on which I based my code.

 

[cheekybuddha]

I don't know whether this might be something you want to pursue, but I knocked up a demo html file which can be used in conjunction with the js class I wrote (based on the link I posted).

I don't have access to the new Access Webbrowser control, but you can see how it might work in your browser.

Place the three files in a folder:
test.html
canvasDraw.js
IMGPatternLock.PNG

Then double-click (or right-click and open in browser) test.html.

Use the mouse to draw over your image.

Save button will just log the image data to the javascript console (F12 when you're in your browser) - this is that data you would need to save.

Clear button should do what it says on the tin.

Others here can probably help getting it in and out of the web browser control.

 

[stu_c]

Morning Buddha
Thank you for the below, its defiantly a start, how do you access the webbrowser controls?

I don't know whether this might be something you want to pursue, but I knocked up a demo html file which can be used in conjunction with the js class I wrote (based on the link I posted).

I don't have access to the new Access Webbrowser control, but you can see how it might work in your browser.

Place the three files in a folder:
test.html
canvasDraw.js
IMGPatternLock.PNG

Then double-click (or right-click and open in browser) test.html.

Use the mouse to draw over your image.

Save button will just log the image data to the javascript console (F12 when you're in your browser) - this is that data you would need to save.

Clear button should do what it says on the tin.

Others here can probably help getting it in and out of the web browser control.

 

[cheekybuddha]

Daniel Pineault's site here is a good place to start