在前端專案中需要使用者將圖片儲存到server空間前，
需要裁切成指定尺寸(280px : 360px)
目前只能裁切指定高寬比(7:9)，還需要近一步針對圖片縮放壓縮圖片。
到這邊小弟不才只能照教學使用，想要進一步就需要前輩們賜教只能湊出解決方式

我目前使用 react-easy-crop
插件網站：https://www.npmjs.com/package/react-easy-crop
使用方式：https://codesandbox.io/s/y09komm059

我推測的解決方式是：
按照使用方式的建議使用預先編寫好的"canvasUtils"使用canvas去儲存圖片 但我不知道從何下手去修改
但實際解法可能跟我想的完全沒關係，如果推薦其他插件 我會願意嘗試
實際解決方式：
增加一組canvas運算縮放後結果
因為編輯原canvasUtils 總會得到有空白像素問題或是錯誤尺寸圖片

大致上操作流程：

1. 使用者選擇圖片
2. 由input type=file接收
3. 圖片傳遞給函數進行旋轉縮放裁切
4. canvasUtils 將圖片重新繪製交出
5. 顯示圖片在<img src={裁切好圖片}>
6. 可以將裁切好圖片傳給伺服器處理 顯示預覽給使用者看
7. 由按鈕觸發 funtion handleImageUpload
8. 觸發funtion resizeImage 將運算好的圖片另存
9. 由useEffect去檢查set何時完成
10. 觸發api函數交由伺服器做進一步處理

備註1：請記得在初始化流程或重新選擇圖片時清空adjustSizeImage

找到解決方式：

const [croppedImage, setCroppedImage] = useState(null);//Base64裁減後檔案 (單張圖片檔案容器)
const [adjustSizeImage, setAdjustSizeImage] = useState(null);//Base64調整後圖片容器
const [adjustWidth, setAdjustWidth] = useState(280);
const [adjustHeight, setAdjustHeight] = useState(360);
const handleImageUpload = async (event) => {
    try {
        //const file = event.target.files[0];
        //const base64Image = await convertToBase64(file);
        const resizedImage = await resizeImage(croppedImage);
        setAdjustSizeImage(resizedImage);
    } catch (error) {
        console.error('Error processing the image:', error);
        setAdjustSizeImage(null);
    }
};//觸發重新縮放事件
const resizeImage = (base64Image) => {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = base64Image;

        img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = adjustWidth;
            canvas.height = adjustHeight;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            const resizedBase64 = canvas.toDataURL('image/jpeg');
            resolve(resizedBase64);
        };

        img.onerror = (error) => reject(error);
    });
};
useEffect(() => {
    if (adjustSizeImage) {
        console.log("imageSrc been update");
        callAPIfuntion();
    }
}, [adjustSizeImage]);//縮放成功 call api