save file as SVG on mobile devices

[Pogorzelas]

Hello,
I have problem with saving my signature as svg on mobile devices.

1. write something on signature pad
2. save file using signaturePad.toDataURL('image/svg+xml') and then save it somewhere
3. load this file using signaturePad.fromDataURL(previousFile)

What is the current behavior?
4. signature pad display only 25% area of svg loaded in left upper corner

What is the expected behavior?
4. signature pad display full file

#440 this solution works for me but for some reason this PR is closed.

[nathany]

See #411

This issue looks like a duplicate of #439

[szimek]

@abraxxa Hi! I don't want to discuss details of this issue in #465, so I'll follow up here.

I created a demo that loads an SVG file (created with this library) via SignaturePad#fromDataURL and as <img> tag: https://jsfiddle.net/szimek/r3qfg4vm/. Both images are displayed correctly, even if I zoom in/out, which changes the value of window.devicePixelRatio.

Could you update this demo to replicate this issue?

I reviewed the code and it looks like it should be correct as it is, i.e.:

• canvas height and width is taken from CSS, using canvas.offsetHeight and canvas.offsetWidth;
• if canvas size is e.g. 300 x 200px, then its internal coordinates will match this values, i.e. top left corner will have coordinates 0,0 and bottom right one will have 300, 200
• the same values are used in viewBox attribute of generated <svg> tag; it uses canvas.height / ratio, but it should be the same as canvas.offsetHeight, because canvas.height is defined as canvas.offsetHeight * ratio, so it's simply undoing this multiplication
• given that viewBox value ("0 0 300 200") matches canvas internal coordinates, it should work when using SignaturePad#fromDataURL and if you show it using <img> tag you should be able to adjust its sizes simply via CSS (as in the demo linked in this comment)

I guess I'm missing something, given the number of people who reported this issue, but it would be great to be able to replicate it.

[abraxxa]

@szimek sorry for the delay but I was able to reproduce it now by disabling your resizeCanvas function: https://jsfiddle.net/gcr2u0e3/

I'm not sure if the https://github.com/szimek/signature_pad#handling-high-dpi-screens section was already in the docs when I started using your library. Can you add the function and auto-resize feature to the library so not every user needs to implement it on her/his own? Maybe behind a new option disabled by default to not cause a breakage on update?

[abraxxa]

I've played with my Quasar app and found out the following:

• you need to call resizeCanvas before fromDataURL
• setting the height and width attributes on the canvas tag directly in the html instead of css, the drawn line is multiplied by the devicePixelRatio, for example on my 27" 4k screen with a 1.5 ratio, a 200 pixel mouse movement would draw a 300 pixel line
• the wrapper class and position, left and top canvas attributes aren't needed

[szimek]

@abraxxa Thanks for the feedback!

I don't really want to provide a default resize function, because it depends on specific requirements, e.g.

• some people might want to store image before resize and then restore it after, * or they might want to listen to onorientationchange instead,
• or might want to calculate canvas width/height differently (e.g. element.offsetWidth/Height is the simplest way, but it includes border and padding as well; one would need to use window.getComputedStyle to get more accurate dimensions)
• ...

But I agree that it's not explained in the README at all that custom logic is needed to properly display things on different screen sizes. I'll try to come up with a better documentation for that, some kind of "Getting started" section.

If you have any suggestions what you'd like to see in this section, let me know.