Javascript 在JQM/Phonegap应用程序中捏缩以缩放图像_Javascript_Html_Jquery Mobile_Cordova

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

javascript html jquery-mobile cordova

Javascript 在JQM/Phonegap应用程序中捏缩以缩放图像,javascript,html,jquery-mobile,cordova,Javascript,Html,Jquery Mobile,Cordova,我在这里浏览了很多不同的帖子，但似乎找不到一篇能够彻底解决这个问题的帖子。我正在使用JQM和Phonegap构建，需要一种方法来收缩以缩放图像。我在一个页面上点击一个图像的缩略图，图像将在一个单独的页面中打开我如何在这一页上缩放图像我在hammerjs上找到了一些帖子，但从来没有找到一个完整的解决方案。任何帮助都将不胜感激下面是我的图像页面的外观 <div data-role="page" id="imagePage"> <div data-role="header" d

我在这里浏览了很多不同的帖子，但似乎找不到一篇能够彻底解决这个问题的帖子。我正在使用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>

更新了2014年12月2日以上的代码。“收缩缩放”正在对图像进行处理

谢谢

RGecy

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

您必须将

标记的源设置为DOM，因此您的设置如下所示

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

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

cordova在config.xml中有一个首选项

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

它建议在其他一些，但我还没有尝试过。遗憾的是，您的页面视口设置阻止了缩放。

我更新了上面的代码。我无法在iframe中显示图像。javascript似乎在x.contentDocument行出现故障。请改用frame.contentDocument…我更新了代码段，在我更改为frame.contentDocument后，在iframe中打开了图像，但“收缩到缩放”不起作用。有什么想法吗？对不起，我不得不把meta标签移到html文档的head部分。内容属性

user scalable=1

支持在iframe中进行缩放。父视口覆盖子视口时可能会出现问题。由于iframe的meta标记，您必须使用css转换。我使用jquery插件

panzoom

获得了它，并更新了我的答案

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

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

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

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

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

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