Question

我在html页面中有一个图像，其大小调整为400px宽度，带有css

.cropbox {
width: 400px;
height : auto;
}

此外，我在该图像上有一个js，让用户选择图像的一个点。当然，坐标在调整大小的图像上是相对的。如何在原始图像上获得相对坐标？

类似于newx = originalwidth/400 * x，但如何获取原始宽度？

Answer 1

AFAIK您将无法仅使用javascript获取图像的物理尺寸。你必须在服务器端计算它。

Answer 2

如何获得原始宽度？

对页内图像进行操作的方法并不简单。您必须为未显示的图片版本创建img，将其添加到页面并测量其offsetWidth。也许你可以通过在标记的页面上保留图像来开始，然后在body onload（此时所有图像都已加载）测量图像的自然大小然后应用脚本调整大小

Answer 3

正如某人已经建议的那样，你应该让你的图像无任何宽度加载并记录下来。但是，您不需要任何服务器端脚本来执行此操作，您可以：

隐藏原始图片，以便在调整大小之前不会“闪烁”或对页面布局做任何有趣的事情（这可能是可选的）
让它加载，并记录其尺寸onload
当负载准备好后，调整大小
最后，您可以获得两个维度

我在jQuery中的代码将为您完成：

<img id="myImage" style="display:none;" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google!" />
<div id="status"></div>
<script type="text/javascript">
    var ImageModifier = {
        WIDTH: 400,
        Original: null,
        Init: function() {
            $(function(){
                $('#myImage').load(function(){
                    //remember original size
                    ImageModifier.Original = { width: $(this).width(), height: $(this).height()}

                    //Resize the image
                    $(this).css("width", ImageModifier.WIDTH);

                    //print info after resize
                    ImageModifier.Info(this);

                    //show the image
                    $(this).css("display", "block");
                });
            });
        },

        Info: function(obj){
            $('#status').append("Original Size: [" + ImageModifier.Original.width + "x" + ImageModifier.Original.height +"]" + 
                  "<br />Current size: [" + $(obj).width() + "x" + $(obj).height() +"]<br />");
        }
    }
    ImageModifier.Init();
</script>

调整html中的图像坐标

3 个答案: