ใครรู้วิธีนี้สามารถทำได้? คุณจะใช้วัตถุผ้าใบ svg, jQuery ฯลฯ ได้หรือไม่
จับภาพลายเซ็นโดยใช้ HTML5 และ iPad
คำตอบ:
นี่เป็นอีกหนึ่งรุ่นตามผ้าใบที่มีความกว้างตัวแปร (ขึ้นอยู่กับการวาดภาพความเร็ว) เส้นโค้ง: สาธิตได้ที่http://szimek.github.io/signature_padและรหัสที่https://github.com/szimek/signature_pad
1
ขอบคุณล่วงหน้า libs js ที่ดีที่สุดที่ฉันเคยเห็น ไม่ทราบว่าทำไมคำตอบนี้มีเพียง 3 คะแนน github.com/szimek/signature_pad
—
VAdaihiep
ฉันชอบสิ่งนี้ที่ไม่พึ่งพาไลบรารี js อื่น ๆ และดูดีแค่ไหน One note เกี่ยวกับการใช้มันซึ่งช่วยฉัน: เพิ่มเส้นขอบลงในผืนผ้าใบเพื่อให้คุณสามารถดูว่ามันถูกปรับอย่างไร โปรดทราบว่า css การเปลี่ยนแปลงผืนผ้าใบทำสิ่งที่บ้าคลั่งบางอย่างดังนั้นเพียงระบุความสูงและความกว้างในองค์ประกอบ Canvas หากสิ่งนี้อยู่เหนือการควบคุม
—
Brian McGinity
เจคสิ่งที่ขาดหายไปในความเห็นของคุณในเอกสารที่ให้ไว้ในไฟล์ README ฉันเปิดให้คำแนะนำวิธีการปรับปรุง
—
szimek
ฉันขอโทษ. ฉันคิดว่าเอกสารของคุณเพียงพอจริง ๆ มันดูมีข้อ จำกัด จนกระทั่งฉันรู้ว่ามันใช้ง่ายแค่ไหน ฉันได้รับการใช้งานอย่างสมบูรณ์ในรูปแบบการจัดเก็บในฐานข้อมูลและดึงกลับไปที่หน้าในภายใต้ชั่วโมง ฉันคิดว่าฉันกำลังเปรียบเทียบกับห้องสมุดที่มีความซับซ้อนมากกว่าการใช้งานเหมือนคำตอบที่เลือกข้างต้น ฉันไม่เคยทำงานกับ URI ของข้อมูลมาก่อน แต่มันเป็นวิธีที่ยอดเยี่ยมอย่างแท้จริงในการจัดการกับการจัดเก็บข้อมูล ดังนั้นฉันต้องปรับตัวให้เข้ากับสิ่งเหล่านั้นแล้วจัดเก็บและดึงข้อมูลในฐานข้อมูลนั้นง่ายมาก ... ว้าว ขอบคุณอีกครั้ง!
—
Jake
@RonaldinhoLearnCoding ลองดูไฟล์ README - มีรายการตัวเลือกที่เป็นไปได้ทั้งหมด สิ่งที่คุณกำลังมองหาเรียกว่า "penColor"
—
szimek
องค์ประกอบแคนวาสที่มี JavaScript บางตัวจะทำงานได้ดี
อันที่จริงแล้วSignature Pad (ปลั๊กอิน jQuery) ได้นำสิ่งนี้ไปใช้แล้ว
ฉันประหลาดใจกับความสวยงามของปลั๊กอินนี้
—
Gourneau
สมบูรณ์แบบมาก! ขอบคุณสำหรับการแบ่งปัน!
—
sagescrub
ฉันพบว่าปลั๊กอินนี้ใช้งานได้ยากจริงๆ การสาธิตทั้งหมดนั้นเฉพาะเจาะจงมากและใช้ยาก แน่นอนว่าวิธีการของซิกเนเจอร์แพดอื่น ๆ นั้นดีกว่า: stackoverflow.com/a/17200715/76672ด้วยเอกสารที่ไม่มีสวยเลยฉันสามารถทำให้มันทำงานได้ ...
—
Jake
นี่คือเวอร์ชันแฮ็คที่รวดเร็วโดยใช้ SVG ที่ฉันเพิ่งทำ ทำงานได้ดีสำหรับฉันบน iPhone ของฉัน ยังทำงานในเบราว์เซอร์เดสก์ท็อปโดยใช้เมาส์เหตุการณ์ปกติ
ฉันต้องการทราบวิธีการวาดลายเซ็นที่บันทึกไว้
—
Yuri Morales
จะบันทึกลายเซ็นเป็นไฟล์ png หรือแสดงลายเซ็นในทางอื่นได้อย่างไร?
—
Andrus
บางทีเทคโนโลยีเบราว์เซอร์ที่ดีที่สุดสองอย่างนี้คือ Canvas ด้วย Flash เป็นแบ็คอัพ
เราลองใช้ VML บน IE เป็นข้อมูลสำรองสำหรับ Canvas แต่ช้ากว่า Flash มาก SVG นั้นช้ากว่าที่เหลือทั้งหมด
ด้วย jSignature ( http://willowsystems.github.com/jSignature/ ) เราใช้ Canvas เป็นหลักโดยใช้ fallback to Canvas emulator (FlashCanvas) สำหรับ IE8 และต่ำกว่า รหัสบอกว่าทำงานได้ดีมากสำหรับเรา
มันดีจริงๆ ... ฉันชอบเอฟเฟกต์ที่ราบเรียบ ดีที่สุดที่ฉันเคยเห็น
—
Camden S.
ตัวเลือกที่ระบุไว้แล้วนั้นดีมาก แต่ที่นี่มีอีกสองสามข้อในหัวข้อนี้ที่ฉันได้ทำการวิจัยและพบเจอ
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/
ขอให้โชคดีและมีความสุข
ฟิลด์ลายเซ็น OpenSource อื่นคือhttps://github.com/applicius/jquery.signfield/ , ปลั๊กอิน jQuery ที่ลงทะเบียนโดยใช้ Sketch.js