1

我在使用 Web 应用程序时遇到了一些严重的问题。

我在 Web 表单上有一个提交图像（输入类型 = 图像）。我特意选择了这个，因为它一直存在并且所有浏览器都理解它

当然我们最喜欢的浏览器没有！如果您缩放桌面，请说明您是否有视力问题。IE 无法正确缩放点击次数

所以我们有一张图片，当用户点击图片时，表单被提交，点击的x和y坐标也被提交。在 IE 中，这些坐标没有正确缩放。IE 提交错误的坐标。Firefox（我没有测试过其他人）提交正确的比例坐标。

例如，如果图像大小为 100*100 像素，并且当有人单击图像的右下角时桌面缩放 150%，Firefox 返回 [100,100] 但 IE 返回 [150,150]，这与图像无关！

这对我来说有点碍事，我需要一种解决方法。如果有人有任何想法，将不胜感激。也许可以以某种方式返回比例因子，我可以自己计算比例并在应用程序中进行调整？

直流

4

1 回答 1

1

我已经解决了这个问题

正如在放大输入图像时所解释的那样，Internet Exploder 无法发送正确的点击坐标。相反，它以像素为单位发送实际的点击坐标，这通常在真实的未缩放图像区域之外。

您不能（据我所知）从 javascript 访问点击坐标，它是在提交过程中自动分配和发送的。

解决方案是等到最后一刻并计算“缩放因子”将其发送到服务器，然后调整服务器上的坐标。

在表单中添加以下 javascript（假设为 jquery）

注意：deviceXDPI 从 ie 6 开始就已经存在

<script>
// return the screens scale factor used for IE
function getScaleFactorX(elem_id) {
    var nscalefactor = 1;
    try {
        if (screen.deviceXDPI){
            nscalefactor = screen.deviceXDPI / screen.logicalXDPI;
            $("#" + elem_id).val( nscalefactor );
        } else {
            $("#" + elem_id).val( 1 );
        }
    } catch (e) {
     // fail silently
    }
    return nscalefactor;
}
</script>

添加合适的隐藏字段，将缩容带回服务器

<input type="hidden" id="scalefactor" name="scalefactor" value="1">

添加一个操作，以便在单击图像时计算比例因子

<input name="img"  type="image" src="image.png" width="400" height="200" alt="Please click" onclick="getScaleFactorX('scalefactor'); return true;" />

在图像 onclick 处理程序上执行此操作允许用户在加载表单之后和提交之前缩放屏幕。如果您过早填充此字段，用户可能会稍后缩放图像，并且比例因子将是错误的。

在服务器上

// scale the click points
                if ($scalefactor) {
                    $x = (int)($x / $scalefactor);
                    $y = (int)($y / $scalefactor);
                }

这假设缩放在 x 和 y 方向上是相同的，这对于缩放的网页来说是一个好的假设。也会有舍入误差，所以如果你需要完美像素，你需要考虑到这一点

直流

于 2013-03-05T01:01:56.343 回答