This content originally appeared on DEV Community 👩💻👨💻 and was authored by Bogdan Sikora
Image service
Simple tool to upload and edit pictures. The front-end is using in NextJs and Backend NodeJs.
NodeJs is used to be able to easily test and iterate on localhost. Production level solution will be released fully on NextJs with S3 as storage, later on*.*
https://github.com/4rokis/image-service-example
Upload new Image
Client
Once a user selects an image, he can modify the image(crop, zoom, rotate) via react-easy-crop library.
Once finished the original file and transformations data are passed to the ImageService.
Backend
Image service accepts an image and saves it to storage (Local files, S3, Firebase, …) and takes the image, and applies used modifications (crop, zoom, rotate). The modified image is then saved in multiple sizes/scales (160, 320, 640, 750, 828, …) for a user to fetch the desired size based on their screen size.
Fetch uploaded Image
ImageService returns the image path on success. Client then can use NextImage with a custom loader
import NextImage from 'next/image'
const parseFileName = (path) => {
const pathParts = path.split('/')
const filename = pathParts[pathParts.length - 1]
return filename.split('.')
}
const myLoader = ({ src, width }) => {
if (!src) {
return ''
}
const [path, params, name, end] = parseFileName(src)
return `${IMAGE_BASE_URL}/${name}-${width}.${end}`
}
export const Image = ({
className,
src,
sizes,
}) => {
return (
<NextImage
{...rest}
loader={myLoader}
src={src}
sizes={sizes}
/>
)
}
or native image with srcSet
import React, { HTMLAttributes } from 'react'
import { getSrcSet } from './utils'
export const Image = ({
src,
sizes,
}) => {
return (
<img
src={src}
sizes={sizes}
srcSet={getSrcSet(src)}
/>
)
}
Image.displayName = 'Image'
to fetch the image.
The page then can use sizes prop to define what is the actual image size.
<Image src={image} sizes={`600px`} />
<Image src={image} sizes={`50vw`} />
<Image src={image} sizes={`12rem`} />
In the network tab you can see that the correct image sizes were fetched (Github example)
Edit Uploaded Image
Editing an already uploaded image works similarly, but the image is not sent from the client as it is already in storage. The Image Crop component fetches the original image and based on file query parameters shows the correct state. The ImageService then based on the image name and new transformations updates images.
Kudos
Architecture, Code, and Configs come from Style Space
Connect with expert stylists, over 1-on-1 video styling sessions for clothing, hair, and makeup/skincare styling. Elevate your style, simplify getting ready and save time and money.
Links
- https://www.npmjs.com/package/react-easy-crop
- https://github.com/4rokis/image-service-example
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
- https://nextjs.org/docs/api-reference/next/image
- https://sharp.pixelplumbing.com
- https://arokis.me/articles/crop-and-upload-image-service
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Bogdan Sikora
Bogdan Sikora | Sciencx (2023-01-17T14:51:12+00:00) Crop and Upload Image Service. Retrieved from https://www.scien.cx/2023/01/17/crop-and-upload-image-service/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.