GRUGRU Image Fullscreen Version

About

This full-screen viewer allows you to rotate, scale, and adjust the position of images.  
Images on a website can be manipulated and displayed in full screen within the same tab.  
It can also load local files.

==============================================================
🚀 How to use
Right-click on an image on a website → "GRUGRU Image View".
to open the image viewer.  

The viewer will be superimposed on the currently viewed page.  

Click the icon on the browser to open and close the viewer,
You can view the last viewed image again.  

Pages other than websites
(such as the browser options page or a new tab)
icon on a page other than a website (such as a browser options page or a new tab), 
the viewer will open in a new tab.

==============================================================
🚀 Viewer Screen Descriptions

⭐️Canvas
The image is displayed.  
The canvas initially shows the full screen size.  
Scroll to zoom in/out and drag to move the image.

⭐️"Full-screen" button
Displays the canvas in full screen.  
Press ESC to exit.

⭐️"Auto Fit" button
Rotate, scale, and manipulate the image so that it fills the full screen to its full size.
Rotate and scale the image so that it fills the full screen.  
Example: An image is portrait and the monitor is landscape:
        The image is rotated 90 degrees and scaled.  
Press twice to reverse the rotation direction.

⭐️"↔ Fit" and "↕ Fit" buttons
"↔ Fit" and "↕ Fit" buttons fit the image width and height to the full screen size.  
The aspect ratio remains the same.

⭐️ "◀Rotate" and "Rotate ▶" buttons
"◀Rotate" and "Rotate ▶" buttons Rotate the image 90 degrees counterclockwise or clockwise.

⭐️"↔ Flip" and "↕ Flip" buttons
Flip the image left/right or up/down.

⭐️"Display Margin ON/OFF" button
For easier image manipulation, the canvas size can be set to
The canvas size will be expanded to the full screen size plus the margins for easy image manipulation.  
Margins are fixed at 300px.

⭐️"Reset" button
Resets the image display.

⭐️"Close Viewer" button
Closes the viewer and returns to the currently viewed page.

⭐️"Select File" button
Clicking this button starts the file explorer,
Select the image you wish to view.  
You can also load images by dragging and dropping files.

⭐️"Delete Data" button
When an image is displayed, the image data or URL is stored in the local storage of the browser.
The image data or URL will be saved to the browser's local storage,
When you reopen the browser, the image data or URL will be stored in the browser's local storage and the previous image will be displayed,
You can delete both by clicking the "Clear Data" button.

⭐️Message display section (below the canvas)
The URL or file name of the currently displayed image is displayed.