Le WebView D'Android peut-il redimensionner automatiquement des images énormes?
dans certains navigateurs web, d'énormes images sont automatiquement redimensionnées pour s'adapter à l'écran.
est-il possible de faire la même chose dans un Android WebView?
la page web ne contient que l'image, peut-être que l'ajout de JavaScript pourrait faire l'affaire?
Quelqu'un a déjà fait cela?
Remarque: je ne sais pas la taille de l'image à l'avance.
7 réponses
Oui, c'est possible. Vous pouvez essayer de définir la disposition de WebView en utilisant le code ci-dessous. Il redimensionne toutes les Images (plus grand que le Device Screen Width ) à la largeur de L'écran. Cela fonctionne pour les deux Orientations (Portrait et paysage)
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
Vous pouvez ajouter des marges supplémentaires/rembourrage plus tard pour obtenir l'espacement droit.
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
fonctionne, mais est obsolète . C'est une autre solution sans LayoutAlgorithm.SINGLE_COLUMN, à l'aide de CSS:
@SuppressLint("NewApi")
private openWebView() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING);
} else {
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
}
String data = "<div> your HTML content </div>";
webView.loadDataWithBaseURL("file:///android_asset/", getHtmlData(data), "text/html", "utf-8", null);
}
private String getHtmlData(String bodyHTML) {
String head = "<head><style>img{max-width: 100%; width:auto; height: auto;}</style></head>";
return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
}
Vous pouvez avoir le navigateur redimensionner l'image pour vous pour s'adapter à la largeur maximale de l'écran:
<img src="huge-image.jpg" width="100%" />
redimensionner sa hauteur au viewport de WebView est également possible:
<img src="huge-image.jpg" height="100%" />
cependant, le fait de redimensionner à la fois la largeur et la hauteur résulterait en une image étirée. Pour soit redimensionner la largeur ou la hauteur en fonction de ce côté s'adapte le mieux, vous pouvez considérer un peu de JavaScript, comme ceci:
<img src="huge-image.jpg" onload="resize(this);" />
<script type="text/javascript">
function resize(image)
{
var differenceHeight = document.body.clientHeight - image.clientHeight;
var differenceWidth = document.body.clientWidth - image.clientWidth;
if (differenceHeight < 0) differenceHeight = differenceHeight * -1;
if (differenceWidth < 0) differenceWidth = differenceWidth * -1;
if (differenceHeight > differenceWidth)
{
image.style['height'] = document.body.clientHeight + 'px';
}
else
{
image.style['width'] = document.body.clientWidth + 'px';
}
// Optional: remove margins or compensate for offset.
image.style['margin'] = 0;
document.body.style['margin'] = 0;
}
</script>
vous pouvez utiliser ceci:
WebView webView = (WebView) findViewById(R.id.myWebView);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
a trouvé cette solution ici: comment définir le zoom/largeur initial pour un webview
si votre" largeur 151910920 " est fill_parent alors vous pouvez utiliser ce code:
Display display=getWindowManager().getDefaultDisplay();
int width=display.getWidth();
String data="<img src='http://example.com/image.jpg' style='width:"+width+"px' />";
webView.loadData(data, "text/html", "utf-8");
et zoom fonctionne toujours!
même méthode si height est fill_parent .
My favorite:
String data = "<html><body ><img id=\"resizeImage\" src=\""+PictureURL+"\" width=\"100%\" alt=\"\" align=\"middle\" /></body></html>";
webview.loadData(data, "text/html; charset=UTF-8", null);
vous pouvez envoyer la taille que vous voulez dans les paramètres de requête et laisser le serveur régler la largeur/hauteur dans l'élément img pour vous.