Javascript 如何用单幅图像代替大小图像实现图像缩放

我正在尝试使用Follopiurewqng技术angularjs和两个第三方插件，如jqZoom和elevate zoom等，为上传的图像提供缩放功能

在我的例子中，用户可以上传一些图像，然后他/其他用户可以通过缩放看到上传的图像。但是这些第三方插件要求使用小图像和大图像来提供缩放功能。但用户会上传一张图片，如何提供放大和放大大小相同的图片。我试过以下方法

<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script>

Html

---

指导我如何使用单个图像而不是大小图像来实现图像缩放。

当用户上传图像时，是否意味着图像被上传到服务器？如果上传到服务器，服务器不能提供大图缩略图的url吗？@MartinStaufcik是的，它会上传到服务器。一般来说，缩略图和大图之间会有什么比例？因为我需要生成200X200固定thumnail以显示为预览，悬停时用户可以缩放。我猜大图像和缩略图应该具有相同的x/y比率，这可能取决于js缩放框架？在这种情况下，大图像也需要裁剪成正方形。

app.directive('ngElevateZoom', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            console.log("Linking")

            //Will watch for changes on the attribute
            attrs.$observe('zoomImage', function () {
                linkElevateZoom();
            })

            function linkElevateZoom() {
                //Check if its not empty
                if (!attrs.zoomImage) return;
                element.attr('data-zoom-image', attrs.zoomImage);
                $(element).elevateZoom();
            }

            linkElevateZoom();

        }
    };
});

<img ng-elevate-zoom ng-src="{{mainImage}}" zoom-image="{{mainImage}}" />