Question

我以前有这个.net MVC网站，它使用服务器端逻辑根据浏览器宽度调整图像大小。它并不只是加载大图像并将其缩小，它实际上拍摄了图像并创建了一个新图像，并将其提供给客户端。它很小，对移动浏览器的影响很小。

现在我刚刚使用AngularJs构建了一个大型应用程序。在这个应用程序中，我决定创建自己的图像并使用ImageService服务它们，看起来有点像这样：

.service('ImageService', ['$window', '$q', 'PreloaderService', function ($window, $q, preloader) {

    // Create our variables
    this.loading = true;
    this.successful = false;
    this.percentLoaded = 0;

    // Function to search for images using the current window width
    this.search = function (fileNames) {

        // Create an array
        var array = [];

        // Get our directory 
        var directory = this.getBackgroundImageDirectory();

        // Loop through our images
        for (var i = 0; i < fileNames.length; i++) {

            // Get our current file
            var fileName = fileNames[i];

            // Get our image
            var image = directory + '/' + fileName;

            // push to our array
            array.push(image);
        }

        // Return our array
        return array;
    };

    // Function used to preload a set of images
    this.preload = function (fileNames) {

        // images
        var images = this.search(fileNames);

        // Create our promise
        var deferred = $q.defer();

        // Preload the images
        preloader.preloadImages(images).then(

            // Function to handle the changing of the flags when all images have loaded
            function handleResolve(imageLocations) {
                this.loading = false;
                this.successful = true;

                deferred.resolve(images);
            },

            // Function to handle any errors
            function handleReject(imageLocation) {
                this.loading = false;
                this.successful = false;

                deferred.reject();
            },

            // Function that notifies our percentage loaded flag
            function handleNotify(event) {
                this.percentLoaded = event.percent;
            }
        );

        // Return our promise
        return deferred.promise;
    };

    this.getBackgroundImageDirectory = function () {

        // Get the window width
        var width = $window.innerWidth;

        // Get the base directory
        var baseDir = '/assets/images';

        // If the width is greater than 1920px
        if (width > 1920) {

            // Select the retina directory
            return baseDir + '/retina';

            // Else, if our width is greater than 1200px
        } else if (width > 1200) {

            // Select the large directory
            return baseDir + '/lg';

            // Else, if our width is greater than 992px
        } else if (width > 992) {

            // Select the medium directory
            return baseDir + '/md';

            // Else, if our width is greater than 768px
        } else if (width > 768) {

            // Select the small directory
            return baseDir + '/sm';

            // Else, if our width is greater than 480px
        } else if (width > 480) {

            // Select the extra small directory
            return baseDir + '/xs';
        }

        // Catch all
        return baseDir + '/mobile';
    };
}])

这里的主要方法是预加载功能。调用时，它会获取一个文件名列表并调用搜索方法，该方法依次循环遍历文件名，并根据浏览器宽度预先设置正确的目录。这实际上是有效的，尽管有很多图像。现在它已经到了这一点，在那里创建同一图像的8个不同版本是麻烦且耗时的。所以我想知道是否有办法结合angularJS和一些服务器端逻辑来创建和提供基础图像中的图像，类似于我上面给出的例子。

我可以写一个指令来获取源图像，然后使用$ http，调用我的服务器端函数并返回一个最适合浏览器的新图像。

在开始开发之前，我有几个问题：

之前有没有这样做过？若然，有没有人有任何例子
这实际上是处理图像的好方法吗？

Answer 1

你的方法有问题，因为你发现，你需要一堆相同的图像和另外一堆逻辑，指示要查看图像的文件夹。当另一台设备出现时，你将不得不复制一大堆东西。

我个人要求我的服务器向我提供我需要的网站的图像。因此，如果我在手机上提供图像，我会调用一种方法来返回一个渲染到我想要的尺寸的图像。

逻辑少得多。

你已经习惯了ASP.Net MVC，所以我想你的API是你用于API的API吗？

某事，伪装，像这样做（我实际上使用这种方法sig）

[HttpGet]
public HttpResponseMessage ShowResizedImage([FromUri] string imagePath,     
        [FromUri] int longestSideSize, 
        [FromUri] bool longestIsWidth) {

        // Call your own services to perform your image manipulation

         // Then return your image stream    
         HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
         response.Content = new StreamContent(myImageMemoryStream);
         response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png"); // or whatever...    
}

然后，您可以在img中使用此功能：

<img src="/api/imaging/showresizedimage?imagePath=yourimagepath&longestsidesize=120&longestIsWidth=true" />

如果您不使用Web API，也可以轻松使用*.ashx处理程序来提供图像。

AngularJS和图像大小调整

1 个答案: