如何在画布上用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