javascript - 签名板压印文本大小在画布比例内变化

Question

我已经为我的网站实现了签名板画布。我想在用户签名后保存签名时留下印记。我面临的问题是使印记尺寸适合画布宽度。画布大小取决于用户签名比例。

它是这样保存的

如果你能看到我在画布空间上绘制签名后已经修剪掉了。在将签名画布下载为图像后，我正在使用另一个函数在签名画布的顶部打印值。我想根据画布宽度调整该文本宽度以适应画布区域内的整个文本值。

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');

function dataURLToBlob(dataURL) {
  // Code taken from https://github.com/ebidel/filer.js
  var parts = dataURL.split(';base64,');
  var contentType = parts[0].split(":")[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], {
    type: contentType
  });
}

SignaturePad.prototype.removeBlanks = function() {
  var cif = "0000885458";
  var shortName = "/MR Jhon Doe";
  var ref = "0854220190000001585/";
  var imprintValue1 = "";
  var imprintValue = "";

  var imgWidth = this._ctx.canvas.width;
  var imgHeight = this._ctx.canvas.height;

  var imageData = this._ctx.getImageData(0, 0, imgWidth, imgHeight),
    data = imageData.data,
    getAlpha = function(x, y) {
      return {
        red: data[(imgWidth * y + x) * 4],
        green: data[(imgWidth * y + x) * 4 + 1],
        blue: data[(imgWidth * y + x) * 4 + 2]
      };
    },
    isWhite = function(rgb) {
      return rgb.red == 255 && rgb.green == 255 && rgb.blue == 255;
    },
    scanY = function(fromTop) {
      var offset = fromTop ? 1 : -1;

      // loop through each row
      for (var y = fromTop ? 0 : imgHeight - 1; fromTop ? (y < imgHeight) : (y > -1); y += offset) {

        // loop through each column
        for (var x = 0; x < imgWidth; x++) {
          if (!isWhite(getAlpha(x, y))) {
            return y;
          }
        }
      }
      return null; // all image is white
    },
    scanX = function(fromLeft) {
      var offset = fromLeft ? 1 : -1;

      // loop through each column
      for (var x = fromLeft ? 0 : imgWidth - 1; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {

        // loop through each row
        for (var y = 0; y < imgHeight; y++) {
          if (!isWhite(getAlpha(x, y))) {
            return x;
          }
        }
      }
      return null; // all image is white
    };

  var cropTop = scanY(false),
    cropBottom = scanY(true),
    cropLeft = scanX(true),
    cropRight = scanX(false);

  cropTop += 30;
  cropRight += 20;

  var relevantData = this._ctx.getImageData(cropLeft - 10, cropTop - 20, cropRight - cropLeft, cropBottom - cropTop);
  this._ctx.canvas.width = cropRight - cropLeft;
  this._ctx.canvas.height = cropBottom - cropTop;

  if (cif && shortName && ref) {
    imprintValue1 = cif.concat("" + shortName);
    imprintValue = ref.concat(imprintValue1);
  }

  this._ctx.clearRect(0, 0, cropRight - cropLeft, cropBottom - cropTop);
  this._ctx.putImageData(relevantData, 0, 0);

  var canvas_width = this._ctx.canvas.width;

  var fontBase = canvas_width, // selected default width for canvas
    fontSize = 70;
  var ratio = fontSize / fontBase; // calc ratio
  var size = canvas_width * ratio; // get font size based on current width
  this._ctx.font = size;

  // draw the imprintValue
  this._ctx.fillStyle = "#e42f2f";
  this._ctx.fillText(imprintValue, 0, 15);
};

saveButton.addEventListener('click', function(event) {
  signaturePad.removeBlanks();
  var dataURL = signaturePad.toDataURL('image/png');

  download(dataURL, "signature.png");
});

function download(dataURL, filename) {
  if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
    window.open(dataURL);
  } else {
    var blob = dataURLToBlob(dataURL);
    var url = window.URL.createObjectURL(blob);

    var a = document.createElement("a");
    a.style = "display: none";
    a.href = url;
    a.download = filename;

    document.body.appendChild(a);
    a.click();

    window.URL.revokeObjectURL(url);
  }
}

cancelButton.addEventListener('click', function(event) {
  signaturePad.clear();
});

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img {
  position: absolute;
  left: 0;
  top: 0;
}

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 200px;
}

<script src="https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.umd.min.js"></script>
<h1>
  Put Signature
</h1>
<div class="wrapper">
  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button id="save">Save</button>
  <button id="clear">Clear</button>
</div>

标签： javascripthtmlhtml5-canvasdigital-signaturesignaturepad