如何在jSignature插件中從CANVAS中刪除灰色線？

Question

如何從012V的CANVAS（簽名面板）中刪除灰色線？

是否有任何選項來驗證用戶是否輸入簽名？任何建立在這個功能？

http://willowsystems.github.com/jSignature/#/demo/

Answer 1

恐怕沒有選擇將其關閉，所以唯一的解決辦法是改變插件代碼本身

有一個在一款插件，吸引基線。註釋掉這樣

// signature line 
ctx.strokeStyle = settings['decor-color'] 
ctx.shadowOffsetX = 0 
ctx.shadowOffsetY = 0 
var lineoffset = Math.round(ch/5) 
//basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset) 
ctx.strokeStyle = settings.color 

Answer 2

如果您正在使用jSignature V2（第2版），

c.lineTo(l, i); - 註釋此行以去除在畫布上灰線。

下面的代碼工作

r.prototype.resetCanvas = function (b) { 
    var a = this.canvas, 
     d = this.settings, 
     c = this.canvasContext, 
     f = this.isCanvasEmulator, 

     ......................... 

     c.shadowOffsetY = 0; 
    var h = Math.round(i/5), 
     p = 1.5 * h, 
     k = i - h, 
     l = l - 1.5 * h, 
     i = i - h; 
    c.beginPath(); 
    c.moveTo(p, k); 
    //c.lineTo(l, i); // comment this line to remove the grey line in the canvas. 
    c.stroke(); 
    c.strokeStyle = d.color; 
    f || (c.shadowColor = c.strokeStyle, c.shadowOffsetX = 0.5 * c.lineWidth, c.shadowOffsetY = -0.6 * c.lineWidth, c.shadowBlur = 0); 

    .......................... 
}; 

Answer 3

我在我的項目做了以下修改jSignature：

showLine: true, //added showLine in default options 

c.showLine = d.showLine; 
if(c.showLine){ 
    c.lineTo(l, i); 
} 

然後我通過true或false當我做

$('#signature').jSignature({ color: "#00f", lineWidth: 3, showLine: false }); 

現在我可以選擇顯示或隱藏它。

Answer 4

這個怎麼樣的裝飾，顏色設置爲透明

$(document).ready(function() { 
     $("#signature").jSignature({ 
      'background-color': 'transparent', 
      'decor-color': 'transparent', 
     }); 
    }); 

Answer 5

作者確實提供了選項刪除灰線，但似乎代碼不檢查項。 訪問此位置https://github.com/willowsystems/jSignature/pull/17/files 並查找「文件已更改」選項卡。

在該選項卡下，您會發現帶有粉紅色背景和（ - ）減號的已刪除線條，並添加了帶有綠色背景和（+）加號的線條。你需要自己改變源代碼。這樣

// signature line 
    //ctx.strokeStyle = settings['decor-color'] 
    //ctx.shadowOffsetX = 0 
    //ctx.shadowOffsetY = 0 
    //var lineoffset = Math.round(ch/5) 
    //basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset) 
    //ctx.strokeStyle = settings.color 


    //if (!isCanvasEmulator) { 
    // ctx.shadowColor = ctx.strokeStyle 
    // ctx.shadowOffsetX = ctx.lineWidth * 0.5 
    // ctx.shadowOffsetY = ctx.lineWidth * -0.6 
    // ctx.shadowBlur = 0 


    if (settings.signatureLine) { 
     ctx.strokeStyle = settings['decor-color'] 
     ctx.shadowOffsetX = 0 
     ctx.shadowOffsetY = 0 
     var lineoffset = Math.round(ch/5) 
     basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset) 
     ctx.strokeStyle = settings.color 

     if (!isCanvasEmulator) { 
      ctx.shadowColor = ctx.strokeStyle 
      ctx.shadowOffsetX = ctx.lineWidth * 0.5 
      ctx.shadowOffsetY = ctx.lineWidth * -0.6 
      ctx.shadowBlur = 0 
     } 
    } 

一旦更改代碼做了...發起jSignature對象

$('#signature').jSignature({ 
    'signatureLine': false 
}); 

Answer 6

這可能是爲時已晚，但希望它可以幫助別人的絆腳石這一點。我已經添加了一些代碼來禁用灰線，如果您在初始化時將decor-color設置爲null。我更喜歡這種方法，然後添加另一個屬性來啓用/禁用簽名行。

// signature line 
- ctx.strokeStyle = settings['decor-color']; 
- ctx.shadowOffsetX = 0; 
- ctx.shadowOffsetY = 0; 
- var lineoffset = Math.round(ch/5); 
- basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset); 
+ if (null != settings['decor-color']) { 
+ ctx.strokeStyle = settings['decor-color']; 
+ ctx.shadowOffsetX = 0; 
+ ctx.shadowOffsetY = 0; 
+ var lineoffset = Math.round(ch/5); 
+ basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset); 
+ } 

    ctx.strokeStyle = settings.color; 

這是我的git回購在https://github.com/brinley/jSignature

Answer 7

我知道這個問題是1歲半了，但今天有一個更好的解決方案。希望這會幫助其他人搜索一種方法來保存圖像，並從jSignature 非凡插件中刪除灰線。

更好的方法在這裏：http://www.reloadedpc.com/php/jquery-jsignature-php-base30-image/

<?php 
// Load jSignature library to con 
require_once(dirname(__FILE__) . '/jSignature_Tools_Base30.php'); 

// Get signature string from _POST or _GET 
$data = $_GET['signature']; 
$data = str_replace('image/jsignature;base30,', '', $data); 

// Create jSignature object 
$signature = new jSignature_Tools_Base30(); 

// Decode base30 format 
$a = $signature->Base64ToNative($data); 

// Create a image    
$im = imagecreatetruecolor(1295, 328); 

// Save transparency for PNG 
imagesavealpha($im, true); 

// Fill background with transparency 
$trans_colour = imagecolorallocatealpha($im, 0, 0, 0, 127); 
imagefill($im, 0, 0, $trans_colour); 

// Set pen thickness 
imagesetthickness($im, 5); 

// Set pen color to blue    
$blue = imagecolorallocate($im, 0, 0, 255); 

// Loop through array pairs from each signature word 
for ($i = 0; $i < count($a); $i++) 
{ 
    // Loop through each pair in a word 
    for ($j = 0; $j < count($a[$i]['x']); $j++) 
    { 
     // Make sure we are not on the last coordinate in the array 
     if (! isset($a[$i]['x'][$j]) or ! isset($a[$i]['x'][$j+1])) break; 
       // Draw the line for the coordinate pair 
       imageline($im, $a[$i]['x'][$j], $a[$i]['y'][$j], $a[$i]['x'][$j+1], $a[$i]['y'][$j+1], $blue); 
     } 
    } 

// Save image to a folder  
$filename = dirname(__FILE__) . '/signature.png'; // Make folder path is writeable 
imagepng($im, $filename); // Removing $filename will output to browser instead of saving 
echo $filename; 
// Clean up 
//imagedestroy($im); 

>

正如作者所說：

「的base30字符串格式允許用戶保存字符串中的數據庫，如果您的應用程序需要，稍後再使用。base30字符串很小 e正在保存的數據量。幸運的是，jSignature下載包含一個封裝器，將base30字符串解碼爲矢量點數組。

使用上面的代碼可以讓您從jSignature獲取base30輸入，並且創建一個PNG文件，而不需要簽名線裝飾。這提供了一種方法，以保存MySQL中的字符串，然後在需要時將圖像流式傳輸到瀏覽器。我用這個技術與DOM PDF結合來呈現簽名的PDF文件「

我的意思是，你想要的東西多一點呢？沒有imagick或蠟染或改變jSignature核心代碼，只是完美的解決方案！非常感謝到ReloadedPC

編輯：這種方法唯一的問題是不工作的iOS版，您必須使用的base64的想法是一樣的

Answer 8

如果sombody仍然有這個問題，並使用。非衝突版本從作者的網站。這解決它對我來說：

註釋行中的以下部分jSignature.min.nonconflict.js 54

/*c.beginPath();c.moveTo(p,k);c.lineTo(l,i);c.stroke()*/