Question

我一直在尝试使用签名面板来处理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示例之一。*（或者如果有更好的方法......在客户端，可以直接点击并保存图像。我真的很确定为什么这对我来说太难了）

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

一旦我们解决了这个挑战，我们可以把这只小狗放到床上; ）

Answer 1

我总是将JSON数据保存到文本类型字段（如Oracle中的CLOB）中，然后使用库函数在页面上显示它：

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

其中signatureData是JSON字符串。

因此，您可以将域类更改为包含

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

所以现在当他们进入签名并点击＆＃34; OK＆＃34; processSignature确实做了什么 - 只是充当占位符。 AJAX调用将设置页面上隐藏字段的值。然后，当他们提交整个表单（包含其他数据）时，正常的save()方法会将sig作为另一个参数，并自动将其保存到域类中的sig字段。< / p>

如果您需要，可以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}"""
}

JQuery签名面板插件

1 个答案: