| Image scaling with max-height and max-width CSS properties on the client side [message #1698862] |
Thu, 18 June 2015 13:00  |
 Antoni Mylka
Messages: 14
Registered: January 2015 |
Junior Member |
|
|
I want to show an image in my app. That image may be large, but I don't want to it exceed certain dimensions. If it's larger, I want it to be scaled down, with the aspect ratio preserved. What is the best way to achieve this in Eclipse RAP?
The solution I have right now has been inspired by this FAQ entry:
https://wiki.eclipse.org/RAP/FAQ#How_to_display_dynamically_created_images.3F
I set the image that I want to show as a UISession attribute, as a byte array. I register a service handler that gets the image from the UISession. Then I create a Browser widget with the following HTML code:
<img
src="http://127.0.0.1:8080/ui;jsessionid=$sessionId?servicehandler=$handlerId&imageId=$imageId"
style="position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); max-height: 100%; max-width: 100%; "/>
When the browser height and width is set - the image adapts itself if necessary. This works in Chrome and Firefox, but not in IE. In IE the picture is scaled down correctly, but the iframe scrollbars that encompass the full picture size aren't removed, which is ugly.
Is there a better, simpler way, or do I have to use graphics operations and scale down the image on the server side?
|
|
|
| Re: Image scaling with max-height and max-width CSS properties on the client side [message #1698873 is a reply to message #1698862] |
Thu, 18 June 2015 13:25  |
Aleksander 
Messages: 44
Registered: May 2014
Location: France |
Member |
|
|
Hi, you could simply set a new height and width of your browser HTML page on each resize.
Like this:
browser.addControlListener(new ControlAdapter() {
@Override
public void controlResized(ControlEvent e) {
String html = "<img src=\"" +RWT.getRequest().getContextPath() + "/image.png"+ "\" width=WIDTHpx height=HEIGHTpx/>";
html = html.replace("WIDTH", String.valueOf(browser.getClientArea().width));
html = html.replace("HEIGHT", String.valueOf(browser.getClientArea().height ));
browser.setText(html);
}
});
Of course this is not on client side.
[Updated on: Thu, 18 June 2015 14:25] Report message to a moderator |
|
|
Powered by
FUDForum. Page generated in 0.04097 seconds
] 
Search
Help
Register
Login
Home
