andaccc/image-viewer-react

image-viewer-react

• image zoom in/out
• analyze image's value

Hosting on aws: https://master.d2o67qcn52znqy.amplifyapp.com

pure front end app

Control:

Drop / Ctrl+V paste image to lord image

Mouse scroll image to zoom in/out

Right click image for image options

Drag image to move image

---

Original from https://github.com/andaccc/image-viewer-electron

now port as a pure web version

TODO

• value analyzer
  • simplify value

middlewheel -> resize all image

• resize all ?
• resize single image when mouse hover on image?

pan -> all image move

Development Plan

First phase

• react structure
  • image drag-drop
• Image canvas
  • z-index?
  • auto-resize?
  • auto-alignment?
• context-menu
  • value analyzer

Later Stage

• simple image edit
• UI design
• leftside file explorer
• crtl c, v paste image
• multiple image
• top menu bar
• save/load page
• tag page?

Grey Scale/ histogram logic referenced from :

https://phg1024.github.io/image/processing/2014/02/26/ImageProcJS4.html

How to port to chrome extension

https://blog.logrocket.com/creating-chrome-extension-react-typescript/

https://github.com/sblask/webextension-enhanced-image-viewer

image-viewer-react's Issues

Port to chrome extension

Communication between chrome ext <-> react app

• how to load image to image viewer?

UX issues

• how/when to trigger image viewer page?
• how to save image?

Image detail

image menu add show image details

image focus change z index

https://stackoverflow.com/questions/33963979/how-to-set-z-index-on-a-component

method:

• onclick image set z index

but what if click other image and how to reset z index?

z index counter? keep increasing when click image? so clicked image can always stay on top?

add focus image presentation

add green border?

UI/UX for mobile/ ipad

how to load image from ipad?

context menu for empty canvas space

Menu

• Setting?
• Help

histogram

in value analyzer, add histogram for image value

Revert GreyScale

apply grey scale filter

right click -> grey scale

allow copy/paste image

instead of drag drop

use reducer for image state communication

for better function structure

value simplify

value simplify filter

Restructure

Image as component

• attach menu

add reset image option

Resize image
back to color
(rerender)