Reactjs:如何使用drawImage

Question

在我的项目中，使用react图像-裁剪包来裁剪图像.但这提供了一些错误

import React, { useState } from 'react'
import ReactCrop  from 'react-image-crop'
import 'react-image-crop/dist/ReactCrop.css'



export const Imagecrop = () => {
    
    const [src, setSrc] = useState(null)
    const handleFileChange = e =>{
        console.log(e.target.files[0])
        setSrc(URL.createObjectURL(e.target.files[0]))
        console.log("src", src)
    }
    const [image, setImage] = useState(null)
    const [crop, setCrop] = useState()
    const [result, setResult] = useState(null);    

    const cropImageNow = () => {
        console.log("image", image)
        const canvas = document.createElement('canvas');
        const scaleX = image?.naturalWidth / image?.width;
        const scaleY = image?.naturalHeight / image?.height;
        canvas.width = crop.width;
        canvas.height = crop.height;
        const ctx = canvas.getContext('2d');
      
        const pixelRatio = window.devicePixelRatio;
        canvas.width = crop.width * pixelRatio;
        canvas.height = crop.height * pixelRatio;
        ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
        ctx.imageSmoothingQuality = 'high';

        // ctx.drawImage(
        //   image,
        //   crop.x * scaleX,
        //   crop.y * scaleY,
        //   crop.width * scaleX,
        //   crop.height * scaleY,
        //   0,
        //   0,
        //   crop.width,
        //   crop.height,
        // );
          
        // Converting to base64
        const base64Image = canvas.toDataURL('image/jpeg');
        setResult(base64Image);
      };

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-6'>
                    <input type='file' accept='image/*' onChange={handleFileChange} />
                </div>
                <div className='col-6'>
                {src && (
                    <ReactCrop crop={crop} aspect={800 / 200} onChange={setCrop}>
                        <img src={src} />
                    </ReactCrop>
                    
                    
                )}
                {src && <button onClick={cropImageNow}>crop</button>}
                
                </div>
                {result && <div>
                    <img src={result} alt="croped image" className='img-fluid'/>
                    </div>}

            
            </div>
        </div>
    )
}

结果是

​

当取消这些行的注释时

ctx.drawImage(
          image,
          crop.x * scaleX,
          crop.y * scaleY,
          crop.width * scaleX,
          crop.height * scaleY,
          0,
          0,
          crop.width,
          crop.height,
        );

会产生一个错误

​

​

如何在最后一栏中得到裁剪的图像？有没有任何可能的方法，使用反应-图像裁剪显示裁剪的图像，而不使用drawImage？请给我一个解决办法来解决这个问题。

Answer 1

我已经制定了一个解决方案，使用反应图像裁剪，您可以在沙箱演示中看到的图像。