如何使用 AngularJS/Ionic 的签名板库保存带有背景颜色的绘制图像？

Question

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

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

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

我试图在我的 CSS 上为我的 canvas 应用背景颜色，但是当保存图像时，背景颜色没有应用到图像。我知道我可以只在白色背景上显示，但这是我们要求它具有白色背景的一部分。

我的签名模板是这样的：

<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>

我的 canvas 风格是这样的：

.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)，canvas没变，以为是我的CSS，去掉了背景色属性从那里开始，canvas 仍然显示为白色，使用了 CSS 的颜色，但这不会影响图像的背景。为什么不使用签名板属性中设置的背景渲染 canvas？无论我将背景颜色放在哪里，无论是 CSS 还是 pad 的属性，我保存的图像签名都不会应用任何颜色。

Answer 1

我检查了 author's page 中的绘制图像示例，他实例化 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 后更改背景颜色，那么我可能建议关闭并再次重新创建 canvas，因为在创建实例后设置背景颜色属性 SignaturePad 不影响颜色。

如何使用 AngularJS/Ionic 的签名板库保存带有背景颜色的绘制图像？

How to save drawn image with a background color using Signature Pad library for AngularJS/Ionic?

electronic-signature

angularjs

ionic-framework

编辑