Question

使用此命令保存图像后

$("#canvas").jSignature("getData", "base30");

我们可以将这些数据存储到DB中，它是一个简单的字符串：

data:image/jsignature;base30,9MZ4555665655465644644645433232100Y2333465656786456646464443Z54334433222Y13344544486666667775353646443_2xZ110000000Y1111111222223222344555332220100000Z11111121212130Y122222333343222111100000Z1111212222122212

现在如何从“base30”签名制作图像？我们可以将其转换为任何内容，以便可以在网站上显示吗？

或许有一种方法可以禁用编辑画布。为了防止更改签名？

更新

我做了一些解决方法，但它确实有效。

我创建了一个不可见的div，我从DB加载jSignature并使其不可见，然后我从中获取svg并在页面中显示svg

<div id="oldSignature" style="display: none"></div>
<object id="img" type="image/svg+xml" data="">
    Your browser doesn't support SVG!
</object>

@if (isset($offer->signature))
        var sigCanvas = $("#oldSignature").jSignature({width: 700, height: 180, "background-color":"#ddd"});
        $("#oldSignature").jSignature("importData", "{{$offer->signature}}");
        var svg = $("#oldSignature").jSignature("getData", "svg");
        $("#img").attr("data", 'data:' + svg);
@endif

Answer 1

查看Github上的extras文件夹。有php和DotNet的例子。

关于Base30格式，docs for jSignature说

base30（别名image / jSignature; base30）（出口和进口）（矢量）数据格式是一种Base64-spirited压缩格式，针对荒谬进行了调整紧凑性和本机URL兼容性。这是＆＃34;本地＆＃34;数据结构压缩成一个紧凑的字符串表示所有向量。 代码示例（.Net，Python）详细说明了这种解压缩格式化为可渲染形式（SVG，语言本机坐标数组）在extras文件夹中提供。可能的方法之一将数据传送到服务器是JSONP，它具有实用性 URL长度限制（当然由IE强加）不超过2000+ 字符。此压缩格式本身与URL无关需要重新编码，但大多数都适合2000个字符非复杂的签名。

编辑 - 对于那些没有成功使用/ extras示例的人，这里可能会有一些有用的帮助/示例代码in this case at Github related to Convert Base30 to PNG using PhP 。这里包括太多细节。

Answer 2

我使用了上面的答案并在函数中稍作改动以获得以下内容。这对我有用。

<?php
ini_set ( 'display_errors', E_ALL );
require_once ('jSignature_Tools_Base30.php');

function base30_to_jpeg($base30_string, $output_file) {
$data = str_replace ( 'image/jsignature;base30,', '', $base30_string );
$converter = new jSignature_Tools_Base30 ();
$raw = $converter->Base64ToNative ( $data );
// Calculate dimensions
$width = 0;
$height = 0;
foreach ( $raw as $line ) {
    if (max ( $line ['x'] ) > $width)
        $width = max ( $line ['x'] );
    if (max ( $line ['y'] ) > $height)
        $height = max ( $line ['y'] );
}

// Create an image
$im = imagecreatetruecolor ( $width + 20, $height + 20 );

// Save transparency for PNG
imagesavealpha ( $im, true );
// Fill background with transparency
$trans_colour = imagecolorallocatealpha ( $im, 255, 255, 255, 127 );
imagefill ( $im, 0, 0, $trans_colour );
// Set pen thickness
imagesetthickness ( $im, 2 );
// Set pen color to black
$black = imagecolorallocate ( $im, 0, 0, 0 );
// Loop through array pairs from each signature word
for($i = 0; $i < count ( $raw ); $i ++) {
    // Loop through each pair in a word
    for($j = 0; $j < count ( $raw [$i] ['x'] ); $j ++) {
        // Make sure we are not on the last coordinate in the array
        if (! isset ( $raw [$i] ['x'] [$j] ))
            break;
        if (! isset ( $raw [$i] ['x'] [$j + 1] ))
            // Draw the dot for the coordinate
            imagesetpixel ( $im, $raw [$i] ['x'] [$j], $raw [$i] ['y'] [$j], $black );
        else
            // Draw the line for the coordinate pair
            imageline ( $im, $raw [$i] ['x'] [$j], $raw [$i] ['y'] [$j], $raw [$i] ['x'] [$j + 1], $raw [$i] ['y'] [$j + 1], $black );
    }
}

// Check if the image exists
if (! file_exists ( dirname ( $output_file ) )) {
    mkdir(dirname($output_file));
}

// Create Image
$ifp = fopen ( $output_file, "wb" );
imagepng ( $im, $output_file );
fclose ( $ifp );
imagedestroy ( $im );

return $output_file;
}

// test
$imgStr ='image/jsignature;base30,7U010100010000000001_1G88b8ace99aab756856_bE2000000010000000101_1D6689cbaa9b956558564_8w757698987766566556545_3PZ2110101010100000000Y10_fF0000Z2100001000Y110_1V9789cb86966655475_fK_1x';
base30_to_jpeg ( $imgStr, 'test.png' );

?>

jSignature jQuery插件 - 根据存储在DB中的签名制作图像（base30）

更新

2 个答案: