在React 中縮放、裁剪和縮放圖像

時間 2020-02-28

標籤 react 縮放裁剪圖像欄目 React 简体版

原文原文鏈接

做者：Nic Raboy
翻譯：瘋狂的技術宅javascript

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

未經容許嚴禁轉載前端

在本文中，咱們將瞭解如何使用 Cropper.js 在 React Web 應用中裁剪圖像。儘管咱們不會將這些圖像上傳到遠程服務器進行存儲，可是很容易就能完成這個任務。java

要了解咱們要完成的工做，請看如下動畫：react

如你所見，有一個帶有源圖像的交互式 canvas。操做的結果顯示在「預覽」框中，若是須要，能夠將其保存。實際上，咱們會將結果發送到遠程服務器，但這取決於你。git

用樣板代碼建立一個簡單的 React 應用

爲了簡單易懂，咱們將在一個新項目中進行工做。在命令行中，執行如下操做：程序員

npx create-react-app image-crop-example

上面的命令將使用默認模板建立一個新項目。默認模板包含的代碼比咱們所需的要多一些，讓咱們花點時間來進行清理。github

打開項目的 src/App.js 文件，使其看起來以下所示：web

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/fengyuanch...）。

打開項目的 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。