专栏首页京程一灯在 React 中缩放、裁剪和缩放图像

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

每日前端夜话第283篇

翻译:疯狂的技术宅

作者:Nic Raboy

来源:thepolyglotdeveloper

正文共:1608 字

预计阅读时间:6分钟

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

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

React应用中的Cropper.js

如你所见,有一个带有源图像的交互式 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。

原文链接

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

2020年京程一灯全新课程体系即将推出,请保持关注。

愿你在新的一年里保持技术领先,有个好前程,愿你月薪30K。我们是认真的 !

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用React框架和Express模块进行服务器端渲染

    这周末我启动了一个编外项目,这个项目里要做的是服务器端的渲染。我在网上找的教程也好,建议也好都太深了,像Redux框架或React路由导航(React Rout...

    疯狂的技术宅
  • CSS 层叠相关知识指北

    亲爱的观众老爷们大家好~我发现我写文章都是因为工作碰到问题才写,什么探索最前沿的最讨厌了(其实是力有所不及)!言归正传,最近碰到的问题是这个:准备开发一个平台,...

    疯狂的技术宅
  • 常用数据结构的 JavaScript 实现代码[每日前端夜话0xED]

    在 JavaScript 中数据结构通常总是被忽略,或者接触得不多。但是对于许多大厂而言,一般都需要你深刻了解如何管理数据。掌握数据结构也能够在解决问题时为你...

    疯狂的技术宅
  • AngularJS:如何使用自定义指令来取代ng-repeat

    引言 本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能。 对于处理小数量,ng-repeat是非常有用的,但是如果...

    葡萄城控件
  • jQuery中排除指定元素,同时选择剩下的所有元素

    场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

    菩提树下的杨过
  • 简单的导航网站制作

    这里简单地介绍一下制作一个简易导航网站的主要方法。在这之前要说一下为什么要自己制作导航网站,现在网络上有许多各种各样的导航网站,但是网络上的导航网站大多商业化比...

    用户1506126
  • CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

    xing.org1^
  • 事件修饰符

    章鱼喵
  • Laravel删除产品-CRUD之delete(destroy)

      上一篇讲了Laravel编辑产品-CRUD之edit和update,现在我们讲一下删除产品,方法和前面的几篇文章类似,照着ytkah来操作吧

    ytkah
  • jQuery入门前言

    上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些Java...

    贪挽懒月

扫码关注云+社区

领取腾讯云代金券