如何在 reactjs 中的 canvas 上渲染图像

Question

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

这就是我的图像的样子。

我在 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