0

署名パネルを grails で動作させようとしています。クライアント側ではすべてが機能しているように見えますが、署名をデータベース レコードに保存する方法に苦労しています。

私はいくつかの異なるバージョンを試しましたが、最後のバージョンは、php、ruby、または python を使用して ImageMagic などを使用する方法の説明に最も近いものでした。しかし、これを groovy でやろうとすると、私はまだコーディング方法に少し慣れていないので、道に迷ってしまいました。また、これがクラウドファウンドリーで実行される場合、サードパーティのユーティリティを使用するかどうかもわかりません。

SignaturePanel と呼ばれるプラグインは、他のプラグインとまったく同じように見えます... jes-sherborne/jquery-signature-panel-plugin

これが私のファイルのコードです。

まず、create.gsp には Javascript コードが含まれています。

<title><g:message code="default.create.label" args="[entityName]" /></title>
        <!--  jQuery signature element code begins here -->
        <!--[if lt IE 9]><script type="text/javascript" src="${resource(dir: 'js', file: 'excanvas.compiled.js')}"></script><![endif]-->
    <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.4.4.min.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.signature-panel.js')}"></script>

    <link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.signature-panel.css')}" type="text/css"/>


    <script type="text/javascript">

        function signatureOK(signatureData) {
            // Send the signature to the server and generate an image file.
            $.ajax({
                url:"processSignature",
                type:"POST",
                data:JSON.stringify(signatureData),
                contentType:"application/json; charset=utf-8",
                dataType:"text",
                success: function(data, textStatus, jqXHR){
                    $("#latest-signature").attr("src", data);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });
            $("#sig-panel").signaturePanel("clear");
        }

        function signatureCancel() {
            alert("Cancelled.");
        }

        $(document).ready(function() {
            $("#sig-panel").signaturePanel({
                okCallback: signatureOK,
                cancelCallback: signatureCancel
            });
        });

    </script>

_form.gsp

<!-- Signature Panel Begins Here -->

    <label for="sig"><g:message code="salesOrder.sig.label" default="Customer Signature" /></label>
    <div class="fieldcontain" ${hasErrors(bean: salesOrderInstance, field: 'sig','error')} id="sig-panel" style="width: 500px; height: 150px; border: 0px none"></div>
    <canvas id="latest-signature" style="width: 500px; height: 150px; border: 0px none"></canvas>

<!-- End of Signature Panel -->

コントローラ

// Capture Customer Signature JSON Data, Processes to Image, and Stream to Database
    @Secured(['ROLE_ADMIN','ROLE_SALES'])
    def processSignature() {
        flash.message = message(code: 'default.created.message', args: [message(code: 'salesOrder.label', default: 'Signature'), ])
        // groovy code here 
        // We need to read the JSON POST data
         InputStream body = request.getInputStream();
         log.info(body) // nothing happens here
    }

これは、私が groovy で行う方法を理解しようとしている Ruby の例の 1 つです。これは私にはとても難しいです）

### Generating image files on the server using Ruby

The Ruby library uses ImageMagick to generate a `Magick::Image` object, which you can use to write image files or stream the data in a variety of formats (PNG, JPEG, etc.). By default, the function will generate an image with the same pixel measurements as were originally captured on the client. You can also specify the size of the generated image, and SignaturePanel will scale the signature appropriately to fit within these bounds.

To generate the image, you will write code like this:

```ruby
require 'signature-panel.rb'
...

post '/process-signature' do
    image = SignaturePanel::GenerateImage(request.body.read)
    filename = 'latest-signature.png'

    image.write(filename)

    # If you want to stream your PNG directly to a database instead of saving a file,
    # you can get a binary stream like this:
    # image.to_blob {self.format = "PNG"}

    content_type :text

    # Send the name of the newly-generated file to the client
    body filename
end
```

私の質問は、Groovy を使用して、フォーム データの残りすべてと一緒に署名をデータベースに保存するにはどうすればよいですか?

また、私のドメインクラスから言及する必要があります

byte[] sig

sig nullable: true, maxSize: 1048567

この課題を解決したら、この子犬を寝かせることができます。)

4

1 に答える 1

0

私は常に JSON データをテキスト型フィールド (Oracle の CLOB など) に保存し、ライブラリ関数を使用してページに表示しました。

$("#signature-display").signaturePanel("drawClickstreamToCanvas", signatureData);

はsignatureDataJSON 文字列です。

したがって、ドメインクラスを変更して含めることができます

String sig

sig nullable: true, maxSize: 1048567

これにより、私が非常にクールだと思うことを行うこともできますが、それが役立つかどうかはアプリによって異なります。署名の実際の署名を再作成してアニメーション化できます。

$("#signature-replay").signaturePanel("animateClickstreamToCanvas", signatureData, callback);

ドキュメントでは、オプションのcallback機能について説明しています。私はそれを使用したことはありません。

ajax 呼び出しの一部を変更する場合、contentTypeストレート テキストを送信して隠しフィールドを設定するため、行を削除します。

type:"POST",
data:{"signature": JSON.stringify(signatureData)},
//contentType:"application/json; charset=utf-8",
success: function(data, textStatus, jqXHR){
    //set the hidden field value
    $('#sig').val(JSON.stringify(signatureData));
    //show signature on same page as preview (optional)
    $("#latest-signature").signaturePanel("drawClickstreamToCanvas", signatureData);
},
....

そして、フォームに非表示フィールドを次のように追加します

<g:hiddenField name="sig" />

そのため、署名を入力して [OK]processSignatureをクリックしても、実際には何も実行されません。プレースホルダーとして機能するだけです。AJAX 呼び出しは、ページの非表示フィールドの値を設定します。次に、フォーム全体を（他のデータとともに）送信すると、通常のsave()メソッドは別のパラメーターとして取得され、ドメイン クラスsigのフィールドに自動的に保存されます。sig

次のことが必要であるかのように、processSignatureメソッド内の通常の文字列としてデータにアクセスできます。params.signature

def processSignature() {
    flash.message = message(code: 'default.created.message', args: [message(code: 'salesOrder.label', default: 'Signature'), ])
    def signature = params.signature
    log.info(signature)
    response.contentType = "application/json"
    render """{"ok":true}"""
}
于 2013-01-12T01:23:23.197 に答える