无法在 jSignature 中导入现有数据答案

【问题标题】：Unable import existing data in jSignature无法在 jSignature 中导入现有数据
【发布时间】：2023-03-15 19:25:01
【问题描述】：

这是我在数据库中保存 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。

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

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

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

未捕获的错误：jSignature 无法使用 for 找到导入插件格式'image/svg+xml;base64'

【问题讨论】：

标签： javascript jsignature

【解决方案1】：

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

它抛出错误的原因是导入器不支持格式'image/svg+xml;base64'，只有导出器支持。

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

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

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

【讨论】：

好的。如果我将代码更改为 `var data = datapair.jSignature("getData", "base30");它会起作用吗？
是的，你可以使用 base30 的 getData 和 setData
是的... Karthik。有用！！！非常感谢..你节省了我的时间。非常感谢。
没问题。祝你有美好的一天
但是将base30数据打印为图像并不容易......对吧？

【解决方案2】：

setData 有两个参数 - 数据对象，数据格式名称。当数据对象是以 data-url 格式格式化的字符串时，您不需要指定数据宿舍名称。数据格式名称 (mime) 将隐含在 data-url 前缀中。请参阅下面的示例。返回（以传统的 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' 它是什么格式。

【讨论】：