在 React 中缩放、裁剪和缩放图像

在 React 中缩放、裁剪和缩放图像

疯狂的技术宅 前端先锋

翻译：疯狂的技术宅
做者：Nic Raboy
来源：thepolyglotdeveloper
正文共：1608 字
预计阅读时间：6分钟

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

要了解咱们要完成的工做，请看如下动画：

React应用中的Cropper.js
如你所见，有一个带有源图像的交互式 canvas。操做的结果显示在“预览”框中，若是须要，能够将其保存。实际上，咱们会将结果发送到远程服务器，但这取决于你。

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

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

1npx create-react-app image-crop-example

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

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

1import React from 'react';
 2
 3function App() {
 4    return (
 5        <div>
 6            <!-- custom component here -->
 7        </div>
 8    );
 9}
10
11export default App;

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

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

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

1npm install cropperjs --save

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

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

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

1.img-container {
 2    width: 640px;
 3    height: 480px;
 4    float: left;
 5}
 6
 7.img-preview {
 8    width: 200px;
 9    height: 200px;
10    float: left;
11    margin-left: 10px;
12}

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

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

1import React from "react";
 2import Cropper from "cropperjs";
 3import "cropperjs/dist/cropper.min.css";
 4import "./imagecropper.css";
 5
 6class ImageCropper extends React.Component {
 7
 8    constructor() {
 9        super();
10        this.state = {
11            imageDestination: ""
12        };
13        this.imageElement = React.createRef();
14    }
15
16    componentDidMount() { }
17
18    render() {
19        return (
20            <div>
21                <div class="img-container">
22                    <img ref={this.imageElement} src={this.props.src} alt="Source" crossorigin />
23                </div>
24                <img src={this.state.imageDestination} class="img-preview" alt="Destination" />
25            </div>
26        );
27    }
28
29}
30
31export default ImageCropper;

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

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

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

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

1render() {
 2    return (
 3        <div>
 4            <div class="img-container">
 5                <img ref={this.imageElement} src={this.props.src} alt="Source" crossorigin />
 6            </div>
 7            <img src={this.state.imageDestination} class="img-preview" alt="Destination" />
 8        </div>
 9    );
10}

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

这使咱们进入了 componentDidMount 方法：

1componentDidMount() {
 2    const cropper = new Cropper(this.imageElement.current, {
 3        zoomable: false,
 4        scalable: false,
 5        aspectRatio: 1,
 6        crop: () => {
 7            const canvas = cropper.getCroppedCanvas();
 8            this.setState({ imageDestination: canvas.toDataURL("image/png") });
 9        }
10    });
11}

在这个例子中，咱们仅容许裁剪和移动。盒子必须保持 1:1 的纵横比。换句话说，咱们对图像所作的任何更改都必须是完美的正方形。

注意 crop 函数：

1crop: () => {
2    const canvas = cropper.getCroppedCanvas();
3    this.setState({ imageDestination: canvas.toDataURL("image/png") });
4}

裁剪后，将得到画布区域，并将其做为图像数据存储在 imageDestination 状态变量中。修改这个变量将会致使它当即再次渲染。你将在预览框中看到此变量的数据。

若是你打算将更改后的图像发送到服务器，则可能须要在 crop 函数中进行操做。因为有不少选项和函数，若是你要寻找特定的功能，请查看该软件包的官方文档（https://github.com/fengyuanchen/cropperjs）。

打开项目的 src/App.js 文件，并将其修改成如下内容：

1import React from 'react';
 2import ImageCropper from "./components/imagecropper";
 3
 4function App() {
 5    return (
 6        <div>
 7            <ImageCropper src="https://d33wubrfki0l68.cloudfront.net/446b1f54b7535dc5e58648c68222312c90c1aec6/14bd8/img/profile.jpg"></ImageCropper>
 8        </div>
 9    );
10}
11
12export default App;

请注意，咱们如今已经导入了 ImageCropper 组件，并在 App 函数中使用了它。<ImageCropper> 标记的 src 属性是咱们要更改的图像的 URL。

原文连接

https://www.thepolyglotdeveloper.com/2020/02/scale-crop-zoom-images-react-web-application/