Draw On Image Size

  • mybackcracker
    Asked on January 1, 2016 at 7:31 PM

    I seem to keep having a problem sizing the draw on image...My image is on my website as 520 x 390 which is the same dimensions as the widget yet it gets cut off. Obviously I want mobile users to be able to utilize this so what size should my form be and what side do I make the photo on my hosting site and in the widget? Thanks

  • Kevin Support Team Lead
    Replied on January 1, 2016 at 11:07 PM

    Hi,

    Thank you for contacting us.

    Just add this CSS code as the image below, and the background image will be displayed properly in the widget : 

    .drawing-board-canvas-wrapper{

     background-size:100%;

    }

    Draw On Image Size Image 1 Screenshot 20

    Hope this will help you.

    Thanks.

  • mybackcracker
    Replied on January 2, 2016 at 2:00 AM

    Fantastic..thanks..one more question..is there a way to have the drawn on image show up on a different page in the form after someone has drawn on it?
    If a patient was to draw on the image and answer a few questions I would like to be able to view their image later in the form. 

  • Boris
    Replied on January 2, 2016 at 7:14 AM

    On behalf of my colleague, Kevin, you are most welcome. :)

    When it comes to displaying the same image that was already drawn-on later in the form, I'm afraid that this is not currently possible because the image is created only after the form has been submitted. Until then, the image and the drawing overlay exist separately inside the widget, and are only merged into an actual image when the form is submitted.

    Since the image does not exist before the form is submitted, the only way to view it is to actually view the Draw On Image widget itself, the one in which it has been drawn. As you navigate back and forth through pages of the form, all other pages of the form are hidden.

    This means that in order to show the Draw On Image widget from page 1 on a different page, the workarounds to achieve it would require displaying page 1 at the same time with that second page where you would be on, which would also cause clashes in the layout / design of that other page of the form.

    If you need assistance with anything else, please don't hesitate to open a new thread about it, and we will be happy to help.

  • mybackcracker
    Replied on February 27, 2016 at 3:17 AM

    Hello...when I draw on an image it does not match up in the submission ...and fix to this? https://form.jotform.com/43064227151143

  • Boris
    Replied on February 27, 2016 at 4:43 AM

    Sorry about this, it seems that the CSS for changing background-size for the image is not playing well with drawing on the image.

    Please try re-sizing your image in an image manipulation program to be the size of 610 X 610, as this is the size of the image displayed on the form, and it should be working correctly after that. You will no longer need the CSS for changing the background size.

    Your current image is of size 1054 x 1024, so here is a resized version that you could use:

    Draw On Image Size Image 1 Screenshot 40

    I have tested the resized image, and it appears to be working fine, this is on the form:

    Draw On Image Size Image 2 Screenshot 51

    And this is how it turned out in the submission:

    Draw On Image Size Image 3 Screenshot 62

    Please try it out and let us know how it goes.