时间戳

首页 > 解决方案 > 下载大图像的小版本 - 客户端 - 没有后端功能 - javascript

javascript - 下载大图像的小版本 - 客户端 - 没有后端功能 - javascript

问题描述

是否可以下载不同大小的图像？

例如我有 3000*3000 像素的图片： https ://via.placeholder.com/3000x3000

所以当我的 javascript 代码在 Android 中运行时，我们只需要一个 1000*1000 的图像。我知道下载后可以调整此图像的大小（例如使用画布）。

但是是否可以在不运行后端代码的情况下下载此图像的小版本？只是客户端。

标签： javascriptangular

解决方案

研究srcset属性——它用于提供不同的图像来源。srcset 属性指定要在不同情况下使用的图像的 URL。

So, with these attributes in place, the browser will:

Look at its device width.
Work out which media condition in the sizes list is the first one to be true.
Look at the slot size given to that media query.
Load the image referenced in the srcset list that most closely matches the slot size.

以下来自https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

...

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

...

然而，我们可以使用两个新属性——srcset 和sizes——来提供几个额外的源图像以及帮助浏览器选择正确图像的提示。您可以在 Github 上的 responsive.html 示例中看到一个示例（另请参见源代码）：

srcset 和 sizes 属性看起来很复杂，但是如果您按照上面所示的方式对它们进行格式化，并且每行具有不同的属性值部分，那么理解它们并没有那么糟糕。每个值都包含一个逗号分隔的列表，列表的每个部分由三个子部分组成。现在让我们来看看每个的内容：

srcset 定义了我们将允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：

图像文件名 (elva-fairy-480w.jpg.) 一个空格。图像的固有宽度（480w）——请注意，这使用 w 单位，而不是您可能期望的 px。这是图像的实际大小，可以通过检查计算机上的图像文件找到（例如，在 Mac 上，您可以在 Finder 中选择图像，然后按 Cmd + I 调出信息屏幕。）大小定义了一组媒体条件（例如屏幕宽度），并指示在某些媒体条件为真时最好选择哪种图像尺寸——这些是我们之前讨论过的提示。在这种情况下，在每个逗号之前我们写

媒体条件 ((max-width:480px)) — 您将在 CSS 主题中了解有关这些的更多信息，但现在我们只说媒体条件描述了屏幕可能处于的状态。在这种情况下，我们说的是“当视口宽度为 480 像素或更少时”。空间。当媒体条件为真时图像将填充的槽的宽度（440px。）

推荐阅读