laravel jSignature jQuery 插件 - 从存储在 DB (base30) 中的签名制作图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41486345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jSignature jQuery plugin - make an image from signature stored in DB (base30)
提问by lewis4u
After we save the image with this command
在我们使用此命令保存图像后
$("#canvas").jSignature("getData", "base30");
we can store that data to DB and it is a simple string:
我们可以将该数据存储到数据库中，它是一个简单的字符串：
data:image/jsignature;base30,9MZ4555665655465644644645433232100Y2333465656786456646464443Z54334433222Y13344544486666667775353646443_2xZ110000000Y1111111222223222344555332220100000Z11111121212130Y122222333343222111100000Z1111212222122212
And now how to make an image from "base30" signature? Can we convert this to anything so it can be displayed on the website?
现在如何从“base30”签名制作图像？我们可以将其转换为任何内容以便在网站上显示吗？
Or maybe there is a way to disable editing the canvas. To prevent changing the signature?
或者也许有一种方法可以禁用编辑画布。防止更改签名？
UPDATE
更新
I have made a little workaround and it works.
我做了一些解决方法并且它有效。
I have created an invisible div where i load the jSignature from DB and made it invisible, then i get the svg out of it and display that svg in the page
我创建了一个不可见的 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
回答by Vanquished Wombat
Look in the extras folder on Github. There are php and DotNet examples.
查看Github上的 extras 文件夹。有 php 和 DotNet 示例。
Regarding the Base30 format, the docs for jSignaturesay
关于 Base30 格式，jSignature 的文档说
base30 (alias image/jSignature;base30) (EXPORT AND IMPORT) (VECTOR) data format is a Base64-spirited compression format tuned for absurd compactness and native url-compatibility. It is "native" data structure compressed into a compact string representation of all vectors. Code examples (.Net, Python) detailing decompression of this format into render-able form (SVG, language-native coordinate arrays) are provided in the extras folder. One of possible ways of communicating the data to the server is JSONP, which has a practical URL length limit (imposed by IE, of course) of no more than 2000+ characters. This compression format is natively URL-compatible without a need for re-encoding, yet will fit into 2000 characters for most non-complex signatures.
base30 (alias image/jSignature;base30) (EXPORT AND IMPORT) (VECTOR) 数据格式是一种 Base64-spirited 压缩格式，针对荒谬的紧凑性和原生 url 兼容性进行了调整。它是压缩成所有向量的紧凑字符串表示的“原生”数据结构。extras 文件夹中提供了代码示例（.Net、Python），详细说明了将此格式解压缩为可渲染形式（SVG、语言原生坐标数组）。将数据传送到服务器的一种可能方式是 JSONP，它具有不超过 2000 个字符的实用 URL 长度限制（当然是由 IE 强加的）。这种压缩格式本身就与 URL 兼容，无需重新编码，但对于大多数非复杂签名而言，它可以容纳 2000 个字符。
Edit - for those not having success with the /extras example, there may be some useful help / sample code here in this case at Github related to Convert Base30 to PNG using PhP . Too much detail there to include here.
编辑 - 对于那些没有成功使用 /extras 示例的人，在这种情况下，Github上可能有一些有用的帮助/示例代码，与使用 PhP 将 Base30 转换为 PNG 相关。太多细节无法在此包含。
回答by Karthik N G
I used the above answer and changed a little bit in the function to get the following. This worked for me.
我使用了上面的答案并在函数中进行了一些更改以获得以下内容。这对我有用。
<?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' );
?>
