作者：Nic Raboy

翻译：疯狂的技术宅

原文：https://www.thepolyglotdevelo...

未经允许严禁转载

在本文中，我们将了解如何使用 Cropper.js 在 React Web 应用中裁剪图像。尽管我们不会将这些图像上传到远程服务器进行存储，但是很容易就能完成这个任务。

要了解我们要完成的工作，请看以下动画：

如你所见，有一个带有源图像的交互式 canvas。操作的结果显示在“预览”框中，如果需要，可以将其保存。实际上，我们会将结果发送到远程服务器，但这取决于你。

用样板代码创建一个简单的 React 应用

为了简单易懂，我们将在一个新项目中进行工作。在命令行中，执行以下操作：

npx create-react-app image-crop-example

上面的命令将使用默认模板创建一个新项目。默认模板包含的代码比我们所需的要多一些，让我们花点时间来进行清理。

打开项目的 src/App.js 文件，使其看起来如下所示：

import React from 'react';

function App() {
    return (
        <div>
            <!-- custom component here -->
        </div>
    );
}

export default App;

在上面的代码中，我们基本上去除了默认情况下 React CLI 工具提供的文本和图像。接下来准备添加我们的自定义代码。

在 Cropper.js 支持下开发图像处理 React 组件

就像我之前提到的，我们将用Cropper.js来完成所有繁重的工作。要将其安装在我们的项目中，请从命令行执行以下命令：

npm install cropperjs --save

我们可以在 src/App.js 文件中使用此包，但是创建一个可重用的组件可能更有意义，这样可以将其轻松用在任何需要的位置。

在项目中，创建一个 src/components/imagecropper.js 文件和一个 src/components/imagecropper.css 文件。对于本例，自定义 CSS 对我们而言并不那么重要，所以首先解决它。

打开项目的 src/components/imagecropper.css 文件，并添加以下内容：

.img-container {
    width: 640px;
    height: 480px;
    float: left;
}

.img-preview {
    width: 200px;
    height: 200px;
    float: left;
    margin-left: 10px;
}

上面的 CSS 像动画示例中一样，将源 canvas 和目标预览彼此相邻放置。通过基本的 CSS，可以专注于核心功能。

打开项目的 src/components/imagecropper.js 文件，并包含以下内容：

import React from "react";
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.min.css";
import "./imagecropper.css";

class ImageCropper extends React.Component {

    constructor() {
        super();
        this.state = {
            imageDestination: ""
        };
        this.imageElement = React.createRef();
    }

    componentDidMount() { }

    render() {
        return (
            <div>
                <div class="img-container">
                    <img ref={this.imageElement} src={this.props.src} alt="Source" crossorigin />
                </div>
                <img src={this.state.imageDestination} class="img-preview" alt="Destination" />
            </div>
        );
    }

}

export default ImageCropper;

上面的代码并不完整，但是足以让我们入门。

首先，你会注意到导入了 Cropper.js 和 CSS。接下来还将导入为该特定组件定义的自定义 CSS。

在 constructor 方法中，我们定义了状态变量，该变量表示最终更改的图像。因为 Cropper.js 需要与 HTML <img> 组件交互，所以需要定义一个引用变量来包含它。

Render 函数将状态变量和参考变量组合在一起：

render() {
    return (
        <div>
            <div class="img-container">
                <img ref={this.imageElement} src={this.props.src} alt="Source" crossorigin />
            </div>
            <img src={this.state.imageDestination} class="img-preview" alt="Destination" />
        </div>
    );
}

这里的目标是将源图像与 Cropper.js 一起使用。源图像填充使用了该特定组件的用户定义的属性。目标图片使用的状态变量是我们在安装组件后定义的。

这使我们进入了 componentDidMount 方法：

componentDidMount() {
    const cropper = new Cropper(this.imageElement.cu
                    

                        这篇关于在React 中缩放、裁剪和缩放图像的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！