ตัวอย่างภาพบีบอัดแคนวาสและวิธีการผลิตการ์ด

เมื่อสร้างหน้ากิจกรรมบางหน้า มักจะจำเป็นต้องอัปโหลดรูปภาพ และรูปภาพ ข้อความที่สร้างขึ้น และสติกเกอร์ก็ต้องสร้างลงในการ์ดที่ผู้ใช้สามารถกดค้างเพื่อบันทึกได้ ข้อกำหนดนี้เสร็จสิ้นไปแล้วครั้งหนึ่ง และเมื่อไม่นานมานี้ก็ได้รับการตอบสนองอีกครั้งโดยใช้ Canvas ก็แค่รวบรวมบล็อกไว้ หากมีวิธีการดำเนินการที่ดีกว่า คุณสามารถหารือร่วมกันได้

เมื่อใช้แท็กอินพุตการเขียนใน html และประเภทเป็นไฟล์ คุณสามารถเรียกอัลบั้มรูปในโทรศัพท์ของคุณเพื่อเลือกรูปภาพ และคุณยังสามารถสนับสนุนกล้องในการถ่ายภาพได้อีกด้วย ในสถานการณ์สมมตินี้ ขนาดของรูปภาพอาจใหญ่ขึ้นและอาจเกินช่วงสูงสุดที่แบ็กเอนด์รองรับ ทำให้การอัปโหลดล้มเหลว

 <input id=ประเภทไฟล์=ไฟล์>

1. ขั้นแรกให้รับไฟล์รูปภาพ

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; console.log(ไฟล์) // ไฟล์ที่เลือกคือรูปภาพ if (file.type.indexOf(image) == 0) { reader.readAsDataURL(file); } });

2. เมื่อคุณได้รับไฟล์รูปภาพแล้ว คุณต้องเข้าใจการใช้วัตถุ FileReader ใน js

ออบเจ็กต์ FileReader อนุญาตให้เว็บแอปพลิเคชันอ่านเนื้อหาของไฟล์ (หรือบัฟเฟอร์ข้อมูลดิบ) แบบอะซิงโครนัสที่จัดเก็บไว้ในคอมพิวเตอร์ของผู้ใช้

วิธี:

• readAsText: วิธีนี้มีพารามิเตอร์สองตัว พารามิเตอร์ตัวที่สองเป็นวิธีการเข้ารหัสข้อความ และค่าเริ่มต้นคือ UTF-8 วิธีนี้ง่ายต่อการเข้าใจ ไฟล์จะถูกอ่านในโหมดข้อความ และผลลัพธ์การอ่านคือเนื้อหาของไฟล์ข้อความ
• readAsBinaryString: วิธีการนี้จะอ่านไฟล์เป็นสตริงไบนารี่ โดยปกติแล้วเราจะถ่ายโอนไฟล์ไปยังแบ็กเอนด์ และแบ็กเอนด์สามารถจัดเก็บไฟล์ผ่านสตริงนี้ได้
• readAsDataURL: นี่เป็นวิธีการที่ใช้ในโปรแกรมตัวอย่าง วิธีนี้จะอ่านไฟล์เป็นสตริงที่ขึ้นต้นด้วย data: สาระสำคัญของสตริงนี้คือ Data URL เป็นวิธีฝังไฟล์ขนาดเล็กลงในเอกสารโดยตรง วางแผน. ไฟล์ขนาดเล็กในที่นี้มักจะหมายถึงไฟล์ในรูปแบบต่างๆ เช่น รูปภาพและ html (ได้วิธี base64 จากสิ่งนี้)

ดำเนินการข้างต้นต่อ หลังจากได้รับรูปภาพแล้ว คุณต้องดำเนินการและแปลงไฟล์ในขณะนี้

 var reader = new FileReader(); // อ่านไฟล์ลงในเพจในรูปแบบของ Data URL reader.readAsDataURL(file); reader.onload=function(e) { console.log(reader) }

เมื่อรูปภาพได้รับการกู้คืนและแปลงแล้ว ก็สามารถบีบอัดรูปภาพได้แล้ว

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // console.log( file) // ไฟล์ที่เลือกคือรูปภาพ if (file.type.indexOf(image) == 0) { var reader = new FileReader(); // แปลงไฟล์เป็น Data อ่านหน้าในรูปแบบของ URL reader.readAsDataURL(file); reader.onload=function(e) { // console.log(this.result) var pre=document.getElementById(pre); pre.setAttribute(src, this.result ) canvasDataURL (this.result, 100, 0.5) } } }) /* [canvasDataURL บีบอัดด้วย canvas] * @params path รูปแบบ base64 ของรูปภาพ* @params targetWidth ความกว้างของรูปภาพที่ถูกบีบอัด* @params quality ยิ่งค่าคุณภาพของภาพน้อยลงเท่าใด ภาพที่วาดก็จะยิ่งเบลอ*/ function canvasDataURL(path, targetWidth, quality) { var img = รูปภาพใหม่ (); img.src = เส้นทาง img.onload = ฟังก์ชั่น () { // var that = this // console.log (นั่น) // การบีบอัดตามสัดส่วนเริ่มต้น var w = this.width var h = this.height scale = w / h; w = targetWidth / scale var quality = quality; // คุณภาพของภาพเริ่มต้นคือ 0.7 // สร้าง canvas var canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); // สร้างโหนดแอตทริบิวต์ var anw = document.createAttribute(width); anw.nodeValue = w; document.createAttribute(height); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ยิ่งดีเท่าไร ยิ่งภาพที่วาดออกมาไม่ชัด var base64 = canvas.toDataURL('image/jpeg', quality); result=document.getElementById(ผล); result.setAttribute(src, base64) } }

ง่ายมาก ดังนั้นคุณจึงสามารถรับภาพที่บีบอัดได้ จากโค้ดข้างต้น เราจะทราบได้ว่าหลักการคือเมธอด toDataURL ใน Canvas สามารถระบุรูปแบบและคุณภาพการบีบอัดของภาพที่บีบอัด และบีบอัดข้อมูล Canvas และแปลงได้ เป็นการบีบอัดแบบ base64

ฉาก: รวมรูปภาพที่เพิ่งบีบอัดเข้ากับรูปภาพอื่น กดค้างเพื่อบันทึก

 ฟังก์ชั่น DrawCanvas (เป้าหมาย) { var canvas = document.querySelector('#myCanvas') var ctx = canvas.getContext('2d') // เป็นพิกเซลทางกายภาพบนอุปกรณ์และพิกเซลที่ไม่ขึ้นกับอุปกรณ์ (dips) อัตราส่วน var dp = window.devicePixelRatio ||. 1 คือ backingStoreRatio = ctx.webkitBackingStorePixelRatio ||. ctx.mozBackingStorePixelRatio ||. ctx.msBackingStorePixelRatio ||. ctx.backingStorePixelRatio ||. 1 อัตราส่วน = this.dp / this.backingStoreRatio var oldWidth = canvas.width var oldHeight = oldWidth * อัตราส่วน canvas.height = oldHeight * อัตราส่วน canvas.style.width = oldWidth + 'px' canvas.style.height = oldHeight + 'px' ctx.scale(อัตราส่วน, อัตราส่วน) var headerImg = รูปภาพใหม่ () var bgImg = รูปภาพใหม่ () headerImg.src = เป้าหมาย bgImg.src = '../bg.png' headerImg.onload = (e) => { // อัตราส่วนภาพของรูปภาพ var อัตรา = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / อัตรา )) // ภาพพื้นหลัง ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('Awesome', 80, 70) var resultImg = new Image() resultImg.src = canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' var cardImg=document getElementById(cardImg); cardImg.setAttribute(src, resultImg.src) } }

รับรูปภาพที่คุณเพิ่งได้รับ และหลังจากโหลดรูปภาพแล้ว ให้วาดลงบนผืนผ้าใบ คุณยังสามารถเพิ่มข้อความได้ ฯลฯ สุดท้ายนี้ ข้อมูลแคนวาสจะถูกแปลงเป็นการเข้ารหัส base64 เพื่อนำไปใช้งาน ตัวอย่างสามารถฝึกฝนได้ผ่านโค้ด

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network