Scale, Crop, and Zoom Images in a React Web Application

栏目: IT技术 · 发布时间: 5年前

内容简介:If you’ve been keeping up with the blog, you might remember a few tutorials I wrote around theSo what if we were building aIn this tutorial we’re going to see how to use Cropper.js to crop images within a React web application. While we won’t be uploading

If you’ve been keeping up with the blog, you might remember a few tutorials I wrote around the Cropper.js library for JavaScript applications. In these tutorials I demonstrated how to manipulate images inAngular as well as Vue.js web applications. While the tutorials were more or less the same, the framework was different, which resulted in some differences in the code used.

So what if we were building a React application and needed to manipulate images prior to uploading them to a server?

In this tutorial we’re going to see how to use Cropper.js to crop images within a React web application. While we won’t be uploading these images to a remote server for storage, such as a task can be easily accomplished with a bit of imagination.

To get an idea of what we want to accomplish, take a look at the following animated image:

Scale, Crop, and Zoom Images in a React Web Application

As you can see there is an interactive canvas with a source image. The result of our manipulations are displayed in a “preview” box which can be saved if we wanted to. Realistically we’d send the result to a remote server, but that’s up to you.

Create a Simple React Application with Boilerplate Code

To keep things simple and easy to understand, we’re going to be working from a fresh project. From the command line, execute the following:

npx create-react-app image-crop-example

The above command will create a new project with the default template. The default template contains a little more code than we need, so let’s take a moment to clean it up.

Open the project’s src/App.js file and make it look like the following:

import React from 'react';

function App() {
    return (
        <div>
            <!-- custom component here -->
        </div>
    );
}

export default App;

In the above code we’ve essentially stripped out the text and images that the React CLI tool provides by default. At this point in time we’re ready to start adding our own custom code.

Developing an Image Manipulation React Component with Cropper.js Support

Like I had previously mentioned, we’re going to be using Cropper.js for all of the heavy lifting. To install it in our project, execute the following from the command line:

npm install cropperjs --save

We could start using this package in our src/App.js file, but it probably makes more sense to create a reusable component that we could easily drop in wherever we wanted.

Within the project, create a src/components/imagecropper.js file as well as a src/components/imagecropper.css file. For this example the custom CSS is less important to us, so we’ll get that out of the way first.

Open the project’s src/components/imagecropper.css file and include the following:

.img-container {
    width: 640px;
    height: 480px;
    float: left;
}

.img-preview {
    width: 200px;
    height: 200px;
    float: left;
    margin-left: 10px;
}

The above CSS places the source canvas and the destination preview next to each other like in the animated example. With the basic CSS out of the way, we can focus on the core material.

Open the project’s src/components/imagecropper.js file and include the following:

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>
                    <img ref={this.imageElement} src={this.props.src} alt="Source" crossorigin />
                </div>
                <img src={this.state.imageDestination} alt="Destination" />
            </div>
        );
    }

}

export default ImageCropper;

The above code is not complete, but it is enough to get us started.

First you’ll notice that we’re importing the Cropper.js JavaScript and CSS. We’re also importing the custom CSS that we had defined for this particular component.

In the constructor method we’re defining our state variables, which in this case represents the final altered image. Because Cropper.js needs to interact with the HTML <img> component, we need to define a reference variable to contain it.

The render function brings the state and reference variables together:

render() {
    return (
        <div>
            <div>
                <img ref={this.imageElement} src={this.props.src} alt="Source" crossorigin />
            </div>
            <img src={this.state.imageDestination} alt="Destination" />
        </div>
    );
}

The goal here is to use the source image with Cropper.js. This source image is populated with properties defined by the user that’s using this particular component. We’ll get to that next. The destination image is using our state variable which we’ll define after the component mounts.

This brings us to the componentDidMount method:

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") });
        }
    });
}

In this particular example, we’re only allowing cropping and moving. We’re also saying that the box must maintain a 1:1 aspect ratio. In other words any changes we make to our image must be a perfect square.

Take note of the crop function:

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

When we crop, the canvas area is obtained and we’re storing it as image data in the imageDestination state variable. Changing this variable will cause it to immediately render again. You’ll see the data of this variable in the preview box.

If you had planned to send the altered image to a server, you’d probably want to do it in the crop function. There are quite a few options and functions, so if you’re looking for specific functionality, take a look at the official documentation for the package.

So let’s bring it together. We have a component, so now we need to use it.

Open the project’s src/App.js file and change it to the following:

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;

Notice that we’ve now imported our ImageCropper component and are making use of it in the App function. The src property of the <ImageCropper> tag is a URL to an image that we wish to change.

Conclusion

You just saw how to use Cropper.js in a React application to scale, zoom, and crop images with UI functionality. This is typically a pre-processing step to allow your users to make changes to an image prior to uploading it to a server.

If you’re an Angular developer you can check out a variation of this tutorial in Image Cropping, Zooming, and Scaling with Angular and JavaScript . Likewise, I also have a Vue.js version if you’d prefer that as well.

Scale, Crop, and Zoom Images in a React Web Application

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.


以上所述就是小编给大家介绍的《Scale, Crop, and Zoom Images in a React Web Application》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

R数据科学

R数据科学

[新西兰] 哈德利 • 威克姆、[美] 加勒特 • 格罗勒芒德 / 陈光欣 / 人民邮电出版社 / 2018-7 / 139.00元

本书的目标是教会读者使用最重要的数据科学工具,从而为实施数据科学奠定坚实的基础。读完本书后,你将掌握R语言的精华,并能够熟练使用多种工具来解决各种数据科学难题。每一章都按照这样的顺序组织内容:先给出一些引人入胜的示例,以便你可以整体了解这一章的内容,然后再深入细节。本书的每一节都配有习题,以帮助你实践所学到的知识。一起来看看 《R数据科学》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具