I'd like to use a WebView for displaying images potentially big (in order to seize it memory management).
For the test i'm loading this code in the WebView
<head></head>
<body>
<img alt="test" src="file:///android_asset/cute-cat-sleeping.jpg">
</body>
The problem is that if I load it in a web "as is". The WebView only allow to zoom out until the first dimension of the image is fit in screen. In this example the image height is totally shown into the WebView and then no more zoom allowed:
As you can see this mode doesn't allow a correct display of the global image despite that when the image is zoomed the behaviour in the right and bottom corners are correct as you can see here
So I tried the (WebView).getSettings().setUseWideViewPort(true) and the result is that I can zoom out more than the image's width
and the zoomed behaviour is not correct in the bottom-right borders:
Summarizing: I'd like the max zoom out possible to be imageWidth=webview width and zoom behaviour like in the second image:
Complete and/or usefull answers will be bountied
EDIT: Bounty opened for Vinayak.B
Using Viewport Metadata may help you to do this
The viewport is the area in which your web page is drawn. Although the viewport's visible area matches the size of the screen, the viewport has its own dimensions that determine the number of pixels available to a web page
Also try below
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
Load Html file in Webview and put your image in asset folder and read that image file using Html.
<htm>
<table>
<tr>
<td>
<img src="cat.gif" width="100%" alt="Hello">
</td>
</tr>
</table>
</html>
Now Load that Html file in Webview
webview.loadUrl("file:///android_asset/abc.html");
Or another way
if you use LinearLayout, can take a background parameter that can be a colour or a resource.
So in main.xml file contains webview. you simply added a
android:background="#+drawable/backgroundmain"
and use
web.setBackgroundColor(0);
To make the webview transparent to see the background image behind.
here is the solution set the img tag width to 100% in HTML code and then load it in your webview using loadDataWithBaseURL(null, htnlString, "text/html", "UTF-8", null); method
try this code
String htnlString = "<!DOCTYPE html><html><body style = \"text-align:center\"><img src=\"http://shiaislamicbooks.com/books_snaps/UR335/1.jpg\" alt=\"pageNo\" width=\"100%\"></body></html>";
yourWebView.loadDataWithBaseURL(null, htnlString, "text/html", "UTF-8", null);
Edit your Webview:
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
Related
I want to display an image in a label. But using image icon property I cannot set the size of the image. So I am using HTML coding in the text property of JLabel to display image.
The image is not displaying so there must be some error. The alt text is being displayed. I tried the same coding in notepad and it worked. Please mention if there is any other way to display an image of a fixed size in label.
<html>
<body>
<img src="file://C:/Users/Lenovo/Desktop/Wallpapers/New folder/1mb.jpg" alt="Smiley face" height="142" width="142">
</body>
</html>
Is there a simple way to resize the image icon then please answer that also. I am making a project for my school so the codings should not be oh high level.
Thank you.
I am uploading Image size is 1160 * 250, once the image is uploaded I will use many places but different ratio sizes, like Thumbnails and Full Images.
I am Using CSS Properties
object-fit: Cover
I was tried using CSS Properties like object-fit: Cover
<img _ngcontent-c3="" alt="Image" class="img-fluid ng-star-inserted" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD">
.class{
width : 100%;
height:350px;
object-fit :cover
}
Images are not getting Properly as expected, need a Complete image. but cropping
Option 1: use
object-fit: contain
Option 2:
Also try using max-width, min-width and max-height min-height to set the image for aspect ratio as these properties work when you try to get image form 3rd party like Insta...
I have embed some video to my website using following code.
<div id="container">
<video loop autoplay="autoplay" />
<source id="mp4" src="/s/test.mp4" type="video/mp4" />
</video>
</div>
When entering into my site the video taking few seconds to load. And the background is black, its not looking fair. No problem if internet speed is good, otherwise its display black background for few seconds.
So how to add thumbnail while loading video or adding text called"video loading".
Use the tag id poster
<video controls="controls" poster="/IMG_LOCATION/IMAGENAME">
More info can be found http://www.w3schools.com/html5/att_video_poster.asp
I found this here: How to make a loading image when loading HTML5 video?
If that doesn't work see the first answer on that page - where you could show the loading image using some javascript but this solution worked for me.
This question already has answers here:
Android - local image in webview
(11 answers)
Closed 6 years ago.
I found out that in earlier APIs of android (KitKat and abover), local images (for example pictures in assest folder) can't be load in WebView! I have a html file that contains tag to show images.
<img src="blacksmoke1.jpg">
And I put blacksmoke1.jpg in assest folder. but nothing shown in WebView.
This is the problem: https://code.google.com/p/android/issues/detail?id=63033
How can I fix it? Is there an alternative way to show pictures in webview? Or Is there a custom WebView that i can implement in my app?
Edit:
This my assest folder:
Try creating a web pages in your assets directory and creating HTML pages that display the images. Then call a web page using this:
webview.loadUrl("file:///android_asset/blacksmoke.html");
Or, according to one of the posts in your link, move the html file to a server and use this code:
loadDataWithBaseUrl("content://<your contentProvider>/blacksmoke.html", ...);
Code in blacksmoke.html could be:
<!DOCTYPE html>
<!-- Perhaps some JQuery mobile for more functionality and control over which images get displayed and why etc -->
<body>
<div><img src="image/blacksmoke1.jpg"></div>
</body>
</html>
Here is a good explanation for creating native pages or displaying native images.
This is what I do to load local resources in webview from assets folder:
StringBuilder sb = new StringBuilder();
if (notification.get_id().equals("53be76c3d6eac5f54a546176")){
sb.append("<html xmlns=\"http://www.w3.org/1999/xhtml\"> <head> <title>For.... <img src=\"data1/images/forum1.jpg\" alt=\"\" title=\"\" id=\"wows1_0\"/> </body> </html>");
That is the html i want to load, if you notice there is an img tag, loading an image from data1 folder which is placed in assets folder. In order to be able to load resources from there I do the following:
WebView webView = (WebView) findViewById(R.id.webview);
webView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);
Hope it helps
I created a buttton in html and linked it to another html file, when i open the file with the button in a browser (tried IE and FFox) the button shows and works properly, however when i JEditorPane.setPage(the html file with the button) the only thing that shows is the name of the button with no actual clickable area or anything! Any ideas on how i can get the button to appear inside the pane?
Here's a pic of the button in the java frame(button is circled in red)
http://tinypic.com/r/fopswo/6
Here's a pic of the button in a browser(it's a button)
http://tinypic.com/r/2zjj71z/6
The code for the button
<font size = 12 face = "verdana" ><u> Creating An Account </u></font>
<span style="padding-left:360px"> </span>
<button onclick="window.location.href ='file:///F:/java 12/Isp/help file try/doc 2/test.html'">Back</button>
Thanks in Advance
Swing's HTML support is patchy - I think you have fallen in one of its holes. More info here:
Which HTML tags are supported in Swing components?