ด้วยการพัฒนาอย่างรวดเร็วของเทคโนโลยีคอมพิวเตอร์และเครือข่าย เทคโนโลยีลายเซ็นออนไลน์จึงถูกนำมาใช้มากขึ้นในสำนักงานไร้กระดาษ การดำเนินการที่ใช้งานง่ายและสะดวกสบายนี้ไม่เพียงแต่ช่วยปรับปรุงประสิทธิภาพของสำนักงานได้อย่างมาก แต่ยังใช้วิธีการจัดเก็บข้อมูลดิจิทัลเพื่อหลีกเลี่ยงปัญหาเดิมๆ เช่น ความยากในการจัดเก็บและการเรียกค้นข้อมูล ลายเซ็นกระดาษ ในชีวิตประจำวันของเรา มีหลายสถานการณ์ที่มีการใช้เทคโนโลยีลายเซ็นออนไลน์ เช่น ลายเซ็นเครื่อง POS ลายเซ็นการจัดส่งแบบด่วน ลายเซ็นธุรกิจของธนาคารหรือหน่วยงานภาครัฐ เป็นต้น เมื่อเร็วๆ นี้ ฉันกำลังดำเนินการเกี่ยวกับความต้องการในการประมวลผลทางธุรกิจของบริษัท ซึ่งเกี่ยวข้องกับลายเซ็นออนไลน์ด้วย เราใช้เทคโนโลยี Canvas เพื่อนำไปใช้ ต่อไป เรามาพูดถึงวิธีใช้ Canvas เพื่อนำลายเซ็นออนไลน์ไปใช้กัน
แคนวาสคืออะไร?Canvas เป็นองค์ประกอบใหม่ใน HTML5 ที่ใช้ในการวาดกราฟิกบนหน้าเว็บ Apple เปิดตัวในเว็บเบราว์เซอร์ Safari 1.3 เหตุผลในการขยาย HTML คือความสามารถในการวาดของ HTML ใน Safari สามารถใช้บน Mac OS X ได้ เดสก์ท็อปและ Apple ยังต้องการวิธีรองรับกราฟิกแบบสคริปต์ในแดชบอร์ด เบราว์เซอร์ทั้งสอง Firefox 1.5 และ Opera 9 ก็ติดตามการนำของ Safari และเริ่มสนับสนุน Canvas
ตอนนี้ แท็ก Canvas เป็นหนึ่งในการปรับปรุงที่ยิ่งใหญ่ที่สุดใน HTML5 เนื่องจากช่วยให้เราสามารถใช้การออกแบบกราฟิกของหน้าเว็บได้โดยไม่ต้องใช้รูปภาพ มันเหมือนกับผืนผ้าใบ ไม่มีความสามารถในการวาด แต่แสดง API การวาดภาพไปยังไคลเอนต์ JavaScript เราสามารถใช้มันภายในขอบเขตของผืนผ้าใบเพื่อให้ได้เอฟเฟกต์ที่ต้องการ
การเลือกใช้เทคโนโลยีฟังก์ชั่นนี้สามารถใช้งานได้ไม่ว่าจะเป็น Canvas, SVG หรือ Flash แต่ทำไมเราถึงเลือก Canvas?
ก่อนอื่น เนื่องจากเราจำเป็นต้องรองรับการใช้งานแพลตฟอร์มมือถือ เราจึงสามารถละทิ้ง Flash ได้โดยตรง โดยไม่มีการรองรับที่เป็นมิตรบนฝั่งมือถือ แต่ทั้ง Canvas และ SVG มีความสามารถข้ามแพลตฟอร์มที่ดี เราจะเลือกได้อย่างไร
ทั้งสองต่างก็มีความเชี่ยวชาญเป็นของตัวเอง จากข้อมูลข้างต้น เราเลือก Canvas เพื่อใช้ฟังก์ชันลายเซ็น
ต่อไปเรามาดูผลการดำเนินงานกัน
หลังจากทำความเข้าใจที่มาของ Canvas การเลือกเทคโนโลยี และเอฟเฟ็กต์การเรนเดอร์ขั้นสุดท้ายแล้ว เราจะเขียนจากห้าส่วนของการสร้างสรรค์ การวาดภาพ การตรวจสอบ การวาดใหม่และการประมวลผลภาพ ให้เราเข้าสู่โลกแห่งการวาดภาพ Canvas ด้วยกัน
สร้างผืนผ้าใบขั้นแรก เราต้องพิจารณาว่าเบราว์เซอร์รองรับ Canvas หรือไม่:
isCanvasSupported = (): boolean => { la elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d'));}จากนั้นเลือกที่จะสร้าง Canvas หรือแสดงพร้อมท์ตามผลการตัดสิน
{isCanvasSupported ? <canvas ref={canvas => (this.canvas = canvas)} height={canvasHeight} width={canvasWidth}> :ขออภัย เบราว์เซอร์ปัจจุบันไม่รองรับฟีเจอร์นี้! -เรารู้ว่าโหนด Canvas แต่ละโหนดมีวัตถุบริบทที่สอดคล้องกัน ซึ่งเราสามารถรับได้โดยการส่งสตริง 2d โดยตรงเป็นพารามิเตอร์เดียวไปให้โหนดนั้นผ่านเมธอด getContext() ของวัตถุ Canvas ต่อไป เราได้รับองค์ประกอบ Canvas ผ่านการอ้างอิง จากนั้นรับสภาพแวดล้อมการวาดภาพบนผืนผ้าใบผ่านเมธอด getContext()
ให้ cxt = this.canvas.getContext('2d');this.setState({cxt: cxt});สภาพแวดล้อมพร้อมแล้ว มาเริ่มวาดกันเลย!
วาดขั้นแรกให้วาดเส้นทางเริ่มต้น:
cxt.beginPath();
จากนั้นตั้งค่าความกว้างของบรรทัดปัจจุบัน:
cxt.lineWidth = 5;
ตั้งค่าสีของเส้น:
cxt. strokeStyle = '#000';
เราวาดเส้นผ่าน moveTo และ lineTo
cxt.moveTo(0,0);cxt.lineTo(150,0);//วาดเส้นทางที่กำหนด cxt. stroke()
อย่างไรก็ตาม เราพบว่าเส้นที่วาดค่อนข้างแข็ง
ในเวลานี้ เราสามารถใช้ lineCap เพื่อเปลี่ยนรูปแบบของตัวพิมพ์ใหญ่บรรทัดที่ส่วนท้ายของบรรทัด และเพิ่มตัวพิมพ์ใหญ่แบบกลมที่ปลายแต่ละด้านเพื่อลดความแข็งของเส้น
cxt.lineCap = 'รอบ';
ในเวลาเดียวกัน เรายังสามารถระบุมุมโค้งมนเมื่อเส้นตัดกันโดยการตั้งค่า lineJoin
cxt.lineJoin = 'รอบ';
แต่เรายังพบว่าเส้นที่วาดมีขอบหยักอย่างเห็นได้ชัด ในเวลานี้ เราจำเป็นต้องใช้ฟังก์ชันการวาดเงาขององค์ประกอบที่ Canvas จัดทำขึ้นเพื่อเบลอขอบหยัก เนื่องจากมีเงา เราจึงสามารถเปลี่ยนค่า lineWidth ได้อย่างเหมาะสม
cxt.shadowBlur = 1;cxt.shadowColor = '#000';
มันกลมขึ้นมากไหม ณ จุดนี้ วิธีการวาดเส้นของเราพร้อมแล้ว ต่อไป มาดูวิธีการติดตามเหตุการณ์แคนวาสเพื่อให้ดำเนินการวาดอย่างสม่ำเสมอ!
ฟังกิจกรรมแคนวาสเนื่องจากเราจำเป็นต้องเข้ากันได้กับทั้งเทอร์มินัลพีซีและมือถือ เราจึงต้องกำหนดเหตุการณ์การดำเนินการที่เกี่ยวข้องล่วงหน้า
this.state = {เหตุการณ์: ('ontouchstart' ในหน้าต่าง) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']}หลังจากเตรียมใช้งาน Canvas แล้ว เราก็เริ่มฟังเหตุการณ์ [0]
this.canvas.addEventListener(this.events[0], startEventHandler, เท็จ);
ฟังเหตุการณ์ [1] และเหตุการณ์ [2] ในฟังก์ชัน startEventHandler
this.canvas.addEventListener (เหตุการณ์ [1], moveEventHandler, เท็จ); this.canvas.addEventListener (เหตุการณ์ [2], endEventHandler, เท็จ);
มาถึงจุดนี้ เนื้อหาหลักของเราคือการคำนวณและวาดเส้นทางที่ตัดกัน
moveEventHandler (เหตุการณ์: ใด ๆ ): เป็นโมฆะ { event.preventDefault (); const {ctx, isSupportTouch} = this.state; const evt = isSupportTouch ? event.touches [0] : เหตุการณ์; ; const mouseX = evt.clientX - coverPos.left; evt.clientY - coverPos.top; cxt.lineTo( mouseX, mouseY );}ดังที่คุณทราบเกี่ยวกับ Canvas ผืนผ้าใบ Canvas ให้พื้นที่เรียบสำหรับการวาดภาพ แต่ละจุดในพื้นที่มีพิกัดของตัวเอง x แสดงถึงพิกัดแนวนอน และ y แสดงถึงพิกัดแนวตั้ง จุดกำเนิด (0, 0) อยู่ที่มุมซ้ายบนของภาพ ทิศทางบวกของแกน x อยู่ทางด้านขวาของจุดกำเนิด และทิศทางบวกของแกน y จะอยู่ลงจากจุดกำเนิด
ดังนั้นเราจึงใช้เมธอด getBoundingClientRect() เพื่อรับระยะห่างพิกเซลทางด้านซ้ายและด้านบนขององค์ประกอบ Canvas ของหน้าโดยสัมพันธ์กับตำแหน่งของหน้าต่างเบราว์เซอร์ จากนั้นใช้คุณสมบัติเหตุการณ์ clientX และ clientY เพื่อส่งคืนพิกัดแนวนอนและแนวตั้งของ ตัวชี้เมาส์ไปที่หน้าเบราว์เซอร์เมื่อมีการทริกเกอร์เหตุการณ์ สุดท้าย เส้นทางจะถูกวาดโดยใช้ lineTo และเส้นขีด
ในเวลาเดียวกัน เราต้องจำไว้ว่าให้ลบเหตุการณ์[1] และเหตุการณ์[2] หลังจากเหตุการณ์เหตุการณ์[2] ถูกดำเนินการ ไม่เช่นนั้นจะทำให้เกิดการวาดอย่างต่อเนื่อง
endEventHandler (เหตุการณ์: ใด ๆ ): เป็นโมฆะ { event.preventDefault (); const {เหตุการณ์, moveEventHandler, endEventHandler} = this.state; this.canvas.removeEventListener (เหตุการณ์ [1], moveEventHandler, false); this.canvas.removeEventListener ( เหตุการณ์ [2], endEventHandler, เท็จ);}โดยการวนซ้ำการดำเนินการเหตุการณ์ข้างต้นซ้ำๆ จะทำให้ฟังก์ชันลายเซ็นของเราเป็นจริงขึ้นมา
วาดใหม่ในระหว่างขั้นตอนการลงนาม เป็นสิ่งที่หลีกเลี่ยงไม่ได้ที่จะลงนามไม่ถูกต้องหรือลงนามอย่างเลอะเทอะเกินไป ดังนั้นเราจึงจำเป็นต้องสนับสนุนฟังก์ชันการล้างลายเซ็น ในขณะนี้ เราใช้วิธี clearRect() ของ Canvas เพื่อช่วยเราล้างเนื้อหาของ พื้นที่ผ้าใบ
cxt.clearRect(0, 0, canvasWidth, canvasHeight);การประมวลผลภาพ
หลังจากวาดยังไม่เสร็จ เรายังต้องอัพโหลดและบันทึกลายเซ็นที่วาดไว้ ในขณะนี้ เราสามารถใช้เมธอด toDataURL() เพื่อแปลง Canvas ให้เป็นรูปแบบไฟล์รูปภาพทั่วไปได้
โดยปกติแล้วเราสามารถดำเนินการโดยตรงเพื่อแปลงเป็น URI ข้อมูล จากนั้นใช้ ajax เพื่อขอการอัปโหลด ก็แค่นั้นแหละ
dataurl = this.canvas.toDataURL('image/png');//ordataurl = this.canvas.toDataURL('image/jpeg', 0.8);อย่างไรก็ตาม เนื่องจากความต้องการทางธุรกิจที่หลากหลาย บางครั้งเราจึงต้องมีเนื้อหาอื่นๆ บนเพจ ในเวลานี้ เราสามารถใช้ html2canvas เพื่อบรรลุเป้าหมายนี้ได้ html2canvas สามารถช่วยให้เราจับภาพหน้าจอทั้งหมดหรือบางส่วนของเพจทางฝั่งเบราว์เซอร์และแสดงผลเป็น Canvas จากนั้นเราใช้เมธอด toDataURL() เพื่อประมวลผล
เมื่อพูดถึง html2canvas ฉันขอบอกเคล็ดลับให้คุณทราบ รูปภาพที่ตัดออกในเบราว์เซอร์เวอร์ชันต่ำบางตัวนั้นว่างเปล่า เหตุผลก็คือ มีการใช้เลย์เอาต์แบบยืดหยุ่น และ html2canvas ไม่รองรับ -webkit-flex หรือ -webkit-box จึงไม่สามารถสร้าง HTML ลงใน Canvas ได้ ส่งผลให้แคปหน้าจอเป็นสีขาว
สารละลาย:จากขั้นตอนข้างต้น เราได้ตระหนักถึงฟังก์ชันลายเซ็นออนไลน์โดยพื้นฐานแล้ว เป็นที่น่าสังเกตว่าเราใช้สภาพแวดล้อม React+TypeScript เพื่อสร้างโปรเจ็กต์นี้ การใช้งานจริงของโค้ดข้างต้นจำเป็นต้องได้รับการแก้ไขอย่างเหมาะสมตามสภาพแวดล้อมของคุณเอง
บทความนี้ใช้ความรู้ด้านการวาดภาพที่ค่อนข้างตื้นของ Canvas หากเราต้องการใช้ Canvas สำหรับการผลิตแอนิเมชัน การจำลองเอฟเฟกต์ทางกายภาพ การตรวจจับการชนกัน การพัฒนาเกม การพัฒนาแอปพลิเคชันบนมือถือ และการพัฒนาการแสดงภาพข้อมูลขนาดใหญ่ เรายังต้องทบทวนเรขาคณิตทางคณิตศาสตร์ที่เรามีด้วย เรียนมาก่อนความรู้ฟิสิกส์แล้วค่อยๆสำรวจ ปัจจุบันนี้ ปลั๊กอินแผนภูมิที่สมบูรณ์จำนวนมากถูกใช้งานโดยใช้ Canvas เช่น Chart.js, ECharts เป็นต้น มีแผนภูมิที่สวยงามและเจ๋งๆ มากมายในนั้น ซึ่งครอบคลุมการใช้งานแผนภูมิเกือบทั้งหมด Canvas ยังมีไลบรารีโอเพ่นซอร์สมากมาย เช่น ZRender, createJS, Pixi.js เป็นต้น ชั้นล่างสุดของ ECharts ยังอาศัยไลบรารีคลาส Canvas น้ำหนักเบา ZRender สำหรับการห่อหุ้ม
โอเค วันนี้เราหยุดพูดที่นี่เถอะ หากคุณมีคำถามใดๆ โปรดฝากข้อความไว้ ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network