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

使用此命令保存图像后

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

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

 data:image/jsignature;base30,9MZ4555665655465644644645433232100Y2333465656786456646464443Z54334433222Y13344544486666667775353646443_2xZ110000000Y1111111222223222344555332220100000Z11111121212130Y122222333343222111100000Z1111212222122212 

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

或者也许有一种方法可以禁用编辑canvas。 要防止更改签名？

UPDATE

我做了一些解决方法，它的工作原理。

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

 
  Your browser doesn't support SVG!  

 @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格式，jSignature的文档说

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

编辑 – 对于那些没有成功使用/ extras示例的人， 在这种情况下，在Github中可能会有一些有用的帮助/示例代码，与使用PhP将Base30转换为PNG有关 。 这里包括太多细节。

Answer 2

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

 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' ); ?>