измененные координаты изображения в html

Question

У меня есть изображение на html-странице, уменьшенное до 400px ширины css

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

Также у меня есть изображение js, которое позволяет пользователю выбрать одну точку изображения. Конечно, координаты являются относительными на измененном изображении. Как я могу получить координаты относительно исходного изображения?

Что-то вроде newx = originalwidth/400 * x, но как получить оригинальную ширину?

Answer 1

как получить оригинальную ширину?

Нет простого способа работы с изображением на странице. Вам нужно будет создать img для неизмененной версии изображения, добавить его на страницу и измерить offsetWidth. Может быть, вы могли бы сделать это, не увеличив размер изображения на странице в разметке для начала, а затем на body onload (после чего все изображения были загружены) измерьте естественный размер изображения, затем примените изменение размера из сценария.

Answer 2

Как кто-то уже предлагал, вы должны позволить вашему изображению загружаться без примененной к нему ширины и записывать его. однако для этого вам не нужны серверные сценарии, вы можете:

1. Скрыть оригинальное изображение, чтобы оно не «моргало» и не делало ничего смешного с макетом страницы перед изменением размера (возможно, это необязательно)
2. Дайте ему загрузиться и запишите его размеры при нагрузке
3. Когда загрузка будет готова, измените ее размер
4. Наконец, вы можете получить оба размера

Мой код в 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>

Answer 3

AFAIK, вы не сможете получить физическое измерение изображения, используя только javascript. Вы должны рассчитать это на стороне сервера.