JavaScriptning React kutubxonasi orqali Tasvirlarga ishlov berish

2.3 JavaScriptning React kutubxonasi orqali Tasvirlarga ishlov berish
JavaScript tilida React kutubxonasidan foydalanib proyekt boshlash uchun
quyidagi ketmaketlik amalga oshiriladi:
1 . Node.js o'rnatib olinadi: Node.js, JavaScriptni server tomonida
ishlatishga imkon beradigan bir platformadir. Proyektni yaratish va boshqarish
uchun Node.js o'rnatilishi kerak.
2. Yarn yoki npm-ni o'rnatib olinadi: Yarn va npm, JavaScript proyektlarini
boshqarish uchun foydalaniladigan paket boshqaruv tizimlari hisoblanadi. Node.js
o'rnatilgandan so'ng, avtomatik ravishda npm-ni olishimiz mumkin.
3. Yangi React proyekti yaratish: Terminal yoki komandalar qatori orqali
React proyektini yaratiladi. Buning uchun quyidagi komanda ishlatiladi:
npx create-react-app IMAGE-EDITOR-REACT
```
Bu komanda, "
" nomli yangi React proyektini
IMAGE-EDITOR-REACT
yaratadi.
4. Proyektda o'tiladi: Proyektni yaratgandan so'ng, terminalda proyektni
katalogiga o'tiladi:
18
cd IMAGE-EDITOR-REACT
```
5. Proyektni run qilinadi: Terminalda quyidagi komandani ishlatib
proyektni ishga tushiriladi:
npm start
```
Yoki agar Yarn o'rnatgan bo'lsa:
````bash
yarn start
```
Bu komanda, proyektni brauzerda ochadi va yangilanishlarni kuzatib
borish uchun loyihani ishga tushiradi.
Proyekt bravzerning
http://localhost:3000
portiga ochiladi.
( 2.1.1-rasm )
2.1.1- rasmda
Main ni kiritiladi.
App.jsx
da quyidagilarni inport qildim
Main.jsx
import React, { useState } from 'react'
19
import './style/main.scss'
import ReactCrop from 'react-image-crop'
import 'react-image-crop/dist/ReactCrop.css'
import { GrRotateLeft, GrRotateRight } from 'react-icons/gr'
import { CgMergeVertical, CgMergeHorizontal } from 'react-icons/cg'
import { IoMdUndo, IoMdRedo, IoIosImage } from 'react-icons/io'
import storeData from './LinkedList'
Import qilganlarimni tushuntirib o’taman :
1.
'react' kutubxonasidan import qilindi: Bu importlar
React va useState
React kutubxonasi asosiy kutubxonasiga murojaat qiladi. U Reactda funktsional
komponentlar yaratish va useState hookdan foydalanish imkonini beradi.
2.
: Bu import, React komponentlar uchun ushbu faylda
'./style/main.scss'
joylashgan o'zgartirishlar (SCSS yoki Sass formatida)ni import qilish uchun
ishlatiladi. Bu komponentlar uchun o'zgartiriladigan uslublar yaratish imkonini
beradi.
3. ReactCrop
kutubxonasidan import qilindi: Bu import
'react-image-crop'
ReactCrop komponentini
kutubxonasidan import qiladi.
'react-image-crop'
ReactCrop komponenti, React ilovalaringizda rasmni kesish imkonini beradigan
kengaytirilgan bir komponentdir.
4.
: Bu import, ReactCrop komponenti
'react-image-crop/dist/ReactCrop.css'
uchun CSS uslublarini import qilish uchun ishlatiladi. Ushbu fayl ReactCrop
komponentiga kerakli uslublarni to'g'ri renderlashni ta'minlayadi.
5. GrRotateLeft va GrRotateRight
kutubxonasidan import
'react-icons/gr'
qilindi: Bu importlar 'react-icons/gr' kutubxonasidan '
' va
GrRotateLeft
20
'
' ikonlarini import qiladi. Ular odatda elementlarni yoki rasmni
GrRotateRight
aylantirish uchun ishlatiladi.
6. CgMergeVertical va CgMergeHorizontal
kutubxonasidan
'react-icons/cg'
import qilindi: Bu importlar
kutubxonasidan '
' va
'react-icons/cg'
CgMergeVertical
'
' ikonlarini import qiladi. Ular odatda elementlarni yoki
CgMergeHorizontal
obyektlarni vertikal yoki gorizontal ravishda bir-biriga qo'shish uchun ishlatiladi.
7. IoMdUndo, IoMdRedo, va IoIosImage '
kutubxonasidan
react-icons/io'
import qilindi: Bu importlar 'react-icons/io' kutubxonasidan '
',
IoMdUndo
'
', va '
' ikonlarini import qiladi. Ular odatda bekor qilish,
IoMdRedo
IoIosImage
qayta amalga oshirish va rasmga bog'liqlik amallari uchun ishlatiladi.
8. storeData '
faylidan import qilindi: Bu import, shu
./LinkedList'
direktoriyadagi '
' nomli fayldan storeData obyektini yoki funksiyasini
LinkedList
import qiladi. U sizga storeData obyekti yoki funksiyasining funktsionalitetiga
murojaat qilish imkonini beradi.
Ushbu importlar React ilovalaringizda har xil kutubxonalarga,
komponentlarga, ikonlarga, uslublarga va o'zgartirilgan funktsionaliteta kirish
imkonini beradi.
Bu loyixani bajarish algoritmi quyidagicha :
Main.jsx
import React, { useState } from 'react'
import './style/main.scss'
import ReactCrop from 'react-image-crop'
import 'react-image-crop/dist/ReactCrop.css'
import { GrRotateLeft, GrRotateRight } from 'react-icons/gr'
import { CgMergeVertical, CgMergeHorizontal } from 'react-icons/cg'
21
import { IoMdUndo, IoMdRedo, IoIosImage } from 'react-icons/io'
import storeData from './LinkedList'
const Main = () => {
const filterElement = [
{
name: 'brightness', // Yorqinligi
maxValue: 200
},
{
name: 'grayscale', // Kulrang
maxValue: 200
},
{
name: 'sepia', // Sepia
maxValue: 200
},
{
name: 'saturate', // To'yinganligi
maxValue: 200
},
{
22
name: 'contrast', // Shadow
maxValue: 200
},
{
name: 'hueRotate'
}
]
const [property, setProperty] = useState(
{
name: 'brightness',
maxValue: 200
}
)
const [details, setDetails] = useState('')
const [crop, setCrop] = useState('')
const [state, setState] = useState({
image: '',
brightness: 100,
grayscale: 0,
sepia: 0,
saturate: 100,
23
contrast: 100,
hueRotate: 0,
rotate: 0,
vartical: 1,
horizental: 1
})
const inputHandle = (e) => {
setState({
...state,
[e.target.name]: e.target.value
})
}
const leftRotate = () => {
setState({
...state,
rotate: state.rotate - 90
})
const stateData = state
stateData.rotate = state.rotate - 90
storeData.insert(stateData)
24
}
const rightRotate = () => {
setState({
...state,
rotate: state.rotate + 90
})
const stateData = state
stateData.rotate = state.rotate + 90
storeData.insert(stateData)
}
const varticalFlip = () => {
setState({
...state,
vartical: state.vartical === 1 ? -1 : 1
})
const stateData = state
stateData.vartical = state.vartical === 1 ? -1 : 1
storeData.insert(stateData)
}
25
const horizentalFlip = () => {
setState({
...state,
horizental: state.horizental === 1 ? -1 : 1
})
const stateData = state
stateData.horizental = state.horizental === 1 ? -1 : 1
storeData.insert(stateData)
}
const redo = () => {
const data = storeData.redoEdit()
if (data) {
setState(data)
}
}
const undo = () => {
const data = storeData.undoEdit()
if (data) {
setState(data)
}
26
}
const imageHandle = (e) => {
if (e.target.files.length !== 0) {
const reader = new FileReader()
reader.onload = () => {
setState({
...state,
image: reader.result
})
const stateData = {
image: reader.result,
brightness: 100,
grayscale: 0,
sepia: 0,
saturate: 100,
contrast: 100,
hueRotate: 0,
rotate: 0,
27
vartical: 1,
horizental: 1
}
storeData.insert(stateData)
}
reader.readAsDataURL(e.target.files[0])
}
}
const imageCrop = () => {
const canvas = document.createElement('canvas')
const scaleX = details.naturalWidth / details.width
const scaleY = details.naturalHeight / details.height
canvas.width = crop.width
canvas.height = crop.height
const ctx = canvas.getContext('2d')
ctx.drawImage(
details,
crop.x * scaleX,
crop.y * scaleY,
crop.width * scaleX,
crop.height * scaleY,
28
0,
0,
crop.width,
crop.height
)
const base64Url = canvas.toDataURL('image/jpg')
setState({
...state,
image: base64Url
})
}
const saveImage = () => {
const canvas = document.createElement('canvas')
canvas.width = details.naturalHeight
canvas.height = details.naturalHeight
const ctx = canvas.getContext('2d')
ctx.filter = brightness(${state.brightness}%) brightness(${state.brightness}%)
sepia(${state.sepia}%) saturate(${state.saturate}%) contrast(${state.contrast}%)
grayscale(${state.grayscale}%) hue-rotate(${state.hueRotate}deg)
29
ctx.translate(canvas.width / 2, canvas.height / 2)
ctx.rotate(state.rotate * Math.PI / 180)
ctx.scale(state.vartical, state.horizental)
ctx.drawImage(
details,
-canvas.width / 2,
-canvas.height / 2,
canvas.width,
canvas.height
)
const link = document.createElement('a')
link.download = 'image_edit.jpg'
link.href = canvas.toDataURL()
link.click()
}
return (
|