ฉันจำได้ว่าเคยเห็นการแบ่งปันของทุกคนก่อนหน้านี้อธิบายการแก้ปัญหาหน้าจอของ JS ดังนั้นคราวนี้ฉันวางแผนที่จะเขียนความคิดในการแบ่งปันกับทุกคน นี่เป็นเพียงการสาธิตเล็ก ๆ น้อย ๆ ที่ง่ายมาก ตามที่อยู่รหัส PO ปกติ
การเรนเดอร์
ความคิดโดยรวม
เนื่องจากปุ่มทางลัดอาจทำให้เกิดความขัดแย้งปุ่มลัดจึงไม่สามารถ จำกัด จำนวนคีย์ลัดได้ดังนั้นรูปแบบของอาร์เรย์ในพารามิเตอร์แรกจะถูกส่งผ่าน
ฟังก์ชั่นสกรีนช็อต (QuickStartkey, endkey) {// ความเข้ากันได้พิจารณาว่าจะไม่ใช้ ... Extended String var keyLength = QuickStartkey.length var waskeytrigger = {} var cantshot = false ... q uickstartkey อาร์เรย์พารามิเตอร์ Traversing Iskeytrigger [item] = false // คีย์ทั้งหมดในอาร์เรย์เริ่มต้นจะไม่ถูกเรียกใช้}) $ ('html') = = endkey) {... } อื่นถ้า (! CantStartShot) {iSkeyTrigger [KeyCode] = true var nottrigg ที่จะถูกเรียกใช้}) ถ้า (nottrigger.length === 0) {// ไม่มีคีย์ทางลัดที่ต้องเรียกใช้ 2. วาด DOM ไปยังผืนผ้าใบเพื่อครอบคลุมอินเตอร์เฟส DOM ดั้งเดิมหากคุณใช้วิธีการดั้งเดิมคุณสามารถอ้างถึงการแนะนำของ DOM ภายใต้ MDN สิ่งที่ยุ่งยากที่สุดคือคุณต้องสร้างองค์ประกอบที่เกี่ยวข้องในภาพ SVG ที่มี XML วิธีการคำนวณ DOM ที่แสดงในเบราว์เซอร์ปัจจุบันและสกัดมันน่าเบื่อที่สุด ในความเป็นจริงผู้เขียนไม่มีความคิดที่ดีที่จะใช้งานด้วยตนเอง = = ดังนั้นฉันจึงเลือกห้องสมุด HTML2CANVAS นี้เพื่อทำสิ่งนี้ให้เสร็จสมบูรณ์ วิธีการโทรทั่วไปมีดังนี้:
ฟังก์ชั่นเริ่มต้นช็อต (cantStartShot) {ถ้า (cantStartShot) {html2canvas (document.body, {onrendered: ฟังก์ชั่น (Canvas) {// รับภาพ Canvas ด้วยอินเทอร์เฟซเดียวกัน})}}}}}}} 3. เพิ่มพื้นที่ภาพหน้าจอเมาส์แบบจำลองผืนผ้าใบการตระหนักถึงสถานที่นี้มีจุดประสงค์เพื่อใช้ Canvasapi ดั้งเดิม แต่มันเกี่ยวข้องกับปัญหาในนั้น จะถูกลบเมื่อมันก่อให้เกิด mousemove เพื่อจำลองกระบวนการวาดภาพจริง ผู้เขียนที่ไม่มีประโยชน์ไม่พบวิธีการใช้ API Native Canvas ที่นี่ผู้เขียนใช้ห้องสมุดผ้าใบ JQ -based ที่เรียกว่า JCanvas สิ่งนี้ตรงกับความต้องการของผู้เขียนและการรับรู้มีดังนี้:
$ ('#' +Canvasid) .mousedown (ฟังก์ชั่น (e) {$ (# +canvasid) .remoVelayer (layername) // ลบเลเยอร์เลเยอร์ก่อนหน้า ตำแหน่งเมาส์ starty = that._calculatingxy (e) .y isshot = true $ (#+canvasid) .addlayer ({type: 'rectangle', // ectangular ... ชื่อ: layname, ชื่อเลเยอร์ x: startx, y, y : starty, ความกว้าง: 1, ความสูง: 1})}) = That._CalculatingXy (e) .y var width = movex -startx var cheight = movey -starty $ (#+canvasid) .addlayer ({type: 'rectangle', ... ชื่อ: lay: lay ername , x: startx, y: starty, ความกว้าง: ความกว้าง, ความสูง: ความสูง}) $ (#+canvasid). ddrayers (); 4. เพิ่มผืนผ้าใบเพื่อวาดส่วนต่อประสานเบราว์เซอร์ที่สอดคล้องกับพื้นที่ภาพหน้าจอเมาส์ var canvasresult = document.getElementById ('canvasresult') var ctx = canvasresult.getContext (2d); , 0, 0, ความกว้าง, ความสูง) var dataurl = canvasresult.todataurl (รูปภาพ/png);ในหมู่พวกเขาภาพถูกดักจับด้วยการดึงและจากนั้นภาพจะถูกแปลงเป็น base64 การเข้ารหัสโดยใช้วิธี todataurl
5. บันทึกภาพที่สกัดกั้น การดาวน์โหลดฟังก์ชั่น (el, filename, href) {el.attr ({'ดาวน์โหลด': ชื่อไฟล์, 'href': href})} ... downloadfile ($ ('. ตกลง'), 'screenshot' + คณิตศาสตร์. .random () .tring ()ในหมู่พวกเขาแอตทริบิวต์การดาวน์โหลดของแท็กสามารถดาวน์โหลดได้โดยตรงเมื่อผู้ใช้คลิก
ปรับใช้ การพึ่งพาอาศัยกัน<script src = https: //cdn.bootcss.com/jquery/3.2.1/jqury.min.js> </script> <script src = https: //cdn.bootcss.com/jcanvas/16.7.3/3/ jcanvas.min.js> </script> <script src = https: //cdn.bootcss.com/html2canvas/0.5.0-html2canvas.min.js> </script>กำหนดค่าคีย์ลัด
สกรีนช็อต ([16, 65], 27) // เริ่มชุดคีย์ทางลัดเป็น Shift+A;ในที่สุด
สถานที่ที่น่ารังเกียจที่สุดในบทความ (Dom Writes with Canvas และ Canvas Setting Layers) ใช้ไลบรารีสองห้องสำหรับการใช้งานตามลำดับ ว่ามันยังคงอยู่เล็กน้อย แก่นแท้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้