如何使用单个图像而不是大图像和小图像来实现图像缩放

Question

我正在尝试使用follopoiurewqng技术angularjs和几个第三方插件（如jqZoom和提升缩放等）为上传的图像提供缩放功能。

在我的情况下，用户可以上传一些图像，然后他/其他用户可以通过缩放查看上传图像。但是这些第三方插件要求小图像和大图像来提供缩放设施。但是用户会上传单张图片，如何提供与大小相同的图像缩放。我试过以下方式，

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

指令

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();

        }
    };
});

HTML

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

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