1

I am trying to digitize an order form for a printing company. This form has a section where you make a simple sketch of the product being ordered. I want to integrate this into an html form that will have the output emailed to the correct person. Any help would be greatly appreciated! Edit: Here is an example from jotform: http://form.jotformpro.com/form/52071860014950?

austinclamon
  • 21
  • 8
  • You mean the user can draw with their mouse and submit the drawing as an image by using a `
    `?
     – showdev Mar 21 '18 at 21:08
  • @showdev canvas + http POST would do it. –  Mar 21 '18 at 21:11
  • Exactly. Here is an example I found that Jotform has implemented: http://form.jotformpro.com/form/52071860014950? – austinclamon Mar 21 '18 at 21:11
  • You would use the HTML `` element for the user to do the drawing on and then save the drawing as a "data URL". You'd then take that data URL and populate an ``. – Scott Marcus Mar 21 '18 at 21:15
  • @ScottMarcus I think that is the right direction. Thanks so much! Is there a fiddle or something that you know of that demonstrates this? – austinclamon Mar 21 '18 at 21:23
  • [Here's a link](https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse) to show how to allow the user to draw on the canvas. Then, when ready, call the [`.toDataURL()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) canvas method to convert the drawing to a URL. Finally, just set that URL as the `value` of an `input type=hidden` - then it will be submitted along with the rest of the form. – Scott Marcus Mar 21 '18 at 21:33

0 Answers0