{"id":28058,"date":"2022-04-25T06:34:15","date_gmt":"2022-04-25T06:34:15","guid":{"rendered":"http:\/\/how-to-crop-and-resize-image-in-the-browser-with-react"},"modified":"2025-02-16T13:09:29","modified_gmt":"2025-02-16T21:09:29","slug":"how-to-crop-and-resize-image-in-the-browser-with-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-crop-and-resize-image-in-the-browser-with-react\/","title":{"rendered":"How to Crop and Resize Image in the Browser"},"content":{"rendered":"

Cropping an image is typically done to remove an unattractive subject or extraneous information, adjust the aspect ratio of an image, or sometimes magnify the main topic and reduce the angle of view.<\/p>\n

This article will show you how to crop and resize an image in the browser with React.<\/p>\n

The completed project is on Codesandbox<\/a>.<\/p>\n

Prerequisite<\/h1>\n

The knowledge of JavaScript and React.js is required to follow through with this article. Also, you need to ensure that you have Node.js<\/a> and npm installed to follow along.<\/p>\n

To Verify the node version installed, use the following terminal command:<\/p>\n

node -v && npm -v \n<\/code><\/span><\/pre>\n
The above command should output their respective versions if installed.<\/p>\n
Project Setup<\/h2>\n
To create a new project, use the npx create-react-app <project name><\/code> command to scaffold a new project in a directory of your choice.<\/p>\n
To install the dependencies, you should use the command below:<\/p>\n
cd <project<\/span> name<\/span>><\/span>\nnpm install react-cropper\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Once the app is created, and the dependencies are installed, you will see a message with instructions for navigating to your site and running it locally. You can do this with the following command.<\/p>\n
npm start\n<\/code><\/span><\/pre>\n
React.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/a>.<\/p>\n
Next, update the src\/App.js<\/code> file with the code snippet below.<\/p>\n
#App.js\n    \nimport React, { useState } from \"react\";\nimport \".\/styles.css\";\n    \nexport default function App() {\n  return (\n    <div<\/span>><\/span>\n      <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"leftdiv\"<\/span>><\/span>\n        <h1<\/span> className<\/span>=\"main-h1\"<\/span>><\/span>\n            How to Crop and Resize Image in the Browser using CropperJs\n        <\/h1<\/span>><\/span>\n        <div<\/span> id<\/span>=\"leftdivcard\"<\/span>><\/span>\n          <input<\/span> type<\/span>=\"file\"<\/span> \/><\/span>\n          <button<\/span> type<\/span>=\"button\"<\/span> id<\/span>=\"leftbutton\"<\/span>><\/span>\n            Use Default Image\n          <\/button<\/span>><\/span>\n            &nbsp;<\/span> &nbsp;<\/span>\n          <button<\/span> type<\/span>=\"button\"<\/span> id<\/span>=\"leftbutton\"<\/span>><\/span>\n            Crop Image\n          <\/button<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"rightdiv\"<\/span>><\/span>\n        <div<\/span> id<\/span>=\"itemdivcard\"<\/span>><\/span>\n          <h1<\/span>><\/span>Cropped image will apear here!<\/h1<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
After adding the styling, your application should look like the image below.<\/p>\n
\"How<\/p>\n
Cropping with React-cropper<\/h2>\n
This section will import and setup react-cropper<\/code>, the J<\/a>avaScript<\/a> image cropper<\/a> you installed earlier, into the src\/App.js<\/code> file.<\/p>\n
Import the react-cropper dependency<\/p>\n
\/\/...<\/span>\n    \nimport<\/span> Cropper from<\/span> \"react-cropper\"<\/span>;\nimport<\/span> \"cropperjs\/dist\/cropper.css\"<\/span>;\n    \nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  return<\/span> (\n    \/\/...<\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Declare state variables, image<\/code> with a default value of an image<\/code> url, cropData<\/code> with a default of an empty string, and cropper<\/code> with a default of null<\/code>, respectively.<\/p>\n
\/\/...<\/span>\n    \nconst<\/span> defaultSrc =\"https:\/\/res.cloudinary.com\/olanetsoft\/image\/upload\/v1648679302\/uploadedFiles\/family.jpg\"<\/span>;\n    \nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  const<\/span> [image, setImage] = useState(defaultSrc);\n  const<\/span> [cropData, setCropData] = useState(\"\"<\/span>);\n  const<\/span> [cropper, setCropper] = useState(null<\/span>);\n    \n  return<\/span> (\n    \/\/...<\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Render the Cropper Component<\/h2>\n
Use the react-cropper<\/code> dependency installed and set the cropper state variable when the cropper dependency is initialized using the following code snippet.<\/p>\n
\/\/...<\/span>\n    \nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  \/\/...<\/span>\n    \nreturn<\/span> (\n  <div<\/span>><\/span>\n    <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"leftdiv\"<\/span>><\/span>\n      \/\/...\n      <div<\/span> id<\/span>=\"leftdivcard\"<\/span>><\/span>\n        \/\/...    \n        <Cropper<\/span>\n          className<\/span>=\"cropper\"<\/span>\n          zoomTo<\/span>={0.5}<\/span>\n          initialAspectRatio<\/span>={1}<\/span>\n          src<\/span>={image}<\/span>\n          viewMode<\/span>={1}<\/span>\n          minCropBoxHeight<\/span>={10}<\/span>\n          minCropBoxWidth<\/span>={10}<\/span>\n          background<\/span>={false}<\/span>\n          responsive<\/span>={true}<\/span>\n          autoCropArea<\/span>={1}<\/span>\n          checkOrientation<\/span>={false}<\/span>\n          onInitialized<\/span>={(instance)<\/span> =><\/span> {\n            setCropper(instance);\n          }}\n          guides={true}\n        \/>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n       \/\/...\n  <\/div<\/span>><\/span><\/span>\n);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You should have something similar to what is shown below.<\/p>\n
\"How<\/p>\n
Next, you will implement the image crop functionality using the code snippet below.<\/p>\n
\/\/...<\/span>\n    \nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  \/\/...  <\/span>\n    \nconst<\/span> getCropData = ()<\/span> =><\/span> {\n  if<\/span> (typeof<\/span> cropper !== \"undefined\"<\/span>) {\n    setCropData(cropper.getCroppedCanvas().toDataURL());\n  }\n};\n    \nreturn<\/span> (\n  <div<\/span>><\/span>\n    <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"leftdiv\"<\/span>><\/span>\n      \/\/...\n      <div<\/span> id<\/span>=\"leftdivcard\"<\/span>><\/span>\n        \/\/...\n          <Cropper<\/span>\n            \/\/...<\/span>\n            onInitialized<\/span>={(instance)<\/span> =><\/span> {\n              setCropper(instance);\n            }}\n            guides={true}\n          \/>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"rightdiv\"<\/span>><\/span>\n      <div<\/span> id<\/span>=\"itemdivcard\"<\/span>><\/span>\n        {cropData ? (\n          <img<\/span> style<\/span>={{<\/span> height:<\/span> \"50<\/span>%\" }} src<\/span>={cropData}<\/span> alt<\/span>=\"cropped\"<\/span> \/><\/span>\n        ) : (\n          <h1<\/span>><\/span>Cropped image will apear here!<\/h1<\/span>><\/span>\n        )}\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span><\/span>\n);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code snippet above has,<\/p>\n
The current user interface doesn\u2019t look aesthetically pleasing, so you need to add some styling with CSS. You can update src\/styles.css<\/code> file with the following content in this GitHub Gist<\/a>.<\/p>\n