How to show only some part of this website?

Hi, I want to show this website in the web viewer.
http://hornil.com/apps/photocrop/
I am trying to implement a image cropping utility in my app. The problem is, I want the ratios to be fixed and not changeable by the user. If I show the website as it is, the user can change the aspect ratio. Is there any way to set the ratio automatically and then hide that element from the webpage so that the user can’t change it? It would be preferable if the result preview can also be hidden.

If this is not possible, does anyone know an online/ offline html/js image editor (with custom ratios) which I can load on my app using the web viewer?

1 Like

Suppose you want to crop the image but don’t want to change the ratio so do it in the background
1.Checkout What is an Image CDN - The Complete Guide if you upload your cropped pics here and call them using url you can control their dimensions https://ik.imagekit.io/jointest/default-image.jpg?tr=h-300,w-300
2. Using js:
Insert this JS on page load > document.getElementById('editPanel').hidden=true
3.Links
App Inventor Extensions: Image | Pura Vida Apps
[PAID] Image Cropping extension - ClassicExtensions - Community
[Free] Image interceptor viewer - ClassicExtensions - Community
[FREE] CropView Extension : Crop Image View With Customizations

2 Likes

This works, but there is a slight problem. After cropping, the result can only be saved after right clicking and clicking ‘save as’. I cannot do that on the webviewer. This is the simplest website that I could find.

I tried using these solutions, but I need 4 by 6 and 6 by 4 ratios… which the user can select the area to crop.

Are there any offline html/css/js files that I could modify the ratio (github?), which I could then load in the webviewer?

My goal is: the user selects an image from gallery, crops it , but with a custom ratio that I set, and then saves he image. Any way to do thi?

1 Like

https://fengyuanchen.github.io/cropperjs/
You would need to create your own page i think use this library :crossed_fingers:

1 Like

I don’t think it has 4 by 6 or 6 by 4 ratios…

1 Like

See to create 4 by 6 or 6 by 4 ratios change the pixels to 1200 x 1800 or 1800 x 1200.
Get current width and height whichever is greater divide by 4 and multiply by 6 this will create landscape image.
And if you do divide by 6 multiply by 4 you will get a potrait mode image.

2 Likes

The result image appears with the code
img id=“resultImage” src=“data:image/png;base64, url…”
This is the format with which the cropped image appears. Any way to use this to download the result image?

1 Like

I don’t really know how to use this library, can you guide me how?

1 Like

Where are you saving images?

1 Like

On the device itself…

1 Like

I think I can do something about right click to save… with the Custom Web Viewer extension (Long clicked)… let me see

1 Like

then either use taifun image extension or use customwebview or you could upload to cloudinary data storage get the link and download the image

1 Like