Android-Webview-旋转图像并缩放以适合页面宽度
[英]Android - Webview - rotate image and scale to fit page width
问题描述
To display an image I chose to use the Webview component because it allows easy interactive scaling. 
为了显示图像，我选择使用Webview组件，因为它可以轻松进行交互式缩放。
How can I first rotate the image 90 and then scale the result to fit the full width of the webview / screen? 如何首先将图像旋转90，然后缩放结果以适合Web视图/屏幕的整个宽度？
This is what I did, but only shows a small image. 这是我所做的，但只显示了一个小图像。 The full width is not used. 未使用完整宽度。
WebView infoT = (WebView)rootView.findViewById( R.id.picture_show);
infoT.getSettings().setDefaultTextEncodingName("utf-8");
infoT.getSettings().setSupportZoom(true);
infoT.getSettings().setBuiltInZoomControls( true);
infoT.loadDataWithBaseURL(null, "<html><head><style>img{ -webkit-transform: rotate(90deg); max-width: 100%; }</style></head><body><img src=\"file://" + pictureFile + "\"/></body></html>", "text/html", "utf-8", null);
The layout file of the fragment is: 该片段的布局文件为：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<WebView
android:id="@+id/picture_show"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"
android:scrollbars="vertical" />
</RelativeLayout>
I also tried options like: 我也尝试过类似的选项：
infoT.loadDataWithBaseURL(null,"<!DOCTYPE html><html><body style =\"text-align:center\"><img style=\"border-style:dotted;border-width:5px;border-color:black;width:99%;-webkit-transform: rotate(90deg);\" src=\"file://" + pictureFile + "\"/></body></html>","text/html", "UTF-8", null);
1 个解决方案
解决方案1
0 已采纳 2015-11-09 18:20:27
The solution was not easy, but finally I found it. 解决方案并不容易，但最终我找到了。 OK, this does exactly solve my question. 好的，这确实解决了我的问题。
As a BONUS there is also a Html/Javascript button to rotate the image. 作为奖励，还有一个Html / Javascript按钮可旋转图像。
It consists of (1) the loadDataWithBaseUrl statement, (2) the string parts. 它由（1）loadDataWithBaseUrl语句，（2）字符串部分组成。
The load part:
负载部分： WebView infoT = (WebView)rootView.findViewById( R.id.picture_show); infoT.getSettings().setDefaultTextEncodingName("utf-8"); infoT.getSettings().setSupportZoom(true); infoT.getSettings().setBuiltInZoomControls(true); infoT.getSettings().setJavaScriptEnabled( true); infoT.loadDataWithBaseURL( null, htmlTextPart1 + pictureFile + htmlTextPart2, "text/html", "utf-8", null);The htmlTextPart1 and htmlTextPart2 strings are given below.
htmlTextPart1和htmlTextPart2字符串如下所示。 For readability I give you only the HTML code parts. 为了便于阅读，我只给您HTML代码部分。 You can put them in strings. 您可以将它们放在字符串中。 String htmlTextPart1 =
字符串htmlTextPart1 = <html> <head> <style> #container {width:100%;overflow:hidden;} #container.rotate90,#container.rotate270 {height:100%;} #image { transform-origin: top left; -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; max-width: 100%; width:100%; height: auto; // height: 1600 ... gives a large picture } #container.rotate90 #image { transform: rotate(90deg) translateY(-100%); -webkit-transform: rotate(90deg) translateY(-100%); -moz-transform: rotate(90deg) translateY(-100%); -o-transform: rotate(90deg) translateY(-100%); -ms-transform: rotate(90deg) translateY(-100%); max-height: 100%; height:100%; width: auto; } #container.rotate180 #image { transform: rotate(180deg) translate(-100%,-100%); -webkit-transform: rotate(180deg) translate(-100%,-100%); -moz-transform: rotate(180deg) translate(-100%,-100%); -o-transform: rotate(180deg) translate(-100%,-100%); -ms-transform: rotate(180deg) translateX(-100%,-100%); max-width: 100%; width:100%; height: auto; } #container.rotate270 #image { transform: rotate(270deg) translateX(-100%); -webkit-transform: rotate(270deg) translateX(-100%); -moz-transform: rotate(270deg) translateX(-100%); -o-transform: rotate(270deg) translateX(-100%); -ms-transform: rotate(270deg) translateX(-100%); max-height: 100%; height:100%; width: auto; } </style> <script> var angle = 0; function rotateImageClockwise() { img = document.getElementById('container'); angle = (angle+90)%360; img.className = "rotate"+angle; } </script> </head> <body> <input id="clickMe" type="button" value="Rotate image" onclick="javascript:rotateImageClockwise();" /></br> <div id="container"><img src="file://"String part 2:
字符串部分2： id="image" /></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.