Question

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

我设法实现了这个没有问题，我可以绘制，保存和显示图像没有问题，除了一个细节：图像以透明背景保存。

默认情况下，图像保存为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

我检查了author's page中的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实例后设置背景颜色属性不会影响颜色。 / p>

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

修改

1 个答案: