无法在 jSignature 中导入现有数据

Question

这是我在数据库中保存 jSignature 值的代码：

var datapair = $('.sign-wrapper').jSignature();
datapair.bind('change', function(e){
        var data = datapair.jSignature("getData", "svgbase64");
        var i = new Image()
        i.src = "data:" + data[0] + "," + data[1];

        $(this).prev('input').val(i.src);
});

所以我的数据库中有以下值：

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iODkiIGhlaWdodD0iMTEyIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDEgMTExIGMgMC4wNCAtMC4xNCAxLjAyIC01LjQ1IDIgLTggYyAyLjM0IC02LjA4IDUuOSAtMTEuODcgOCAtMTggYyAxLjg2IC01LjQ0IDMuMDkgLTExLjIyIDQgLTE3IGMgMS4xIC02Ljk4IDAuODggLTEzLjk4IDIgLTIxIGMgMS4yNSAtNy44MyAzLjA0IC0xNS4zOSA1IC0yMyBjIDAuNzEgLTIuNzYgMS43NiAtNS41MiAzIC04IGMgMS4wNSAtMi4wOSAyLjUyIC00LjA4IDQgLTYgYyAxLjg5IC0yLjQ2IDMuOTIgLTQuOTIgNiAtNyBjIDAuODEgLTAuODEgMi4yNiAtMi4yMiAzIC0yIGMgMS43NyAwLjUzIDUuMzcgMyA3IDUgYyAyLjM3IDIuOTEgNC40NiA3LjEzIDYgMTEgYyA1LjQ2IDEzLjc5IDkuMzIgMjguNTIgMTUgNDIgYyAyLjIzIDUuMjkgNi4zOCA5Ljc2IDkgMTUgYyAzLjQyIDYuODQgNS43NiAxNC43NiA5IDIxIGwgNCA0Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAyMCA2NCBjIDAuMTEgLTAuMTIgMy43MyAtNS40IDYgLTcgYyAyLjk4IC0yLjEgNy4yMSAtMy44NSAxMSAtNSBjIDcuMDcgLTIuMTQgMTQuNzggLTMuNzEgMjIgLTUgYyAxLjkyIC0wLjM0IDYgMCA2IDAiLz48L3N2Zz4=

因此，在重新加载页面时，我在隐藏变量中拥有上述 base64 图像数据 url。

我尝试使用以下代码将数据加载到现有签名 canvas：

// If value exist load existing
      var src = $(this).prev('input').val();
      if(src != '') {
        datapair.jSignature("importData", src);
      }

但它不起作用，我在控制台中收到以下错误：

Uncaught Error: jSignature is unable to find import plugin with for format 'image/svg+xml;base64'

Answer 1

插件无法识别您的数据时会出现此问题。

之所以会报错是因为importer不支持'image/svg+xml;base64'格式，只有exporter支持。

参考： https://github.com/brinley/jSignature#data-import--export-and-plugins

我建议您使用 base30 存储数据，因为它支持导出和导入。

var data = datapair.jSignature("getData", "base30 ");

Answer 2

setData 有两个参数——数据对象、数据格式名称。当数据对象是以 data-url 模式格式化的字符串时，您不需要指定数据 dormat 名称。数据格式名称 (mime) 将从 data-url 前缀中隐含。请参见下面的示例。 Returns（以传统的 jQuery 可链接方式）jQuery 应用插件的元素的对象引用。

您可以将值存储在 base64 中并加载它。我将 base64 中的值加载到输入中，并通过 Jquery 将其加载到对象中。

// Creo el objeto de firma.
$("#jq_sig").jSignature
({
    // width/height of signature pad
    width: 497,
    height: 200,
    // Format bootstrap 4
    cssclass: "bg-light border",
    lineWidth: 2,
    color: "black",
});

// I take the value of the form field that I previously loaded with PHP.
var firma = $('#form input[name=firma]').val();

if (firma.length > 0) 
{
    $("#jq_sig").jSignature("setData", 'data:image/png;base64,' + firma);                       
    console.log('Signature loaded.');
}
else
{
    console.log('Signature not loaded.');
}

您可以以任何格式保存到您的数据库。然后你告诉'setdata'是什么格式

无法在 jSignature 中导入现有数据

Unable import existing data in jSignature

javascript

jsignature