Question

我在这里看了很多不同的帖子，似乎无法找到一个明确解决这个问题的帖子。我正在使用JQM和Phonegap构建，需要一种方法来捏缩放图像。我在一个页面上单击图像的缩略图，图像在单独的页面中打开。

如何在这一页上轻松缩放图像？

我发现了一些锤子的帖子，但从来没有完整的解决方案。任何帮助将不胜感激。

这是我的图片页面的样子。

<div data-role="page" id="imagePage">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
        <a href="#home" class="ui-btn ui-btn-icon-left ui-icon-carat-l ui-btn-corner-all" data-rel="back" data-direction="reverse">Back</a>
    <h1>Image</h1>
</div>
    <div data-role="content">
        <div  id="imageContainer">
          <img src="myimage.jpg" width="100%">
        </div>
    </div>
</div>

更新代码：

<div data-role="page" id="imagePage" data-theme="d">
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
        <a href="#home" class="ui-btn ui-btn-icon-left ui-icon-carat-l ui-btn-corner-all ui-shadow ui-nodisc-icon" data-rel="back" data-direction="reverse">Back</a>
    <h1>Image</h1>
</div>
    <div data-role="content" id="imageContent" style="padding:0px;width:100%; height:100%;"> 
        <iframe id="myframe" src="ImageViewer.html" style="width:100%; height:100%;"></iframe>
</div><!-- /Content -->
</div>

iframe页面ImageViewer

<html>
<head>
<meta charset="utf-8">
<title>ImageViewer</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.panzoom.min.js"></script>
</head>
<body>
<img src="" style="width:100%;"/>
<script>
    $(document).ready(function() {
      $("img").panzoom();
    });
</script>
</body>
</html>

的JavaScript

function openImage(imageURL) {
var frame = document.getElementById("myframe");
var frameDoc = frame.contentDocument;
frameDoc.querySelector("img").src = imageURL;   
}

更新了12/2/14以上的代码。捏缩放正在处理图像。

由于

RGecy

Answer 1

您可以在iframe中加载内容，并使用手势检测和css转换来缩放内容。

您必须将<img>标记的来源设置为DOM，因此您的设置将如下所示

<iframe id="myframe" src="imageViewer.html"></iframe>

<script>
var frame = document.getElementById("myframe");
var frameDoc = frame.contentDocument;
frameDoc.querySelector("img").src = "myimage.jpg"
</script>

和imageViewer.html您可以使用jquery插件jquery.panzoom进行缩放。

<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.panzoom.js"></script>
</head><body><img />
<script>
$(document).ready(function() {
  $("img").panzoom();
});
</script>

应该这样做。另一个选项是在不同的html页面上启用视口缩放，如果该导航不会中断您的应用程序的状态，因为返回时将重新加载页面。允许缩放的元标记设置是

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">

和cordova在config.xml中有首选项

 <preference name="EnableViewportScale" value="true" />

它在其他一些answers on SO中建议，但我没有尝试过。遗憾的是，您can't load the other page in an iframe，因为您的页面视口设置会阻止缩放。

在JQM / Phonegap应用程序中捏缩放图像

1 个答案: