如何使用AngularJS/Ionial的Signature Pad库保存绘制的带有背景色的图像

Question

我正在进行一个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，并从中删除了背景色属性，画布仍然显示为白色，使用了CSS中的颜色，但这不会影响图像的背景。为什么不在签名板属性上设置背景来渲染画布？无论我把背景颜色放在哪里，无论是CSS还是pad的属性，我保存的图像签名都不会应用任何颜色。

Answer 1

我查看了作者页面上的Draw-over图像示例，他实例化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实例后设置背景颜色属性不会影响颜色。