Question

我在EPiServer 9设置中使用ImageResizer，我在其中使用了以下插件：https://nuget.episerver.com/en/OtherPages/Package/?packageId=ImageResizer.Plugins.EPiServerBlobReader以及ImageResizer.NET 4.0.5。我正在实现一个AngularJS指令，它会更新图像大小的大小。这是实现

app.directive('responsiveImage', function ($window, $timeout) {
    //From http://stackoverflow.com/a/6021027 with small modifications
    var setWidth = function (uri, value) {
        var parameterName = 'width';
        //REGEX for locating current parameter
        var re = new RegExp('([?&])' + parameterName + '=.*?(&|$)', 'i');
        if (uri.match(re)) {
            //Replaces the current w parameter with the new value
            return uri.replace(re, '$1' + parameterName + '=' + value + '$2');
        } else {
            //Identify which seperator to use
            var separator = uri.indexOf('?') !== -1 ? '&' : '?';
            //Sets the w parameter
            return uri + separator + parameterName + '=' + value;
        }
    };

    return {
        restrict: 'A',
        scope: {
            imageUrl: '@responsiveImage'
        },
        link: function(scope, element) {
            var maxWidth = 0;
            var promise;

            var resizeImage = function (initialCall) {
                $timeout.cancel(promise);

                promise = $timeout(function () {
                    var widthOfElement = element.width();

                    //Only fetch new image if the size is bigger, no need to downscale
                    if (widthOfElement > maxWidth) {
                        maxWidth = widthOfElement;

                        if (element.is('img')) {
                            element.attr('src', setWidth(scope.imageUrl, widthOfElement));
                            element.css('width', '');
                        } else { //Assume it is background image
                            element.css('background-image', "url('" + setWidth(scope.imageUrl, widthOfElement) + "')");
                        }
                    }
                    //If the first call, do it instantly but otherwise wait to see if the user is done resizing the window
                }, initialCall ? 0 : 50);
            };

            //Initial call
            resizeImage(true);

            angular.element($window).on('resize', resizeImage);
        }
    }
});

然而，当我从一个小窗口开始并向上调整大小时，它会停止提供正确的图像并提供其中一个低分辨率图像。

在我所做的测试中，它被困在例如宽度1204像素。在它本身被卡住之后，即使我通过在地址栏中输入并更改宽度参数来浏览图像，它也会提供比询问的图像分辨率低的图像。原始图像宽2880像素。我已经在Firefox和Chrome中进行了测试。

这是ImageResizer.NET中的一个已知问题，它经常请求它返回一个早期的图像，或者我的方法有什么问题吗？

Image Resizer提供缩小图像

0 个答案: