在 JQM/Phonegap 应用中捏合以缩放图像答案

【问题标题】：Pinch to Zoom Image in JQM/Phonegap app在 JQM/Phonegap 应用中捏合以缩放图像
【发布时间】：2014-12-02 23:22:58
【问题描述】：

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

如何通过捏合来放大这一页上的图像？

我找到了一些关于hammerjs 的帖子，但从来没有一个完整的解决方案。任何帮助将不胜感激。

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

<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;   
}

更新了 2014 年 12 月 2 日以上的代码。捏缩放正在处理图像。

谢谢

RGecy

【问题讨论】：

标签： javascript html jquery-mobile cordova

【解决方案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 因为您的页面视口设置阻止了缩放。

【讨论】：

我更新了上面的代码。我无法在 iframe 中显示图像。似乎 javascript 在 x.contentDocument 行发生了故障。
改用 frame.contentDocument...我更新了代码 sn-p
一旦我更改为 frame.contentDocument，图像就可以在 iframe 中打开，但捏合缩放不起作用。有什么想法吗？
抱歉，我不得不将元标记移动到 html 文档的 head 部分。内容属性 user-scalable=1 是启用 iframe 放大的原因。可能存在父视口覆盖子视口的问题。
您将不得不使用 css 转换，因为 iframe 的元标记 wont be applied。我让它与 jquery 插件 panzoom 一起工作，并更新了我的答案