1

我正在开发一个 Ionic 项目并实现了这个库来处理客户端签名的绘制。

我已经成功地实现了这一点，我可以毫无问题地绘制、保存和显示图像，除了一个细节：图像以透明背景保存。

默认情况下，图像保存为 PNG 文件，这是我想要的，但它需要有白色背景。该库声明backgroundColor可以将其设置为任何非透明颜色，但仅适用于 JPEG 图像，实际上我对 PGN 图像进行了尝试，它以透明背景保存。

我试图在我的 CSS 上将背景颜色应用于我的画布，但是当图像被保存时，背景颜色不会应用于图像。我知道我可以只在白色背景上显示，但我们要求它具有白色背景。

这是我绘制签名的模板：

<ion-modal-view class="signature-modal">

  <div class="button button-clear signature-close-button" ng-click="closeSignatureModal()"><span class="icon ion-close"></span></div>
  <div class="signature-container">
    <div class="signature_canvas_container">
      <canvas id="signature-pad" class="signature-canvas"></canvas>
    </div>
    <div class="signature-container-separator"></div>
    <div class="row signature-buttons-container">
      <div class="col col-11"></div>
      <div class="col col-33">
        <button class="button button-full button-light" data-action="clear" ng-click="clearSignature()">Limpiar</button>
      </div>
      <div class="col col-12"></div>
      <div class="col col-33">
        <button class="button button-full button-positive" data-action="save" ng-click="saveSignature()">Guardar</button>
      </div>
      <div class="col col-11"></div>
    </div>
  </div>
</ion-modal-view>

我的画布风格是这样的：

.signature-canvas{
  width : 100%;
  height : 100%;
  background-color: white;
}

签名板的配置属性如下：

    canvasPad = document.getElementById("signature-pad");
    $scope.resizeCanvas(); 
    signaturePad = new SignaturePad(canvasPad);
    signaturePad.minWidth = 1;
    signaturePad.maxWidth = 1.5;
    signaturePad.dotSize = 3;
    signaturePad.backgroundColor = "rgb(255, 255, 255)";
    signaturePad.penColor = "rgb(66, 133, 244)";

保存它是这样完成的：

var rawImage = signaturePad.toDataURL();

我错过了什么吗？PNG图像可以用背景颜色保存吗？

编辑

我将背景颜色更改为rgb(0, 125, 255)并且画布没有更改颜色，认为这是我的 CSS 并从那里删除了 background-color 属性，但画布仍然显示为白色，使用了 CSS 中的颜色，但那没有t 影响图像的背景。为什么不使用签名板属性上设置的背景来渲染画布？无论我将背景颜色放在哪里，无论是 CSS 还是 pad 的属性，都不会对我保存的图像签名应用颜色。

4

1 回答 1

2

我检查了作者页面上的 Draw over image 示例，他实例化 SignaturePad 的方式给出了解决此问题的方法：

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

如果您像这样设置背景颜色，而不是这样做signaturePad.backgroundColor = 'rgba(255,255,255,1)'，则背景颜色生效，当您保存图像并稍后显示时，它将以背景颜色显示。

虽然如果您需要在 SignaturePad 实例化后更改背景颜色，那么我可能会建议您再次关闭并重新创建画布，因为在创建 SignaturePad 实例后设置背景颜色属性不会影响颜色。

于 2016-05-05T15:13:36.543 回答