在 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/