AEM 6.4 Connect java file with HTML File

I've been reading quiet a few but still am not able to get it done.

Current Java code:

html code

Folder Structure:

I'm trying to read metadata (specifically) size of image in java and load it back to html.

     - I get my image via ${properties.fileReference}

     - I prefer Local, but By bundle is alright as long as explained.

------------------------------ WORKFLOW: ---------------------------------

     - Add image via

     - get file via ${properties.fileReference}

     - process in Java (local) (both sounds good too)

     - return width and height to .html. (ex. <div> ${javaClass.width} - ${javaClass.height} </div>