javascript - 如何将网页上每个图像的大小加倍？

Question

有一个网页，我想将所有图像的大小加倍。我不知道任何 JavaScript 或 CSS。有人可以给我写一些代码吗？我试过这个:

Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){
    i.width = i.width * 2;i.height = i.height * 2
});

但我不知道我在做什么，它不起作用。请帮忙。
这就是我想要加倍的元素，如果它有任何帮助的话:

Answer 1

引用: http://boards.4chan.org/g/

我发现了该网站为其用户提供的一项出色功能，包括内置自定义缩略图查看功能!

4Chan 主页设置菜单

该菜单提供了大量选项来根据您认为合适的方式配置网页。我很惊讶地看到 Custom CSS 功能显示 CSS Box 它将接受您自己的自定义标记以将站点调整到标记级别!稍后会详细介绍。

首先，我想提一下，他们确实提供了 两个 随时可用的选项，可以满足您的缩略图查看要求。

赏金编辑: 4chan-x Greasemonkey script 的用户已经在 4chan Qt ≪质量缩略图≫ 设置 菜单中拥有这两个选项。如果您使用此脚本，请跳到下面的下一个编辑。

看看这个屏幕截图，其中显示了要执行的 3 个步骤，步骤 2 是其中之一。

如果有帮助，请右键单击下面的图像并以全尺寸 查看 :

Open Image in New Tab / View Image



在上面的 Step 1 中，请注意 Settings 反射(reflect)的是 4chan Homepage 而不是脚本。

在上面的 Step 2a 中，这将近似地再现平均图像的双倍图像尺寸，但如果这些图像超大，它们将使用可用的浏览器宽度。

在上面的 Step 2b 中，如果它存在于浏览器宽度大小，则此选项将显示超大图像。

如果这两个现成的缩略图选项都不适合您的口味，请继续阅读。

由于您最初的目标是查看两倍大小或 200% 的缩略图，我分析了网页以确定以该大小显示这些缩略图所需的最低设置，但请注意，由于质量原因，许多大小会变得模糊没有增加。有关在任何尺寸下都不模糊的图像的解决方案，请参阅下面的赏金编辑。

话虽如此，您可以选择 150% 以在放大模糊的同时最小化模糊，或者如果您不想使用 Greasemonkey，则选择您可以接受的值。

赏金编辑:

当使用这些带有 4chan-x Greasemonkey Script 的 CSS 设置来获得 缩略图是 的两倍时，模糊图像不再是问题。

请注意，您需要删除 Greasemonkey 脚本中自动应用于 Disable 4chan's extension 的默认复选标记，可通过单击网页右上 Angular 的 4chan Qt ≪质量缩略图≫ 设置 链接访问。

退出该设置菜单后，进入 4chan Homepage Settings Menu 。删除 所有 复选标记， 除了自定义 CSS 的 。可以肯定的是，上图并未删除 4chan-x 推荐的所有复选标记。

警告: 使用自定义 CSS 设置选项会使设置菜单无法访问!您需要使用内置于 inspect element 的浏览器来即时进行实时更改以重新获得控制权。

下面的框不是图像。选择、复制并将此 CSS 粘贴到设置菜单 CSS 框中:

div.file, a.fileThumb img {
  width: 200% !important;
  height: 200% !important;
  float: left; 
}

.fileInfo {
  margin: 10px;
}

为了清楚起见，这是该框的屏幕截图:


将上述代码粘贴到 CSS Box 后，按 Save CSS Button 并确保您有 Checkmark 代表 Custom CSS，然后按 SAVE Button 退出。

然后页面将使用这些新设置自行刷新。享受您的 2x 缩略图。

赏金编辑: 提醒，上图显示了应删除的基本部分中的复选标记。可以肯定的是，主页右上 Angular 将有 4Chan 的原始设置菜单在中间:

[4chan Qt ≪Quality thumbnails≫ Settings] [Settings] [Home]