在本文中,我们将了解如何使用 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.current, {
zoomable: false,
scalable: false,
aspectRatio: 1,
crop: () => {
const canvas = cropper.getCroppedCanvas();
this.setState({ imageDestination: canvas.toDataURL("image/png") });
}
});
}
在这个例子中,我们仅允许裁剪和移动。盒子必须保持 1:1 的纵横比。换句话说,我们对图像所做的任何更改都必须是完美的正方形。
注意 crop
函数:
crop: () => {
const canvas = cropper.getCroppedCanvas();
this.setState({ imageDestination: canvas.toDataURL("image/png") });
}
裁剪后,将获得画布区域,并将其作为图像数据存储在 imageDestination
状态变量中。修改这个变量将会导致它立即再次渲染。你将在预览框中看到此变量的数据。
如果你打算将更改后的图像发送到服务器,则可能需要在 crop
函数中进行操作。由于有很多选项和函数,如果你要寻找特定的功能,请查看该软件包的官方文档(https://github.com/fengyuanchen/cropperjs)。
打开项目的 src/App.js 文件,并将其修改为以下内容:
import React from 'react';
import ImageCropper from "./components/imagecropper";
function App() {
return (
<div>
<ImageCropper src="https://d33wubrfki0l68.cloudfront.net/446b1f54b7535dc5e58648c68222312c90c1aec6/14bd8/img/profile.jpg"></ImageCropper>
</div>
);
}
export default App;
请注意,我们现在已经导入了 ImageCropper
组件,并在 App
函数中使用了它。<ImageCropper>
标记的 src
属性是我们要更改的图像的 URL。