如何使用 react-konva 裁剪上传的图片答案

【问题标题】：How To Crop uploaded image with react-konva如何使用 react-konva 裁剪上传的图片
【发布时间】：2023-01-30 04:08:40
【问题描述】：

我正在使用 react-konva，我想在单击编辑按钮时裁剪我选择的图像。谁能指导我如何实现这一目标？

这是长方形我正在使用裁剪图像的一部分。在此代码中onShapeChange函数保存庄稼图像的价值
画布编辑器。

{(isCropping && 
                <>
                    {React.createElement(`Rect`, {
                        ref: cropRef,
                        key: selectedShape.id,
                        id: selectedShape.id,
                        ...selectedShape.attributes,
                        draggable: false,
                        onTransformEnd: (e) => {
                            const node = cropRef.current;
                            const scaleX = node.scaleX();
                            const scaleY = node.scaleY();
                            node.scaleX(1);
                            node.scaleY(1);
                            const newShape = {
                                ...selectedShape,
                                attributes:
                                {
                                    ...selectedShape.attributes,
                                    crop: {
                     
                    x: node.x() - selectedShape.attributes.x,
                                        y: node.y() - selectedShape.attributes.y,
                                        // width: this.state.rect.attrs.width,
                                        // height: this.state.rect.attrs.height

                                        // x: node.x(),
                                        // y: node.y(),
                                        width: Math.max(5, node.width() * scaleX),
                                        height: Math.max(node.height() * scaleY),
                                    }
                                }
                            }
                            console.log('newShape in cropper', newShape, 'SelectedShape', selectedShape);
                            onShapeChange({
                                id: selectedShape.id,
                                index: selectedReportItem.index,
                                reportIndex: selectedReportItem.reportIndex,
                                newItem: newShape,
                            })
                            setIsCropping(false);
                        }
                    }, null)}
                    <Transformer
                        ref={croptrRef}
                        rotateEnabled={false}
                        flipEnabled={false}
                        boundBoxFunc={(oldBox, newBox) => {
                            // limit resize
                            if (newBox.width < 5 || newBox.height < 5) {
                                return oldBox;
                            }
                            return newBox;
                        }}
                    />
                </>
            }

【问题讨论】：

作物如何？你尝试了什么？单击编辑时您想看到什么？ Konva.Image 有 crop 属性。只需使用它们。
@lavrton 实际上我正在为我的报告生成构建一个画布编辑器，我在其中添加了多个图像。当为所选图像单击“编辑图像”按钮时，我想在我的图像上显示裁剪锚点。裁剪完成后，将新的（裁剪后的）图像保存到我的存储中。
我正在使用 Transformer 调整所选形状/图像的大小，但无法裁剪图像。
我在所选图像上添加新的 reactangle，在调整 reactangle 的大小后，我想要图像的那部分，所以为了实现这一点，我给 crop = {x: rectX - imageX, y: rectY - imageY, heigth: rectHeight,宽度：rectWidth} 到 Konva.Image。裁剪图像第一次显示正确，但当我裁剪矿石时，现在图像显示不正确。裁剪属性适用于我不想要的非常原始的图像。请帮忙！
提供您尝试过的代码示例。制作在线演示。

标签： react-konva

【解决方案1】：

嗨@Amir 你有解决这个问题吗？如果你已经解决了，你也可以发布答案吗......这会有所帮助

【讨论】：