I create webview in code. In this webview I show pictures. Now I have two questions. How I can show image in full size, because my pictures has resolution 1381x1829 and I see only part of this picture. And second. As you can see in code I load pictures from assets, but I want to load pictures from sd card. How I can do that?
This is code:
WebView web = new WebView(getContext());
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setBuiltInZoomControls(true);
web.loadUrl("file:///android_asset/lj.png");
addView(web);
this solution works perfectly for me :
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
This method webview.getSettings().setBuiltInZoomControls(true) will let you implement build in zoom control for non-multitletouch screen
You can load image from anywhere from sdcard to webview using this code.
That is if u want to load multiple image from multiple location.
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString() + "/Your/Folder";
String imagePath = "file:/"+ base + "/test.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
mWebView.loadData(html, "text/html","utf-8");
But if u want to load images exist under the same parent folder, this will do the trick
String imagePath = "test.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
mWebView.loadDataWithBaseURL("file:///mnt/sdcard/Your/Folder/", html, "text/html","utf-8",null);
BE WARN, if u try to load hi-res image like 1600x1840 to webview, webview WILL reduced image res to maintain memory usage, which result in BAD looking image
Add this to your HTML :
<style type='text/css'>
img {max-width: 100%;height:initial;} div,p,span,a {max-width: 100%;}
</style>
This will make your images scale to fit the screen size.
For remove default padding - don't forget set style:
<html><head></head><body style="padding:0; margin:0;"><img src=""+ gifUrl + ""
width="100%"></body></html>
Related
I download the image and store in the local storage. I load this image from the html file from local storage.
<img src="file:///data/data/com.example/imagefiles/photo.jpg"/>
I load the html file from WebView.
webView.loadUrl("file:///android_asset/show_download_image.html");
But the image didn't shown. I am sure the downloading image is successful.
I want to know that is it possible to load the image from local storage into the html file or is there any way to load the image from local?
Thanks.
Why not try to load image directly like this:
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
String imagePath = "file://"+ base + "/photo.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
webView.loadDataWithBaseURL("", html, "text/html","utf-8", "");
Here the image is in sd card. You can change the code for keeping image in asset also.
check your webview javaScriptEnabled is true?
WebView.getSettings().setJavaScriptEnabled(true);
I have some html content which has to be displayed on android webview. Here is my code to display the content on webview
myBrowser.loadDataWithBaseURL("", myFormHTMLContent , "text/html", "UTF-8", null);
I have few img tags in html content. How can i specify the src for those? I tried this .. src = "/mnt/sdcard/myDir/test.gif". But its not loading that image. Please help me.
Try this.
src = Environment.getExternalStorageDirectory().getPath()+"myDir/test.gif"
I would like to set some html content in my webview with some pictures.
I've read on the internet i must use loadDataWithBaseUrl to do such a thing because i need to link the folder of images (basUrl) in order.
My html content nicely loads, i can even ran the javascripts perfectly, but for some reason my images cannot be loaded.
Somewhere i've read there are some security reasons and thats why i cant load images from sd card to webview and some says it can be easily done via loadDataWithBaseUrl, so i really dont know which one is true.
Here is my method i tried, maybe with some mistakes so dont be rude:
I got my html file here:
mnt/sdcard/com.mypackage.myproject/3/3.html
My images are here:
mnt/sdcard/com.mypackage.myproject/3/images/Cover.png
And this is my content loading:
myWebView.loadDataWithBaseURL("file:///mnt/sdcard/com.mypackage.myproject/3", myHtml, "text/html", "utf-8", "");
In my html code:
<img src="images/Cover.png" alt="Cover.png" height="820"/>
So as you see i give the baseUrl, and for some reason the webview cannot load my images.
As many said, this can be a solution:
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setBuiltInZoomControls(true);
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
String imagePath = "file:/"+ base + "/test.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
mWebView.loadData(html, "text/html","utf-8");
BUT, i have 700 different html files and there are many images in many different places... so i cannot modify the html code.
Is there a way to link the image folder to my html files to properly use them as a baseUrl?
You have a syntax error in your loading statement. You have to put : after file
myWebView.loadDataWithBaseURL("file:///mnt/sdcard/com.mypackage.myproject/3", myHtml, "text/html", "utf-8", "");
You don't need to put full path of your image into html.
img src="images/test1.jpg"
Instead
img src=\""+ imagePath + "\"
I'm using following code to display an image in a WebView:
final WebView web = (WebView) findViewById(R.id.webView);
web.getSettings().setJavaScriptCanOpenWindowsAutomatically(false);
web.getSettings().setPluginsEnabled(false);
web.getSettings().setSupportMultipleWindows(false);
web.getSettings().setSavePassword(false);
web.getSettings().setBuiltInZoomControls(true);
web.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
web.getSettings().setUseWideViewPort(true);
web.getSettings().setLoadWithOverviewMode(true);
String url = extras.getString("url");
String x = "<html><head><meta name=\"viewport\" content=\"width=device-width\"/><style type=\"text/css\">html, body {margin: 0;padding: 0;} img {border: none;}</style><head><body style=\"background: black;\"><table><tr><td align=\"center\"><img src=\"" + url + "\" /></td></tr></table></body></html>";
web.loadDataWithBaseURL(null, x, "text/html", "utf-8", null);
According to the manual, it should be started in overview mode, so it should be maximally zoomed out (and that's what I want to do). Unfortunately, the image is zoomed in. How can I fix it?
I think what is happening here is that the width=device-width says the viewport should be 480 pixels wide (or whatever the device is). So an image that's wider than that will be partly off the screen and need to be scrolled.
If you want the page to open in overview mode, I think you should set that when creating the WebView and not specify any viewport.
In my app, I display pictures thanks to a webView. So for each image I create small HTML code that I load with the webView. So my html code consist basically in a img tag (with the path to my picture).
My pictures have different sizes, that's why I'd like to set my webView zoom to fit the pictures width to the webView width. So the user don't have do zoom in or out to be able to see the entire picture.
Is there a way to achieve it ?
Thanks.
If you are creaing the HTML code (which you say that you are), you can cheat:
In the html code:
img src="xxx" width="100% >
That did the trick for me:
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
What worked for me was this: I read that in order to fit the width of the screen you should add this to your HTML or xml inside the field:
width="100%"
So what I did was, instead of scaling and zooming the images, I got the xml, put it in a StringBuilder, found the src="https://blablabla.com/image.png" that is inside the field and just before the "src" substring I inserted the "width="100%"", then y set my webView with the StringBuilder, mi code is this:
public void setWebViewWithImageFit(String content){
// content is the content of the HTML or XML.
String stringToAdd = "width=\"100%\" ";
// Create a StringBuilder to insert string in the middle of content.
StringBuilder sb = new StringBuilder(content);
int i = 0;
int cont = 0;
// Check for the "src" substring, if it exists, take the index where
// it appears and insert the stringToAdd there, then increment a counter
// because the string gets altered and you should sum the length of the inserted substring
while(i != -1){
i = content.indexOf("src", i + 1);
if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
++cont;
}
// Set the webView with the StringBuilder: sb.toString()
WebView detailWebView = (WebView) findViewById(R.id.web_view);
detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}
Hope this helps, it took me some hours to figure out how to solve this.
Is there a reason why you don't just use some javascript to pass in the images into the android application and bring up a Custom Dialog with the images in that dialog so that it scales according to the Content.
Personally, I think this solution is more elegant to your approach.
You can use a little jQuery in the web page to accomplish it as well.
Something like:
$(document).ready(function(){
var windowWidth = $(window).width()+"px";
$("#imagID").width(windowWidth);
});
I found a solution. Use this calculation:
device-width * (152 / density)
Retrieve device-width and density using displayMetrics.widthPixels and displayMetrics.densityDpi
Set calculated as width in img tag
the value 152 is originally was 160 but when 160 used, it looks like Image is bigger than screen.
The result is, image initially fit to screen and, zoom in works fine.
Is there a reason you are using a WebView to accomplish this? With an ImageView you can set the scaleType to fit the image to the size of the ImageView.