Question about signature size vs canvas size

[shawe]

I'm using this function #49 (comment) shared by @jaredatch that crop the user signature without whitespace.

My code now is like this, for always resize and draw, that in my opinion is not correctly explained on your example: #33 (comment) and this caused a lot of issues reported here.

I based my code in your example code but I'm using BootStrap for responsiveness and the canvas size can be set different width/height for any device, and signature is always set with canvas size, without respecting the stored canvas size and aspect ratio. Is there a way to change this behavior? In other words, I prefer to get a scaled signatured inside of canvas used by signature_pad.

For example, this can help me: #153 (comment) ?

[shawe]

Yes, it worked for me before some changes, and I think is the better way for responsive designs:

  /**
   * All credits to @jaredatch: https://github.com/szimek/signature_pad/issues/49#issuecomment-260976909
   * 
   * Crop signature canvas to only contain the signature and no whitespace.
   *
   * @since 1.0.0
   */
  function cropSignatureCanvas(canvas) {
     ...
  }

  function resizeCanvas() {
     var ratio = Math.max(window.devicePixelRatio || 1, 1);
     signatureCanvas.width = signatureCanvas.offsetWidth * ratio;
     signatureCanvas.height = signatureCanvas.offsetHeight * ratio;
     signatureCanvas.getContext("2d").scale(ratio, ratio);
  }

  function drawCanvas() {
     resizeCanvas();
     signaturePad = new SignaturePad(signatureCanvas);
     dataURL = "{$fsc->signature}";
     if (dataURL !== "") {
        var image = new Image();
        var xIniCanvas = 25;
        var yIniCanvas = 25;
        var scaleFactor = 0.85;
        signaturePad.clear();
        image.src = dataURL;
        image.onload = function () {
           width = image.width;
           height = image.height;
           signatureCanvas = document.getElementById("signature");
           if ((width / scaleFactor) > signatureCanvas.width) {
              width = scaleFactor * signatureCanvas.width;
              height = scaleFactor * height * (signatureCanvas.width / image.width);
           }
           if ((height / scaleFactor) > signatureCanvas.height) {
              height = scaleFactor * signatureCanvas.height;
              width = scaleFactor * width * (signatureCanvas.height / image.height);
           }
           signatureCanvas.getContext("2d").drawImage(image, xIniCanvas, yIniCanvas, width, height);
        };
        signaturePad._isEmpty = false;
     }
  }

  window.addEventListener("resize", drawCanvas);
  drawCanvas();

And before submiting the data to database I do this:

  $("#input_signature").val(cropSignatureCanvas(signatureCanvas));

[RajuKottedi]

i have tried your method but its not working may be i am using it differently. could you please make plunker how you have done it ?

[shawe]

@RajuKottedi yes, and I'm interested if you find a better way also. I'm using FacturaScripts and it uses RainTPL, all mentions to {$fsc->vars} are equivalent to $this->vars on the controller side.

This is my full script block on view:

https://pastebin.com/VY4iuytU

Using this way, works great on all devices, but the saved image was scaled on redraw , and I'm interested to only scale it when was loaded on a different device with different aspect ratio that require it. Has no sense for me obtain a different aspect ratio before and after save, but at least, is working.

Share any progress you get ;)

[RajuKottedi]

@shawe thanks for the code. Will let you know if there is any progress :)