এইচটিএমএল 5 এবং আইপ্যাড ব্যবহার করে স্বাক্ষর ক্যাপচার করুন


165

এটি কীভাবে করা যায় কেউ জানেন? আপনি কি কোনও ক্যানভাস অবজেক্ট, এসভিজি, জিক্যুয়ারি ইত্যাদি ব্যবহার করবেন?

উত্তর:


313

এখানে পরিবর্তনশীল প্রস্থের (অঙ্কন বেগের উপর ভিত্তি করে) কার্ভগুলির সাথে আরও একটি ক্যানভাস ভিত্তিক সংস্করণ রয়েছে: http://szimek.github.io/signature_pad এ ডেমো এবং https://github.com/szimek/signature_pad এ কোড ।

স্বাক্ষর নমুনা


1
অগ্রিম ধন্যবাদ, আমি দেখেছি সেরা জেএস স্বাক্ষর lib। জানেন না কেন এই উত্তরে সবেমাত্র 3 টি ভোট ছিল। github.com/szimek/signature_pad
VAdaihiep

3
আমি পছন্দ করি যে এটি অন্যান্য জেএস লাইব্রেরির উপর নির্ভর করে না এবং এটি কতটা ভাল দেখাচ্ছে। এটি ব্যবহার সম্পর্কে একটি নোট যা আমাকে সহায়তা করেছিল: ক্যানভাসে একটি সীমানা যুক্ত করুন যাতে আপনি দেখতে পাবেন যে এটি কীভাবে সামঞ্জস্য করা হচ্ছে। এছাড়াও নোট করুন যে ক্যানভাসে সিএসএস পরিবর্তনগুলি কিছু ক্রেজি কাজ করে, তাই এটি নিয়ন্ত্রণের বাইরে চলে গেলে কেবল ক্যানভাস উপাদানটির একটি উচ্চতা এবং প্রস্থ উল্লেখ করুন।
ব্রায়ান ম্যাকগিনিটি

3
জ্যাক, README ফাইলে প্রদত্ত ডকুমেন্টেশনে আপনার মতামতটি ঠিক কী অনুপস্থিত? কীভাবে এটি উন্নত করা যায় সে সম্পর্কে আমি পরামর্শের জন্য উন্মুক্ত।
szimek

7
আমি ক্ষমা প্রার্থনা করছি. আমি মনে করি আপনার ডকুমেন্টেশন আসলে পর্যাপ্ত। এটি ব্যবহার করা ঠিক কত সহজ তা আমি বুঝতে না পারলে এটি সীমাবদ্ধ বলে মনে হয়েছিল। আমি এটি একটি ফর্মের সাথে পুরোপুরি বাস্তবায়িত করেছি, ডাটাবেসে সঞ্চয় করে এবং এক ঘন্টার মধ্যে পৃষ্ঠায় ফিরে এসেছি। আমি মনে করি, আমি এগুলি লাইব্রেরির সাথে তুলনা করছি যা উপরোক্ত নির্বাচিত উত্তরের মতো ব্যবহার করা আরও জটিল ছিল। আমি এর আগে ডেটা ইউআরআইয়ের সাথে কাজ করিনি, তবে ডেটা সঞ্চয় করার বিষয়টি হ'ল সত্যই উজ্জ্বল উপায়। সুতরাং, আমি কেবল তাদের সাথে নিজেকে সম্মতি জানাতে পেরেছিলাম এবং তারপরে ডাটাবেসে সংরক্ষণ এবং পুনরুদ্ধার করা এত সহজ ছিল ... বাহ! আবার ধন্যবাদ!
জেক 16

1
@ রোনালদিনহো লেয়ারন কোডিং README ফাইলটি পরীক্ষা করে দেখুন - সমস্ত সম্ভাব্য বিকল্পের একটি তালিকা রয়েছে। আপনি যেটির সন্ধান করছেন তাকে "পেন কালার" বলা হয়।
szimek

60

কিছু জাভাস্ক্রিপ্ট সহ একটি ক্যানভাস উপাদান দুর্দান্ত কাজ করবে।

আসলে, স্বাক্ষর প্যাড (একটি jQuery প্লাগইন) ইতিমধ্যে এটি প্রয়োগ করা হয়েছে implemented


2
এই প্লাগইনটি কত সুন্দর তা দেখে আমি অবাক হয়েছি।
গর্নিউ

একদম ঠিক! ভাগ করে নেওয়ার জন্য ধন্যবাদ!
sagescrub

আমি এই প্লাগইনটি unforutnately ব্যবহার করা সত্যিই কঠিন খুঁজে পেয়েছি। সমস্ত ডেমো প্রয়োগ করা খুব নির্দিষ্ট এবং কৌশলযুক্ত। অবশ্যই অন্যান্য স্বাক্ষর প্যাড পদ্ধতির মতো আরও ভাল: স্ট্যাকওভারফ্লো.com / a / 17200715 / 76672 খুব বেশি কোনও নথিপত্র না থাকায় আমি এটি কাজ করতে সক্ষম হয়েছি ...
জ্যাক

18

আমি সবেমাত্র এসভিজি ব্যবহার করে এটির একটি হ্যাক আপ সংস্করণ এখানে । আমার আইফোনে আমার জন্য ভাল কাজ করে। সাধারণ মাউস ইভেন্টগুলি ব্যবহার করে ডেস্কটপ ব্রাউজারেও কাজ করে।


আমি কীভাবে একটি সংরক্ষিত স্বাক্ষর আঁকতে জানতে চাই
ইউরি মোরালেস

কীভাবে পিএনজি ফাইল হিসাবে স্বাক্ষর সংরক্ষণ করবেন বা অন্যভাবে স্বাক্ষর দেখান?
আন্দ্রেস

12

সম্ভবত এর জন্য সেরা দুটি ব্রাউজার প্রযুক্তি হ'ল ক্যানভাস, ফ্ল্যাশ ব্যাক আপ হিসাবে।

আমরা ক্যানভাসের ব্যাকআপ হিসাবে IE এ ভিএমএল চেষ্টা করেছি, তবে এটি ফ্ল্যাশের চেয়ে অনেক ধীর ছিল। এসভিজি তখন ধীর ছিল বাকি সমস্ত all

JSignature ( http://willowsystems.github.com/jSignature/ ) সহ আমরা আইই 8 এবং তার চেয়ে কম ফ্ল্যাশ ভিত্তিক ক্যানভাস এমুলেটর (ফ্ল্যাশক্যানভাস) এর ফ্যালব্যাক সহ প্রাথমিক হিসাবে ক্যানভাস ব্যবহার করেছি। আইডি বলে আমাদের জন্য খুব ভাল কাজ করেছে।


এটি সত্যিই দুর্দান্ত ... আমি এর স্মুথ ইফেক্ট পছন্দ করি। সেরা আমি দেখেছি।
ক্যামডেন এস

2

ইতিমধ্যে তালিকাবদ্ধ বিকল্পগুলি খুব ভাল, তবে এখানে এই বিষয়ে আরও কয়েকটি যা আমি গবেষণা করে এসেছি across

1) http://perfectionkills.com/exploring-canvas-drawing-techniques/
2) http://mcc.id.au/2010/signature.html
3) https://zipso.net/a-simple-touchscreen -স্কেচপ্যাড-ব্যবহার করে জাভাস্ক্রিপ্ট-এবং-এইচটিএমএল 5 /

এবং সর্বদা হিসাবে আপনি ইমেজটিতে ক্যানভাস সংরক্ষণ করতে চাইতে পারেন:
http : //www.html5 স্ক্যানভাসটরিয়ালস.com/advanced/html5-canvas-save-drawing-as-an- image /

শুভকামনা এবং শুভ স্বাক্ষর


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.