React.js : การย่อขนาดรูปภาพอย่างง่ายด้วย Image-resize

หลายๆคนอาจจะพบปัญหาว่า การที่เราอัพไฟล์รูปภาพขึ้น SERVER นั้นบางทีไฟล์มีขนาดใหญ่เกินไป การย่อรูปภาพจากเครื่องของ Client ก่อนที่จะทำการส่งให้ SERVER เพื่อบันทึกรูปภาพ เพื่อลดจำนวน Data Transfer สารมาถทำให้ SERVER เราทำงานได้ดีขึ้ซึ่งในบทความนี้ผมจะมาแนะนำตัวช่วยซึ่งจะทำให้เราสามารถจัดการกับไฟล์รูปภาพให้มีขนาดที่เราต้องการ

สิ่งที่ต้องมี

• NodeJS https://nodejs.org/
• NPM https://www.npmjs.com/
• create-react-app https://reactjs.org/docs/create-a-new-react-app.html

Mission

• ปรับขนาดรูปให้มีความกว้าง 500 pixel
• ไฟล์รูปภาพเป็น png

Let’s Start

ก่อนอื่นเลยเราต้องทำการเปิด terminal เพื่อ create-react-app ของเราใหม่ก่อน

โดยผมจะตั้งชื่อโปรเจคว่า image-resize

create-react-app image-resize

cd เข้าไปข้างในโฟลเดอร์ที่เราทำการสร้างโปรเจค react ไว้

cd image-resize

จากนั้นทำการลง npm install image-resize

npm install image-resize

คัดลอกโค้ดด้านล่างไปไว้ใน ไฟล์ App.js ได้เลย

import React, { Component } from "react";
import ImageResize from "image-resize";

const imageResize = new ImageResize({
  format: "png", // ไฟล์รูปภาพเป็น png
  quality: 0.5, // ปรับขนาดไฟล์รูปภาพให้เหลือครึ่งนึง
  width: 500, // ปรับขนาดรูปให้มีความกว้าง 500 px
});

function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new File([u8arr], filename, { type: mime });
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageUrl: "",
      imageFile: null,
      imageW: 0,
      imageH: 0,
    };
  }
  uploadimage = (event) => {
    let setImage = (img, width, height) => {
      this.setState({
        imageUrl: img, // url
        imageFile: dataURLtoFile(img), // binary
        imageW: width,
        imageH: height,
      });
    };
    imageResize
      .play(URL.createObjectURL(event.target.files[0])) //แปลงไฟล์เป็น blob
      .then(function (response) {
        var i = new Image();
        i.onload = function () {
          setImage(response, i.width, i.height);
        };
        i.src = response;
      })
      .catch(function (error) {
        console.error(error);
      });
  };
  render() {
    const { imageUrl, imageFile, imageW, imageH } = this.state;
    return (
      <div style={{ display: "table", margin: "0 auto" }}>
        <div style={{ marginTop: 20 }}>
          <input type="file" name="file" onChange={this.uploadimage} />
        </div>
        <div style={{ marginTop: 20 }}>
          <img src={imageUrl} alt="#" />
        </div>
        {imageFile && (
          <div>
            <p>ไฟล์รูปมีขนาด {imageFile.size} ไบท์</p>
            <p>ไฟล์รูปประเภท {imageFile.type}</p>
            <p>
              ความกว้างและความสูงของไฟล์ {imageW} x {imageH} px
            </p>
          </div>
        )}
      </div>
    );
  }
}

run โปรเจคด้วยคำสั่ง npm start

npm start

มาลองทดสอบกันเลยดีกว่า

เปิดไปที่ localhost:3000

กดเลือกไฟล์เพื่อทำการอัพโหลดไฟล์

มาดูผลลัพธ์ที่ได้กันดีกว่า

ได้ผลลัพธ์ตามที่เราต้องการเลยถือว่าเสร็จสมบูรณ์ครับ 👏👏

.

.

.

.

เนื่องจากระบบที่ผมพัฒนาด้วย React.js อยู่นั้นมีปัญหาเรื่องการอัพโหลดรูปจากโทรศัพท์มือถือ เพราะรูปจากโทรศัพท์มือถือมีขนาดใหญ่มากทำให้ต้องใช้เวลาในการอัพโหลดเกือบ 20 วินาที จึงได้ทำการหาแนวทางในการแก้ปัญหาจนมาเจอกับ Node Package Manager ตัวนี้ซึ่งมันสะดวกมากจึงอยากจะเอามาแบ่งบันให้ทุกคนได้ใช้

หวังว่าทุกคนจะสนุกและได้ความรู้ไปกับบทความนี้นะครับ สวัสดีครับ 😊😊

.

.

.