`fromDataURL()` scaling issue

[sheam]

When I restore using fromDataURL(), the restored signature is about 1/4 size it was drawn in.

render the Signature Pad like this:

    public render(): JSX.Element
    {
        return (
            <div className="signature-modal-container">
                <div className="signature-modal">
                    <SignatureCanvas canvasProps={{ width: 600, height: 300 }} penColor="rgb(40,66,131)" ref={(r) => { this._signatureCanvas = r;}} />
                    <div className="signature-footer">
                        <span className="sign-above">sign above</span>
                        <div className="buttons">
                            <a onClick={this.clearClicked}>clear</a>
                            <Button bsStyle="primary" bsSize="xs" onClick={this.doneClicked}>Save</Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

And my save method looks like this:

    @action.bound
    private doneClicked(): void
    {
        this.log('saving signature');
        this.props.delivery.SignatureData = this._signatureCanvas.getCanvas().toDataURL('image/png', 1.0);
        this._signatureCanvas.clear();
        this._signatureCanvas.fromDataURL(this.props.delivery.SignatureData);
    }

For testing purposes, I am just doing toDataURL(), clearing canvas, then restoring the contents. The restored drawing is shrunked by a factor of DPR. For example in the Chrome device emulator the iPhone 6 has a DPR of 2.0, so on save/restore the result is half ths size I drew it.

How do I handle this situation so the sigature remains the same size on save/restore on a phone?

[agilgur5]

this seems to be related to https://github.com/szimek/signature_pad/issues/332, https://github.com/szimek/signature_pad/issues/265, https://github.com/szimek/signature_pad/issues/255, https://github.com/szimek/signature_pad/issues/200 , https://github.com/szimek/signature_pad/issues/153 , https://github.com/szimek/signature_pad/issues/105 , https://github.com/szimek/signature_pad/issues/89 which are related to the scaling that fromDataURL does against DPR (see also https://github.com/agilgur5/react-signature-canvas/pull/10#issuecomment-318845476). https://github.com/szimek/signature_pad/pull/253 has a "solution" in there, but it would be nice to handle automatically if possible

[agilgur5]

Hi @sheam -- I just released v1.0.0-alpha.1 which now fully wraps the original signature_pad (per #17 / #20 ). The functionality to support custom options passed into fromDataURL was released in signature_pad v2.2 via szimek/signature_pad#253 and as such is now available within react-signature-canvas as well.

I think this resolves the problem, but requires manual intervention. Handling this properly / automatically would be preferred, so I'll leave this issue open as such.

[agilgur5]

I revisited this recently and I realized that I'm not sure more can even be done to handle DPR automatically. There's no way of knowing the DPR at which the dataURL was created, so I think the new options that allow you to specify it manually resolve the issue correctly.

It's possible the default DPR for fromDataURL should be something different so that the very same signature that was just created isn't resized improperly, but that would be an issue to handle upstream in signature_pad then.

Will be closing this out now.

[nipoonp]

I fixed this by making sure the height and the width of the sigPad is the same as when I initialized it.

sigPad.current.fromDataURL(url, { width: SIGNATURE_PAD_WIDTH, height: SIGNATURE_PAD_HEIGHT });