Question

我为最终用户准备了一个应用程序，用户可以在其中上传图像。当用户上传大量图像时，我的应用程序会变慢。

我们在一个生成不同大小图像的模块中也使用了Angular JS Lazy加载图像。 https://github.com/afklm/ng-lazy-image

根据设备和图像尺寸，准备好图像。

现在我想用普通的javascript代码/进程/技术做同样的事情。

任何人都可以指导我吗？

Answer 1

我可能会有点偏离主题，但我会说服务一个调整大小的图像会更好，这对于客户端和放大器都会带来更少的带宽。服务器

有许多库可用于调整图像大小或仅使用本机php函数。

我更喜欢的程序是： - ＆GT;已上传图片 - ＆gt;保存的图像 - ＆gt;图像已调整大小＆amp;使用新尺寸名称保存 - ＆gt;然后取决于用户选择什么，你发送那些确切的图像

示例：

上传Image1.jpg（1000x1000像素）

-> gets Saved to '/images/Image1.jpg'
-> User request a (let's say) 200x200 size of that image
-> The script will resize to 200x200 and save it as Image1_200x200.jpg 
(which will have the real file size of 200x200, 
so the server will send the 200x200 image and not the 1000x1000 (original image)

通过这种方式，您可以节省很多费用并更快地提供图像，届时您可以想到延迟加载的图像，这些图像都在首屏。

我个人使用WideImage，还有Zebra_Image。

我使用的WideImage代码是（带缓存）

/* Merge, to get full path */ 
    $fullpath = $Path . $Filename;
    if (!file_exists($cache_dir)) {
        $old = umask(0);
        mkdir($cache_dir . DS, 0775);
        umask($old);
    }


    /* cache file */
    $cache = $cache_dir . DS . $Filename;
 /* Create Cache */
       if (!file_exists($cache) || $recreate === true)
        WideImage::load($fullpath)->resize($Width, $Height, 'outside')->crop(
                'center', 'center', $Width, $Height)->saveToFile($cache, $Quality);


    /* Return Cache filepath */
    return $cache;

$ cache是调整大小后保存的文件。

这在某种程度上超出了主题，但我认为这会有所帮助。

干杯！

使用Javascript

1 个答案: