标签: react-image-crop

我知道不可能.scaledToFit()在帧为 120 和 430 的图像上使用修改器，使用像这样的帧修改器.frame(height: 100, width: 100)并期望图像以某种方式保持宽高比并适合宽度 100 和高度 100 的帧。

因此，解决这个问题的唯一方法似乎是强制用户在使用图像选择器上传图像时将其图像裁剪成正方形。这在 SwiftUI 中可能吗/我在这里缺少什么吗？

谢谢

你能帮我如何通过react-image-crop模块获得输出（裁剪图像的来源）吗？\n上传组件如下所示：

class MyUpload extends Component {\nconstructor() {\n    super();\n    this.state = {\n        src: \'source-to-image\',\n        crop: {\n            x: 10,\n            y: 10,\n            aspect: 9 / 16,\n            width: 100\n        }\n    }\n}\n\nonCropComplete = (crop, pixelCrop) => {\n    this.setState({\n        crop\n    })\n};\n\nrender() {\n    return (\n           <ReactCrop\n                    src={this.state.src}\n                    onComplete={this.onCropComplete}\n                />\n    );\n} }\n

onCropComplete 方法仅返回裁剪图像的坐标、宽度和高度，而不返回源图像。我想要获取 blob 文件。

编辑（工作解决方案——感谢 Mos\xc3\xa8 Raguzzini 的回复）：

如果有人遇到类似问题，请在组件中的教程中调用getCropptedImg函数，并从返回的 Blob 对象创建 url，如下所示：

getCroppedImg(this.state.image, pixelCrop, \'preview.jpg\')\n            .then((res) => {\n                const blobUrl = URL.createObjectURL(res);\n                console.log(blobUrl); // it returns cropped image in …

我想为我的 Web 应用程序实现图像裁剪功能，并发现 React-image-crop 是实现该功能的最佳 npm 包。但是，由于某种原因，ReactCrop 组件提供的预览没有在我的视口上渲染。

这是我一直使用的代码。

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

function App() {
const [src, setSrc] = useState(null);
const [crop, setCrop] = useState({ aspect: 16 / 9 });
const [image, setImage] = useState(null);
const [output, setOutput] = useState(null);

const selectImage = (file) => {
    setSrc(URL.createObjectURL(file));
};

const cropImageNow = () => {
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width …