JQuery 签名面板插件

Question

我一直在尝试让签名面板在 grails 中工作。在客户端，一切看起来都正常，但我一直在努力研究如何将签名保存到数据库记录中。

我尝试了几个不同的版本，最后一个版本最接近于描述如何使用 php、ruby 或 python 来使用 ImageMagic 等。但是，尝试在 groovy 中执行此操作让我迷失了方向，因为我对如何编码还有些陌生。此外，我不确定在 Cloud Foundry 上运行时是否使用 3rd 方实用程序。

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

所以现在当他们输入签名并点击“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}"""
}