Draw組件如何實現圖像縮放

在React中，你可以使用react-image-file-resizer庫來實現圖像縮放。以下是一個簡單的示例：

首先，你需要安裝react-image-file-resizer庫：

npm install react-image-file-resizer

然后，在你的React組件中，你可以使用resize函數來實現圖像縮放：

import React from 'react';
import ImageResizer from 'react-image-file-resizer';

class ImageComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      resizedImage: null,
    };
  }

  handleImageChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    ImageResizer.imageFileResizer(
      file,
      200, // 新的寬度
      200, // 新的高度
      'JPEG', // 圖像格式
      80, // 圖像質量
      0, // 旋轉角度
      (uri) => {
        this.setState({ resizedImage: uri });
      },
      'base64' // 返回的數據類型
    );
  };

  render() {
    const { resizedImage } = this.state;
    return (
      <div>
        <input type="file" onChange={this.handleImageChange} />
        {resizedImage && <img src={resizedImage} alt="Resized" />}
      </div>
    );
  }
}

export default ImageComponent;

在這個示例中，我們創建了一個名為ImageComponent的React組件。當用戶選擇一個圖像文件時，handleImageChange函數會被觸發。這個函數使用ImageResizer.imageFileResizer方法來縮放圖像，并將縮放后的圖像設置為組件的狀態。最后，我們在組件的渲染方法中顯示縮放后的圖像。

注意：這個示例僅適用于客戶端縮放。如果你需要在服務器端進行縮放，你可以考慮使用其他庫，如sharp或jimp。