Upload Image File To Base64 String And Resize Image

สวัสดีครับ กลับมาพบกันอีกแล้ว

วันนี้เรามีเทคนิค ง่าย ๆ  ในการ อัพโหลดรูปภาพ เป็น ข้อมูล Base64 String และ Resize Image Thumbnail มาฝากกันครับ

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

มาเริ่มกันเลย ตัวอย่างในบทความนี้จะใช้ Angular นะครับ สำหรับเพื่อน ๆ ที่เขียนด้วยภาษา หรือ เครื่องมือ อื่น ๆ สามารถนำไปประยุกต์ใช้งานได้เลยครับ

ตัวอย่างไฟล์ image.compontent.ts

โดยในตัวอย่างจะมีฟังชั่น UploadImage สำหรับ สร้างข้อมูล Base64 String ขนาดจริง
จากนั้นจะมีการเรียก ฟังชั่น resizeImage เพื่อสร้างข้อมูล Base64 String ที่ถูกย่อขนาดแล้ว

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {
	
  imageOriginal : any = '';//สำหรับเก็บข้อมูล Base64 String ภาพขนาดจริง
  
  imageResize : any = '';//สำหรับเก็บข้อมูล Base64 String ภาพที่ถูกย่อขนาดแล้ว

  constructor() { }

  ngOnInit() {
	  
  }
  
  uploadImage(inputValue: any): void {

    var file:File =  inputValue.target.files[0];
    var myReader:FileReader = new FileReader();
    
    myReader.onloadend = (e) => {
		
      if(file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/png'){

        this.imageOriginal = myReader.result as string;// Base64 รูปภาพ ขนาดจริง
  
        this.resizeImage(file);

      }else{

        alert('อัพโหลด ได้เฉพาะ ไฟล์รูปภาพ นามสกุล jpg หรือ png');

      }
  
    }

    myReader.readAsDataURL(file);

  }
  
  
  resizeImage(file) {
	  
	var maxW = 150;//กำหนดความกว้าง
	var maxH = 150;//กำหนดความสูง
	  
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    var img = document.createElement('img');
    var that = this;
    var result = '';

    img.onload = function() {
		
      var iw = img.width;
      var ih = img.height;
	  
      var scale = Math.min((maxW / iw), (maxH / ih));
      var iwScaled = iw * scale;
      var ihScaled = ih * scale;

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

      result += canvas.toDataURL('image/jpeg', 0.5);//0.5 คือ คุณภาพของรูป ที่ Resize

      that.imageResize = result;//Base64 รูปภาพ ที่ย่อขนาดแล้ว

    }

    img.src = URL.createObjectURL(file);
  }

}

ไฟล์ image.compontent.html สำหรับแสดงผลการทำงาน

<h4>Upload Image File To Base64 String And Resize</h4>
<br>
<input type="file" (change)="uploadImage($event)">
<hr>

<div *ngIf="imageResize != '' ">

	<h4>รูปภาพ ขนาดปกติ</h4>
	<div style="margin-top:10px;margin-bottom:10px;" >
		<img  class="img-fluid" src="{{imageOriginal}}"/>

	</div>
	<div style="margin-top:10px;margin-bottom:10px;" >
		<p>Base64 String Original</p>
		<textarea rows="4">{{imageOriginal}}</textarea>
	</div>
	<hr>
	<h4>รูปภาพ ขนาดย่อ  (width : 150 height : 150)</h4>
	<div style="margin-top:10px;margin-bottom:10px;" >
		<img  class="img-fluid" src="{{imageResize}}"/>
	</div>
	<div style="margin-top:10px;margin-bottom:10px;" >
		<p>Base64 String Resize</p>
		<textarea rows="4">{{imageResize}}</textarea>
	</div>
	<hr>
	<br><br>
</div>

ตัวอย่างการทำงาน