Forum | Appery.io

Hi there,

I tried to check different topics but didn't find any answer to solve my issue unfortunately.

I hv the following JS code within a HTML component :

Crop

but when opening the page, it doesn't open. it keeps loading the page without opening.

any idea how to solve ?

thk you for your time,
Best
Eric

Hi Eric.

Please specify where you have put this code. And give us all your code.

Also, is there any errors in the browser console?

Regards.

Hi There,

Thks for your prompt reply.

A little bit of background to bring you up to speed ...

1/ I made the Appery tutorial of the Camera App devcenter.appery.io/tutorials/using-the-camera-component/

2/ perfect for my app, just that I need in addition to that devcenter's app an image cropper before saving to the DB.

3/ a colleague of yours was kind enough in advising me to use the codecanyon.net/item/image-crop/full_screen_preview/5348464. From now on, I'll call it “CCIC” standing for “CodeCanyonImgCrop” .

4/ that was a good advice. CCIC was more than what I needed for my app.
I even downgraded that CCIC as follows :
. scale change: no need the slider which changes the image scale,
. upload files: no need that feature since the image data to be cropped
comes from the local_storage,

5/ how I made use of the CCIC's code in my app:
1/ I opened a HTML component to keep as much as possible of the CCIC's
structure,
2/ inserted the CCIC's code:
. HTML part in the Appery HTML component, the only change I made :
. removed header's parts,
. added in HTML instead of having it in the JS,
. trigger the JS function() with a button instead of having it firing
itself after loading, (if firing itself upon loading, the image from
local-storage doesn't appear properly within the cropper
container),
. crop.css and example.css in the Appery CSS,
. crop.js in the Appery JS (but remove the slider's parts' code as well
as the input file's)

6/ I could make work the following:
. call function showImage() { ... }
. get the image data from the local-storage ,
. upload this data into the cropper container,
. move the image.

7/ what doesn't work is nxt step : crop the image:
. the Crop button when coded as per CCIC's code
= $('body').on('click... f()...);
. if that button is placed within the HTML and call a function separated from
the ShowImage function, then it breaks the “inheritance” from
the “var one = new CROP(); 's function”.
. Consequently, I cannot retrieve the “coordinates” ' values which will make
my image cropped (JS code at very bottom part of the JS sheet). I tried
to add within the “2nd” function Crop the “var one = new CROP();” again.
. The inheritance seems work for the “one” variable but not for the
“coordinates”.
. The only way to have the “coordinates” variable retrieved is by merging
all JS code into a single function (I found out by removing
the $('body').on('click'...);).

8/ knowing the above;
my app's code, it is already shared with your support team.
Its name is o2o4PW. Could you use it too ?

9/ Could you give me the code for a button that would work within the Appery HTML component ?

10/ knowing that next 2 streps are retrieving the coordinates and updating the local storage data, if you see something else I shld look into, feel free to advise me accordingly. It would be very kind of you

Thk you very much for your time,
Eric

xxxxxxxxxxxxxxxx I M P O R T A N T xxxxxxxxxxxxxxxxxx

Hi there, forget about my previous post ... I found out my problem and fixed it.

sorry for making use of your time.

best,
Eric

Wonderful, thank you for update.