HTML5 और iPad का उपयोग करके हस्ताक्षर पर कब्जा


165

किसी को पता है कि यह कैसे किया जा सकता है? आप एक कैनवास वस्तु, svg, jQuery, आदि का उपयोग करेंगे?

जवाबों:


313

यहाँ चर चौड़ाई (ड्राइंग वेग के आधार पर) के साथ एक और कैनवास आधारित संस्करण है: http://szimek.github.io/signature_pad पर डेमो और https://github.com/szimek/signature_pad पर कोड ।

हस्ताक्षर का नमूना


1
अग्रिम धन्यवाद, सबसे अच्छा जेएस हस्ताक्षर लिब मैंने कभी देखा। पता नहीं क्यों इस जवाब में सिर्फ 3 वोट थे। github.com/szimek/signature_pad
VAdaihiep

3
मुझे यह पसंद है कि यह अन्य जेएस पुस्तकालयों पर निर्भर नहीं करता है और यह कितना अच्छा दिखता है। इसका उपयोग करने के बारे में एक नोट जिसने मुझे मदद की: कैनवास पर एक सीमा जोड़ें ताकि आप देख सकें कि इसे कैसे समायोजित किया जा रहा है। यह भी ध्यान दें कि कैनवास में सीएसएस परिवर्तन कुछ पागल चीजें करते हैं, इसलिए यदि यह नियंत्रण से बाहर हो जाता है, तो बस कैनवास तत्व में एक ऊंचाई और चौड़ाई निर्दिष्ट करें।
ब्रायन मैकगिनिटी

3
जेक, वास्तव में README फ़ाइल में प्रदान किए गए दस्तावेज़ में आपकी राय में क्या गायब है? मैं सुझाव देता हूं कि इसे कैसे सुधारा जा सकता है।
12

7
मैं क्षमाप्रार्थी हूं। मुझे लगता है कि आपका प्रलेखन वास्तव में पर्याप्त है। यह तब तक सीमित लग रहा था जब तक मुझे एहसास नहीं हुआ कि यह उपयोग करना कितना आसान है। मुझे यह पूरी तरह से एक फॉर्म में लागू हो गया, डेटाबेस में संग्रहीत करना और एक घंटे के भीतर पृष्ठ पर वापस लाना। मुझे लगता है, मैं इसे उन पुस्तकालयों से तुलना कर रहा था जो ऊपर दिए गए उत्तर की तरह उपयोग करने के लिए बहुत अधिक जटिल थे। मैंने पहले डेटा यूआरआई के साथ काम नहीं किया था, लेकिन यह डेटा के भंडारण को संभालने का एक शानदार तरीका है। इसलिए, मुझे सिर्फ अपने आप को उन लोगों के साथ जोड़ना था और फिर डेटाबेस में संग्रहीत करना और पुनः प्राप्त करना इतना आसान था ... आसान ... वाह। एक बार फिर धन्यवाद!
जेक

1
@RonaldinhoLearnCoding README फ़ाइल देखें - इसमें सभी संभावित विकल्पों की एक सूची है। जिसे आप ढूंढ रहे हैं उसे "पेनकोलर" कहा जाता है।
szimek

60

कुछ जावास्क्रिप्ट के साथ एक कैनवास तत्व महान काम करेगा।

वास्तव में, सिग्नेचर पैड (एक jQuery प्लगइन) पहले ही इसे लागू कर चुका है।


2
मुझे आश्चर्य है कि यह प्लगइन कितना सुंदर है।
गौरन्

अति उत्तम! साझा करने के लिए धन्यवाद!
sagescrub

मुझे यह प्लगइन वास्तव में अप्रत्याशित रूप से उपयोग करने में मुश्किल लगा। सभी डेमो लागू करने के लिए बहुत विशिष्ट और मुश्किल थे। निश्चित रूप से अन्य हस्ताक्षर पैड दृष्टिकोण की तरह बेहतर: stackoverflow.com/a/17200715/76672 बहुत ज्यादा प्रलेखन के साथ, मैं इसे काम करने में सक्षम था ...
जेक

18

यहाँ एसवीजी I का उपयोग करते हुए इस का जल्दी से हैक किया गया संस्करण है । मेरे iPhone पर मेरे लिए अच्छा काम करता है। सामान्य माउस ईवेंट का उपयोग करके डेस्कटॉप ब्राउज़र में भी काम करता है।


मैं जानना चाहता हूं कि एक सहेजे गए हस्ताक्षर कैसे आकर्षित करते हैं
यूरी मोरालेस

सिग्नेचर को पीएनजी फाइल के रूप में कैसे सेव करें या दूसरे तरीके से हस्ताक्षर दिखाएं?
एंड्रस

12

शायद इसके लिए सबसे अच्छा दो ब्राउज़र टेक कैनवस हैं, फ्लैश के साथ बैक अप के रूप में।

हमने वीई पर वीएम को कैनवस के लिए बैकअप के रूप में आज़माया, लेकिन यह फ्लैश की तुलना में बहुत धीमा था। एसवीजी धीमी थी तो बाकी सभी।

JSignature ( http://willowsystems.github.com/jSignature/ ) के साथ हमने प्राथमिक रूप में कैनवस का उपयोग किया, IE8 और उससे कम के फ़्लैश-आधारित कैनवास एमुलेटर (FlashCanvas) के लिए। Id 'का कहना है कि हमारे लिए बहुत अच्छा काम किया।


यह वास्तव में अच्छा है ... मुझे लगता है कि यह प्रभाव चौरसाई है। सर्वश्रेष्ठ मैंने देखा है।
कैमडेन एस।

2

पहले से ही सूचीबद्ध विकल्प बहुत अच्छे हैं, हालांकि इस विषय पर कुछ और है जो मैंने शोध किया है और पार आया है।

1) http://perfectionkills.com/exploring-canvas-drawing-techniques/
2) http://mcc.id.au/2010/signature.html
3) https://zipso.net/a-simple-touchscreen -स्कैपपैड-उपयोग-जावास्क्रिप्ट-और-html5 /

और हमेशा के रूप में आप छवि को कैनवास को बचाने के लिए चाहते हो सकता है:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-an-image/

सौभाग्य और खुश हस्ताक्षर


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.