JavaScriptning React kutubxonasi orqali Tasvirlarga ishlov berish

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 ( 
 
 

30