【问题标题】:image zoom in meteor android cordova图像放大流星android科尔多瓦
【发布时间】:2017-10-06 07:47:55
【问题描述】:

我正在使用 Meteor for Android 构建一个聊天应用程序。我已经使用科尔多瓦相机插件包含了“添加图像”选项。现在,在图像上传并被用户看到后,我想点击它并放大它。如何进行?

这是我的图像渲染代码:

<div class="message">
     <img src="{{t.img}}" 
         data-action="zoom" 
         class="showImage" 
     >
</div>

我尝试过使用inno:zoom 包,但没有成功。有什么见解吗?

在 html 头中,我有以下代码:

 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

【问题讨论】:

    标签: image cordova meteor zooming


    【解决方案1】:

    我建议使用诸如 Hammerjs 之类的触控库:http://hammerjs.github.io/

    在 JavaScript 中有很多使用触控的方法,但如果您没有使用它们的经验,它们可能会很困难。

    您可能必须将上传的图片放在自己的模板中,并使用反应变量重新初始化图片元素,以启用缩放功能。您已经尝试过的软件包可能也是如此。

    如果您可以分享更多代码示例,我(或其他人)也许可以给出更具体的答案。

    【讨论】:

    • 感谢您的回复。我现在将尝试在其自己的模板中上传图像。更新问题并显示更多代码
    • 好的,我现在使用新模板来显示图像。也应用了 inno 包,但它仍然不可缩放
    • 这可能是一个狂野的头发,但是如果你将&lt;img&gt; 元素的宽度从 100% 减少到 50% 会怎样?查看 inno:zoom 的源代码,如果元素宽度大于 (100vw-80px*2),则看起来zoom 函数正在返回。 github.com/spinningarrow/zoom-vanilla.js/blob/gh-pages/js/…
    • 好吧,该死。也许您应该为您的问题添加更多信息。例如,哪些助手为模板提供数据?涉及哪些事件?你目前使用的是什么 CSS?尝试缩放时是否有任何控制台/javascript 错误?您必须使用 inno:zoom 还是对另一个库开放?人们真的只能根据您提供的内容进行猜测。
    • 已解决,使用hammer.js
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-08-21
    • 1970-01-01
    • 2016-04-22
    • 1970-01-01
    • 2017-06-08
    • 2022-11-10
    • 2016-04-06
    相关资源
    最近更新 更多