
Writing using pen is a good experience when the requirment is to save signature or drawing. In this tutorial, jSignature is used to save the signature in database for further use.
1. Installation
pip install django-jsignature
2. Add in Setting.py
# Add globally
JSIGNATURE_WIDTH = 200
JSIGNATURE_HEIGHT = 100
JSIGNATURE_JQUERY = 'admin'
# JSIGNATURE_JQUERY = 'https://code.jquery.com/jquery-3.6.0.min.js'
INSTALLED_APPS = (
...
'jsignature',
)
3. Make Model
# models.py
from django.db import models
from jsignature.fields import JSignatureField
class SignatureModel(models.Model):
signature = JSignatureField()
4. Add in forms.py
class TestForm(forms.ModelForm):
signature = JSignatureField(widget=JSignatureWidget(jsignature_attrs={'color': '#e0b642', 'height': '200px'}))
class Meta:
model = Test
fields = ['signature']
5. Add in views.py
def test(request):
form = TestForm(request.POST or None)
if form.is_valid():
signature = form.cleaned_data['signature']
mydata=Test( signature=signature)
mydata.save()
else:
form=TestForm()
my_sig = Test.objects.first()
return render(request,'main/test.html',{'form': form,'my_sig':my_sig})
6. Use in your template for entering signature
{{ form.media }}
<form action="" method="post">
{{ form }}
<input type="submit" value="Save" />
{% csrf_token %}
</form>
7. Use in template to display signature
{% load jsignature_filters %}
<img src="{{ x.signature|signature_base64 }}" alt="{{ x}}" />
8. Include updated the jQuery library in Head tag
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
I hope this will help!
Please share this page to friends.
Welcome to our Software Solutions Company, where we excel in transforming ideas into tangible realities. We have expertise in developing online management systems, website designing & development, software solutions, mobile app development, e-commerce solutions and graphic designing. We provide 24/7 services.
John
Jan 08, 2023
Very helpful and to the point topic. Now I can integrate writing pad.