php - JQuery jSignature 获取和发布生成的图像

Question

我正在尝试使用此处找到的绘图应用程序: https://github.com/brinley/jSignature/

情况:

1

可以绘制图像的编辑板提取图像并通过 AJAX 将图像发送到另一个文件的按钮

2

第二个文件获取图像并将其写入文件。

问题

签名字段工作得很好。但是提取数据并将其发送到另一个文件则不然。

function GetCanvasContents() {
    var datapair = $("#signature").jSignature("getData", "svgbase64")
    var i = new Image()
    i.src = "data:" + datapair[0] + "," + datapair[1]
    $(i).appendTo($("#displayarea"))
    var SetImage = $("#frameDemo").contents();

    SendSignatureImage(SetImage);
}

function SendSignatureImage(Image) {
    ///######## SENDING THE INFORMATION BY AJAX
    $.ajax({
        type:   "POST",             ///######## SEND TYPE
        url:    "fetchimage.php",   ///######## TARGET FILE TO RETRIEVE INFORMATION
        data: {
            'image': Image
        },
        ///######## IN CASE OF SUCCESS
        success: function (response) {
            if (response == "ok") {
                alert("correct");
            }
            else {
                alert("Response = " + response);
            }
        }
    }
    );
}

HTML 代码:

<div>
<div id="content">
    <button name="GetContents" onclick="GetCanvasContents();">Get contents</button>
    <div id="signatureparent">
        <div id="signature">
        </div>
    </div>
    <div id="tools"></div>
    <div><p>Display Area:</p><div id="displayarea"></div></div>
</div>
<div id="scrollgrabber"></div>
</div>

Answer 1

您必须将 datapair[1] 变量中的 base64 编码的 XML 字符串发送到 PHP 页面，然后在 PHP 的服务器端将其转换为图像。