1

私は Ionic プロジェクトに取り組んでおり、このライブラリを実装してクライアント署名の描画を処理しています。

これを問題なく実装できました.1つの詳細を除いて、問題なく画像を描画、保存、表示できます.画像は透明な背景で保存されます.

デフォルトでは、画像は 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 の色が使用されていますが、それは使用されていません。画像の背景に影響を与えません。署名パッドのプロパティで設定された背景でキャンバスをレンダリングしないのはなぜですか? 背景色をどこに置いても、CSS またはパッドのプロパティのいずれであっても、保存した画像署名には色が適用されません。

4

1 に答える 1

2

私は著者のページから画像の例を描くをチェックし、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 に答える