如何在ReactJS中在画布上渲染图像

Question

我已经使用react-image-crop在我的应用程序中添加了裁剪图像功能，但是问题是当我尝试裁剪图像时，它无法在预览中呈现正确的图像位置，我不知道为什么。我以前没有使用canvas的经验。

这是我的图像的样子。

我在画布上渲染图像的代码看起来像这样。

export function image64toCanvasRef (canvasRef, image64, pixelCrop) {
    console.log('imagePixelCrop', pixelCrop);
    let canvas = canvasRef // document.createElement('canvas');
    canvas.width = pixelCrop.width
    canvas.height = pixelCrop.height
    const ctx = canvas.getContext('2d')
    const image = new Image()
    image.src = image64
    image.onload = function () {
        ctx.drawImage(
            image,
            pixelCrop.x,
            pixelCrop.y,
            pixelCrop.width,
            pixelCrop.height,
            0,
            0,
            pixelCrop.width,
            pixelCrop.height
        )
    }
}

这是我要收获的像素。

aspect: undefined
height: 92.5
unit: "px"
width: 164.5
x: 70
y: 71

Answer 1

https://github.com/DominicTobias/react-image-crop

展示了您想要达到的效果的演示

https://codesandbox.io/s/72py4jlll6?file=/src/index.js:1086-1099