Javascript 如何在js中的html文件中的每个图像的顶部和底部（例如：40px）放置白色图像？

我试图在html页面的每个图像的顶部和底部添加一个图像/空白矩形。我计划通过一个用户脚本来实现这一点，但是我找不到任何关于如何在另一个指定的PX x上附加图像的信息。我对js有点熟悉。我做了两个小的爱好项目，一个是图像分析器，另一个是扑克游戏。这是第三个，我假设我必须实现以下目标：

创建空白图像以覆盖图像的顶部和底部

这可以通过创建一个简单的矩形来实现。我可以使用大小的参数使其适合

获取站点上的所有图像

我可能可以通过解析DOM来做到这一点。如果我使用用户脚本并执行forEachimg，我不确定是否需要这样做。在forEachimg=>中，我可以将矩形添加到顶部和底部，从而将其添加到页面上的每个图像中

不知何故，从上面的每个图像的顶部和底部追加空白图像。

这就是我迷路的地方。我以前在DOM中附加过图像，但我不知道如何通过用户脚本来实现，也不知道必须在另一个图像上附加图像。我曾想过做以下工作，但我不确定如何继续：

我还链接了一个使用此用户脚本的示例。我试图做的是删除水印。我只是在本地计算机上这样做，以免窃取翻译人员的工作，这就是我使用JavaScript的原因。因此，为了重述一下，我正在寻找如何解决第3个问题，如果可能的话，还需要解释如何在“油脂猴”或任何其他用户脚本管理器中解决这个问题。如果有任何不清楚的地方，请告诉我，并感谢任何评论/回答此问题的人。编辑：清晰

---

如果您只需要在页面上的每个img上使用这两个balnk空间，只需使用以下css：

img{ height: 945px; object-fit:cover; } 或js：

var x = document.querySelectorAll("img");
  var i;
  for (i = 0; i < x.length; i++) {
     x[i].style.height = "954px";
     x[i].style.objectFit = "cover";
  }

---

我不完全确定，仅仅使用JavaScript就可以实现您想要的目标。嗯，这不是100%正确的，你可能能够在画布上实现一些东西。您可能需要一些后端进程，将映像传递给服务器，让它在其上运行imagemagik或类似的库。除非你说的是在图像上分层，而不是对图像进行物理修改。@chris是的，我说的只是分层图像。我想对它重新编码，但我不知道如何通过修改水印来窃取作品，我只是不想在阅读时看到水印。可能吗？谢谢你的快速回复。我在用户脚本管理器中尝试了js答案，但它似乎不起作用。。我遗漏了什么？很抱歉，我只是编辑了我的脚本。请用那个！更新后的js现在确实做了一些事情，但它似乎将图像彼此移开，而不是裁剪它们。这是错误的吗？请我需要你确认你想要什么：你想在你的页面上的每个img的顶部和底部添加40px的空间，对吗？或者你需要裁剪它们？我的意思是我想用白色图像替换底部和顶部，或者裁剪它们。所以在最后部分的原始图像不应该被看到。对不起，我原来的帖子不清楚。