โค้ดตัวอย่างสำหรับ Canvas และการบีบอัดรูปภาพ

ฉันเคยเขียนบทความเกี่ยวกับการประมวลผลภาพ Canvas มาก่อน วันนี้เราจะมาพูดถึงวิธีใช้ Canvas ในการบีบอัดภาพ

ต่อไป ผมจะอธิบายกระบวนการเฉพาะของการบีบอัดภาพ Canvas พร้อมตัวอย่างเฉพาะ

1. รับไฟล์ในเครื่อง

 <!--HTML--><ประเภทอินพุต=ไฟล์ id=choose-img />

 // JSvar chooseImg = document.getElementById(choose-img); chooseImg.onchange = function(e){ var file = this.files[0]; // ... (ส่วนหนึ่งของโค้ดจะถูกละเว้นและจะแสดงในนั้น) ลำดับเดียวกันด้านล่าง)};

มันง่ายมาก เพียงรับไฟล์ในเครื่องผ่านปุ่มที่มีประเภทไฟล์

 <!--HTML--><div id=result></div>

 // JSvar result = document.getElementById(result); // ใช้เพื่อแสดงผลเอาต์พุตรูปภาพ หรือแสดงข้อผิดพลาด if(/image/.test(file.type)){ // ตรวจสอบว่าไฟล์เป็นประเภทรูปภาพ // ... }else{ result.innerHTML = '<span style=color: red;>ประเภทไฟล์ไม่ถูกต้อง! </span>';}

 var img = new Image(), // สร้างวัตถุรูปภาพเพื่อวางโปรแกรมอ่านรูปภาพต้นฉบับ = new FileReader();reader.readAsDataURL(file); // อ่านในรูปแบบ base64 และเก็บไว้ในแอตทริบิวต์ผลลัพธ์ของวัตถุ FileReader ผู้อ่าน .onload = function(){ img.src = this.result; // กำหนดสตริง base64 ของรูปภาพโดยตรงให้กับ document.body.insertBefore(img,chooseImg) ใน src ของวัตถุ Image; // แทรกรูปภาพเอาต์พุตก่อนปุ่มไฟล์ img.onload = function(){ // ... }; };

 var canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = canvas.getContext('2d');

หมายเหตุ: ขนาดผืนผ้าใบจะเหมือนกับความกว้างและความสูงของภาพที่ป้อน

 context.drawImage (img, 0,0, canvas.width, canvas.height);

 <!--HTML-->อัตราส่วนการบีบอัดภาพ: <input id=rate type=number min=0 max=100 /> %

 // อัตรา JSvar = document.getElementById(rate).value ||. 100; // ป้อนอัตราส่วนการบีบอัดรูปภาพ ค่าเริ่มต้นคือ 100% var imgUrl = canvas.toDataURL(file.type,rate/100); พารามิเตอร์คือประเภทภาพที่ส่งออก และอันที่สองคืออัตราส่วนการบีบอัด result.innerHTML = 'หลังการบีบอัด: <img src='+ imgUrl +' />'; // แสดงภาพที่บีบอัดในผลลัพธ์ img.style.display = 'none'; // ซ่อนรูปภาพต้นฉบับ

ส่งออกภาพที่วาดใน Canvas ในรูปแบบ base64 อีกครั้ง

 <!--HTML-->อัตราส่วนการบีบอัดภาพ: <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=result></div >

 // JSvar chooseImg = document.getElementById(choose-img), result = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0]; file.type)){ var img = รูปภาพใหม่ (), reader = new FileReader (); reader.readAsDataURL (ไฟล์); reader.onload = function(){ img.src = this.result; document.body.insertBefore(img,chooseImg); img.onload = function(){ var canvas = document.createElement('canvas'); ; canvas.height = img.clientHeight; var บริบท = canvas.getContext('2d'); บริบท.drawImage(img,0,0,canvas.width,canvas.height); var rate = document.getElementById(rate).value ||. 100; var imgUrl = canvas.toDataURL(file.type,rate/100); result.innerHTML = 'หลังการบีบอัด: <img src='+ imgUrl +' />'; result.style.display = 'block'; img.style.display = 'none'; }; } else{ result.innerHTML = '<span style=color: red;>ประเภทไฟล์ไม่ถูกต้อง! </span>'; }};

หลังจากการทดสอบพบว่าเอฟเฟกต์การบีบอัดภาพในรูปแบบ JPEG นั้นดีที่สุดผ่าน Canvas ในขณะที่เอฟเฟกต์การบีบอัด PNG นั้นไม่ชัดเจนและบางครั้งก็มีขนาดใหญ่ขึ้น

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