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

Question

是否可以下载不同尺寸的图像？

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

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

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

Answer 1

研究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 主题中了解有关这些内容的更多信息，但现在我们只说媒体条件描述了屏幕可能处于的可能状态。在这种情况下，我们说的是“当视口(viewport)宽度为 480 像素或更小时”。 空间。 当媒体条件为真时图像将填充的槽的宽度(440px。)