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

Question

I have looked through a number of different post here and cant seem to find a post that definitively solves this. 我在这里浏览了许多不同的帖子，似乎找不到绝对可以解决此问题的帖子。 I am using JQM and Phonegap build and need a way to pinch to zoom an image. 我正在使用JQM和Phonegap构建，并且需要一种方法来缩小图像。 I am clicking on the thumbnail of an image on one page and the image opens in a separate page. 我在一页上单击图像的缩略图，图像在单独的页面中打开。

How do I get pinch to zoom on the image on just this one page? 如何仅在一页上放大图像？

I found some post to hammerjs but never a complete solution. 我在Hammerjs上找到了一些帖子，但从未找到完整的解决方案。 Any help would be greatly appreciated. 任何帮助将不胜感激。

Here is what my image page looks like. 这是我的图像页面的样子。

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

UPDATED CODE: 更新的代码：

<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 page ImageViewer 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 JavaScript的

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

Updated the code above 12/2/14. 更新了14/12/2以上的代码。 Pinch zoom is working on the image. 捏变焦正在处理图像。

Thanks 谢谢

RGecy RGecy

Answer 1

You can load the content in an iframe, and use gesture detection and css transforms to scale the content. 您可以将内容加载到iframe中，并使用手势检测和CSS转换来缩放内容。

You will have to set the source of an <img> tag to the DOM, so your setup would look like this 您必须将<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>

and imageViewer.html you can use the jquery plugin jquery.panzoom to do the scaling. 和jquery.panzoom ，您可以使用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>

That should do it. 那应该做。 Another option is to enable viewport scaling on a different html page, if that navigation doesn't disrupt the state of your your application since the page will be reloaded when you return. 另一个选择是在不同的html页面上启用视口缩放，如果该导航不会中断应用程序的状态，因为返回时将重新加载该页面。 The meta tag setting that allows for scaling is this 允许缩放的元标记设置是这样的

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

and cordova has a preference in your config.xml 并且cordova在您的config.xml中具有首选项

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

Its suggested in some other answers on SO , but I haven't tried it. 它在SO的其他一些答案中提出了建议，但是我还没有尝试过。 Sadly, you can't load the other page in an iframe since your page viewport settings prevent scaling. 遗憾的是，由于页面视口设置无法缩放，因此无法在iframe中加载其他页面。

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-11-21 23:11:34

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-11-21 23:11:34

解决方案1
4 已采纳 2014-11-21 23:11:34