Change color of drawing with jsignature

Question

I want to give the option to change the drawing color after clicking on a color using jsignature. I cannot figure out how to pass the color to the plugin. Behold how I try, please help know where I'm wrong.

    <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
    });

Swati · Accepted Answer · 2021-04-19T12:36:41.910

2

You can use updateSetting option of jSignature plugin and inside this pass your settings name and new value i.e : $("#signature").jSignature('updateSetting', "color", pen);

Demo Code :

$(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>

edited Apr 19 '21 at 12:36

answered Apr 17 '21 at 12:55

Swati

28,069
4
21
41

Many thanks for your answer, but when I select a color the previous color is changed as well, so how to keep the previous color so that I can have different color drawing. For instance I draw one line with blue color and then I select green color, the previous blue line is changed to green color, but I wish to keep both blue and green color. – Diasline Apr 17 '21 at 14:12
HI, sorry for late reply .. i am not sure if i can do that . Also , there is nothing in docs as well related to this but , if i find way i will let you know :) – Swati Apr 18 '21 at 13:12
many thanks for your answer, I really appreciate it, in this case I will accept it. There is a new plugin that I found here that satisfy exactly what I need, but I don't see how to save the drawing with php to database. Behold the link: https://www.jqueryscript.net/other/signature-draw-pad.html – Diasline Apr 18 '21 at 17:14
Hi, maybe you can convert that image to base64 format and then send same using ajax to your server page . Check [this](https://stackoverflow.com/questions/15685698/getting-binary-base64-data-from-html5-canvas-readasbinarystring) will help you to get started. – Swati Apr 19 '21 at 04:29
1

Hi, I have found the answer. Just add 'true' as a last argument like this: $("#signature").jSignature('updateSetting', "color", pen, true); – Diasline Apr 19 '21 at 12:33
Would you like to edit your code, just to add ? – Diasline Apr 19 '21 at 12:36

Change color of drawing with jsignature

1 Answers1