用 jsignature 改变绘图的颜色答案

【问题标题】：Change color of drawing with jsignature用 jsignature 改变绘图的颜色
【发布时间】：2021-07-11 21:23:53
【问题描述】：

我想在使用 jsignature 单击颜色后提供更改绘图颜色的选项。我不知道如何将颜色传递给插件。看看我是如何尝试的，请帮助知道我错在哪里。

    <table>
    <tr>
    <td style='background:green;width:40px;height:40px;' id="green" class='changeColor'></td>
    <td style='background:blue;width:40px;height:40px;' id="blue" class='changeColor'></td>
    <td style='background:red;width:40px;height:40px;' id="red" class='changeColor'></td>
    </tr>
    </table>

  <div id="signature" style="width:500;height:400"></div>

    $(document).ready(function() {
    //default color
    var pen ='green';

    $('.changeColor').on('click', function(event) {
    pen = $(this).attr('id');

    });

    var $sigdiv = $("#signature").jSignature({
    'UndoButton':true,
    'background-color': 'transparent',
    'decor-color': 'transparent',
    'color':pen,
    'width': 500,
    'height': 400
    });

【问题讨论】：

标签： html jquery

【解决方案1】：

您可以使用 jSignature 插件的updateSetting 选项，并在其中传递您的设置名称和新值，即： $("#signature").jSignature('updateSetting', "color", pen);

演示代码：

$(document).ready(function() { //default color
  var pen = 'green';
  var $sigdiv = $("#signature").jSignature({
    'UndoButton': true,
    'background-color': 'transparent',
    'decor-color': 'transparent',
    'color': pen,
    'width': 500,
    'height': 400
  });

  $('.changeColor').on('click', function(event) {
    pen = $(this).attr('id');
    //update settings 
    $("#signature").jSignature('updateSetting', "color", pen,true);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js" integrity="sha512-lZ7GJNAmaXw7L4bCR5ZgLFu12zSkuxHZGPJdIoAqP6lG+4eoSvwbmKvkyfauz8QyyzHGUGVHyoq/W+3gFHCLjA==" crossorigin="anonymous"></script>
<table>
  <tr>
    <td style='background:green;width:40px;height:40px;' id="green" class='changeColor'></td>
    <td style='background:blue;width:40px;height:40px;' id="blue" class='changeColor'></td>
    <td style='background:red;width:40px;height:40px;' id="red" class='changeColor'></td>
  </tr>
</table>

<div id="signature" style="width:500;height:400;border:1px solid black">
</div>

【讨论】：

非常感谢您的回答，但是当我选择一种颜色时，以前的颜色也会改变，所以如何保持以前的颜色，以便我可以有不同的颜色绘图。例如我用蓝色画了一条线，然后我选择了绿色，之前的蓝色线变成了绿色，但我希望保持蓝色和绿色。
嗨，很抱歉回复晚了..我不确定我是否可以这样做。此外，文档中没有任何与此相关的内容，但是，如果我找到方法，我会告诉你:)
非常感谢您的回答，非常感谢，在这种情况下我会接受。我在这里找到了一个新插件，可以完全满足我的需求，但是我看不到如何使用 php 将绘图保存到数据库中。看链接：jqueryscript.net/other/signature-draw-pad.html
嗨，也许您可以将该图像转换为 base64 格式，然后使用 ajax 将其发送到您的服务器页面。检查this 将帮助您开始。
嗨，我找到了答案。只需添加 'true' 作为最后一个参数，如下所示： $("#signature").jSignature('updateSetting', "color", pen, true);