129
कोई भी जानता है कि यह कैसे किया जा सकता है? क्या आप कैनवास ऑब्जेक्ट, एसवीजी, jQuery, आदि का उपयोग करेंगे?एचटीएमएल 5 और आईपैड का उपयोग कर हस्ताक्षर कैप्चर करें
A
उत्तर
248
परिवर्तनीय चौड़ाई (ड्राइंग वेग पर आधारित) वक्र के साथ एक और कैनवास आधारित संस्करण है: http://szimek.github.io/signature_pad पर डेमो और https://github.com/szimek/signature_pad पर कोड।
57
कुछ जावास्क्रिप्ट के साथ एक कैनवास तत्व बहुत अच्छा काम करेगा।
वास्तव में, Signature Pad (एक jQuery प्लगइन) पहले से ही इसे लागू किया गया है।
+2
मैं आश्चर्यचकित हूं कि यह प्लगइन कितना सुंदर है। – Gourneau
+0
इतना सही! साझा करने के लिए धन्यवाद! – Noel
+0
मुझे यह प्लगइन असुरक्षित रूप से उपयोग करने के लिए वास्तव में कठिन लगता है। सभी जनसंख्या लागू करने के लिए बहुत विशिष्ट और मुश्किल थे। निश्चित रूप से अन्य हस्ताक्षर पैड दृष्टिकोण की तरह बेहतर: http://stackoverflow.com/a/17200715/76672 बहुत अधिक दस्तावेज़ीकरण के साथ, मैं इसे काम करने में सक्षम था ... – Jake
14
यहां a quickly hacked up version of this using SVG मैंने अभी किया है। मेरे आईफोन पर मेरे लिए अच्छा काम करता है। सामान्य माउस घटनाओं का उपयोग कर डेस्कटॉप ब्राउज़र में भी काम करता है।
+0
मैं जानना चाहता हूं कि सहेजे गए हस्ताक्षर कैसे खींचे –
+0
कैसे हस्ताक्षर को पीएनजी फ़ाइल के रूप में सहेजने के लिए या अन्य तरीके से हस्ताक्षर दिखाएं? – Andrus
12
शायद इसके लिए सबसे अच्छा दो ब्राउज़र तकनीक कैनवास हैं, फ्लैश के साथ बैक अप के रूप में।
हमने आईई पर वीएमएल को कैनवास के लिए बैकअप के रूप में करने की कोशिश की, लेकिन यह फ्लैश से बहुत धीमी थी। बाकी सब कुछ एसवीजी धीमा था।
जेएसग्नेचर (http://willowsystems.github.com/jSignature/) के साथ हमने कैनवास प्राथमिक के रूप में उपयोग किया, फ्लैश-आधारित कैनवास एमुलेटर (फ्लैशकैनवास) पर आईई 8 और उससे कम के लिए फ़ॉलबैक के साथ। आईडी 'कहते हैं हमारे लिए बहुत अच्छा काम किया।
+0
यह वास्तव में अच्छा है ... मुझे यह चिकनाई प्रभाव पसंद है। मैंने देखा सबसे अच्छा। –
0
एक अन्य OpenSource हस्ताक्षर क्षेत्र https://github.com/applicius/jquery.signfield/ है, Sketch.js का उपयोग कर jQuery प्लगइन पंजीकृत।
1
पहले से सूचीबद्ध विकल्पों को बहुत अच्छा है, हालांकि यहां इस विषय पर कुछ और है जो मैंने शोध किया है और पार हो गया है।
1) http://perfectionkills.com/exploring-canvas-drawing-techniques/
2) http://mcc.id.au/2010/signature.html
3) https://zipso.net/a-simple-touchscreen-sketchpad-using-javascript-and-html5/
और हमेशा की तरह आप छवि को कैनवास को बचाने के लिए चाहते हो सकता है:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
सौभाग्य और खुश हस्ताक्षर करने
संबंधित मुद्दे
- 1. एचटीएमएल 5 का उपयोग करके माइक्रोफोन कैप्चर करना और socket.io
- 2. आईपैड/आईफोन एचटीएमएल 5 वीडियो लोडिंग
- 3. एचटीएमएल 5 पर सेलपैडिंग और सेलस्पेसिंग का उपयोग कैसे करें?
- 4. कैप्चर और बने इलेक्ट्रॉनिक पैड/हस्ताक्षर
- 5. आईफोन एसडीके: हस्ताक्षर कैप्चर कैसे कार्यान्वित करें?
- 6. एचटीएमएल 5 ढांचे और उपकरण?
- 7. एचटीएमएल 5 ब्लूटूथ और ऑडियो
- 8. एचटीएमएल 5 और जावास्क्रिप्ट
- 9. हस्ताक्षर ऑनलाइन कैप्चर करने का सबसे अच्छा तरीका क्या है?
- 10. एचटीएमएल 5 और PHP
- 11. एचटीएमएल 5
- 12. एचटीएमएल 5 और जेएस
- 13. एचटीएमएल 5
- 14. इतिहास.जेएस का उपयोग कर एचटीएमएल 5 पुशस्टेट। State.data
- 15. एचटीएमएल 5
- 16. एचटीएमएल 5 और कैनवास
- 17. एचटीएमएल 5 और जावास्क्रिप्ट
- 18. मैं एचटीएमएल 5 का उपयोग कैसे कर सकता हूं?
- 19. एचटीएमएल 5 WebGL shaders का उपयोग संगणना
- 20. एचटीएमएल 5 वेबपृष्ठ
- 21. एचटीएमएल 5 और फ्रेमबॉर्डर
- 22. एचटीएमएल 5 और जावास्क्रिप्ट
- 23. आईओएस 5: -viewWillAppear आईपैड
- 24. एचटीएमएल 5 और जावास्क्रिप्ट
- 25. एचटीएमएल 5 और जावास्क्रिप्ट
- 26. एचटीएमएल 5 वीडियो रोकें और रीवाइंड करें
- 27. एचटीएमएल 5 बॉयलर प्लेट का उपयोग कैसे करें?
- 28. एचटीएमएल 5 और सर्वलेट
- 29. आईई 7 में एचटीएमएल 5 का उपयोग कैसे करें?
- 30. प्रतिबिंब का उपयोग कर वास्तविक विधि हस्ताक्षर
अग्रिम धन्यवाद, मैंने कभी देखा सबसे अच्छा जेएस हस्ताक्षर lib। पता नहीं क्यों इस जवाब में सिर्फ 3 वोट थे। https://github.com/szimek/signature_pad – VAdaihiep
मुझे यह पसंद है कि यह अन्य जेएस पुस्तकालयों पर भरोसा नहीं करता है और यह कितना अच्छा लगता है। इसका उपयोग करने के बारे में एक नोट जिसने मेरी मदद की: कैनवास में एक सीमा जोड़ें ताकि आप देख सकें कि इसे कैसे समायोजित किया जा रहा है। यह भी ध्यान रखें कि कैनवास में सीएसएस परिवर्तन कुछ पागल चीजें करते हैं, इसलिए यदि यह नियंत्रण से बाहर हो तो कैनवास तत्व में ऊंचाई और चौड़ाई निर्दिष्ट करें। –
दस्तावेज़ीकरण की कमी सहायक नहीं है, लेकिन डेमो पृष्ठ इसे स्पष्ट रूप से स्पष्ट रूप से बताता है। मैं इसे डेटाबेस में संग्रहीत करने और पुनः प्राप्त करने पर काम कर रहा हूं। यह वास्तव में एक चिकनी लाइब्रेरी है। धन्यवाद szimek! – Jake