1.code

import React, {useState} from "react";

function ImageUploadPreview(){
    const [selectedImage, setSelectedImage]=useState(null);
    //處理用戶選擇圖片
    const handleImageChange=(e)=>{
        const selectedFile=e.target.files[0];
        if(selectedFile){
            //使用URL.createObjextURL創建臨時圖片URL
            const imageUrl=URL.createObjectURL(selectedFile);
            //創建一個新的Image對象，用來取得圖片的原始尺寸
            const img =new Image();
            img.src=imageUrl;
            //設置圖片的最大寬度、高度為250px
            const maxWidth=250;
            const maxHeight=250;
            img.onload=()=>{
                const width=img.width;
                const height=img.height;
                //如果圖片的寬度或高度超過250px，則進行縮放
                if(width>maxWidth||height>maxHeight){
                    const aspectRatio=width/height;
                    if(width>height){
                        img.width=maxWidth;
                        img.height=maxWidth/aspectRatio;
                    }else{
                        img.width=maxHeight*aspectRatio;
                        img.height=maxHeight;
                    }
                }
                //將縮放後的圖片顯示在預覽中
                const canvas=document.createElement('canvas');//創建一個HTML5Canvas元素
                const ctx=canvas.getContext('2d');
                //獲取Canvas的2D上下文對象，通過'getContext('2d')'可以在Canvas上進行2D圖形繪製
                canvas.width=img.width;
                canvas.height=img.height;
                ctx.drawImage(img, 0, 0, img.width, img.height);
                //將圖片轉為DateURL，使用Canvas的'toDataURL'方法將Canvas上的圖像轉為
                //DataURL，''image/jpeg''代表轉為JPEG格式的DataURL
                //圖片格式可替換，最後將DataURL存到'scaledImageUrl'
                const scaledImageUrl=canvas.toDataURL('image/jpeg');
                setSelectedImage(imageUrl);
                //將縮放後圖片的DataURL存到React組件的'selectedImage'狀態中
            };
            
        }
    };
    return(
        <div>
            <h1>Image Upload and Preview</h1>
            <input type="file"
                   accept="image/*"
                   onChange={handleImageChange}
                   />
            {selectedImage &&(<div className="image-preview">
                <img src={selectedImage}
                     alt="Preview"
                     style={{maxWidth:'250px',maxHeight:'250'}}
                     />
                </div>
                )}
        </div>
    );
}
export default ImageUploadPreview;

2. 實作