react-images-editor

IrregularImageCrop

We're using canvas, a HTMLCanvasElement, to set the dimensions, based on the image uploaded (width and height)

If a user is drawing or the points are still equal to zero, then the image stays the same(with original canvas)

If a user is not drawing, which means they're currently done drawing, and the points are greater than 0, then the image is now cropped to match the points drawn.

DrawShape

We're using Stage, a KonvaNodeComponent as a canvas

Line to sketch out the points drawn on the image

stage.on to handle different events, specifically mousemove/touchmove to set lines as a user is drawing

Types

interface PointsProps {
  x: number
  y: number
}

interface IDimensions {
  width: number
  height: number
}

How to use

React

import { DrawShape, IrregularImageCrop } from 'react-images-editor'
import { useState } from 'react'

import { PointsProps } from '@/types'

import styles from './styles.module.css'

interface IDimensions {
  width: number
  height: number
}

export default function Home() {
    const [lines, setLines] = useState<PointsProps[]>([])
    const [isDrawing, setIsDrawing] = useState<boolean>(false)
    const [dimensions, setDimensions] = useState<IDimensions | null>(null)

    return (
    <main className={styles.main}>
        <div className={styles.drawCanvasWrapper}>
            <IrregularImageCrop
                imageURL='/static/steak.jpg'
                points={lines}
                isDrawing={isDrawing}
                setDimensions={setDimensions}
            />
            <div className={styles.irregularCropWrapper}>
                <DrawShape
                lines={lines}
                setLines={setLines}
                isDrawing={isDrawing}
                setIsDrawing={setIsDrawing}
                dimensions={dimensions}
                />
            </div>
        </div>
    </main>
    )
}

Next.js
Note: This package uses react-konva which is designed to work in the client-side. On the server side, it will render just empty div. So it doesn't make much sense to use react-konva for server-side rendering.

In Next.js you may have issue like Module not found: Can't resolve 'canvas'

Why do we see this error? canvas module is used for canvas rendering in Node.JS environment. konva library will use it there, but it doesn't have this dependency explicitly.

There's have two ways to resolve the issue:

1. Use dynamic loading dynamic loading

Canvas will be loaded on the client-side only.

The canvas shouldn't be inside pages or app folder (because they are used for server rendering), add it to the components folder.

The components/canvas.js/ts file may look like this:

'use client'
import { DrawShape, IrregularImageCrop } from 'react-images-editor'
import { useState } from 'react'

import { PointsProps } from '@/types'

import styles from './styles.module.css'

interface IDimensions {
  width: number
  height: number
}

export default function Canvas() {
  const [lines, setLines] = useState<PointsProps[]>([])
  const [isDrawing, setIsDrawing] = useState<boolean>(false)
  const [dimensions, setDimensions] = useState<IDimensions | null>(null)

  return (
    <>
      <IrregularImageCrop
        imageURL='/static/steak.jpg'
        points={lines}
        isDrawing={isDrawing}
        setDimensions={setDimensions}
      />
      <div className={styles.irregularCropWrapper}>
        <DrawShape
          lines={lines}
          setLines={setLines}
          isDrawing={isDrawing}
          setIsDrawing={setIsDrawing}
          dimensions={dimensions}
        />
      </div>
    </>
  )
}

The page.js/ts file may look like this:

import dynamic from 'next/dynamic'

const Canvas = dynamic(() => import('@/components/canvas/canvas'), {
  ssr: false
})

import styles from '../page.module.css'

export default function page() {
  return (
    <main className={styles.main}>
      <div className={styles.drawCanvasWrapper}>
        <Canvas />
      </div>
    </main>
  )
}

2. Use dynamic loading To just ignore the error from Next.JS you can install canvas module manually using npm install canvas Next.js will still try to load full canvas module on the server-side, but it will not fail.