image - 如何在另一个网站上获取图像

Question

我正在尝试制作一种可以“点亮”网页的手电筒原型。我通过在背景上放置一个中间有一个透明孔的黑色图像来做到这一点。我正在努力想办法以一种有形的方式发布代码，但这里是文件（全部在 2mb 以下，在 chrome 中打开）：https ://www.dropbox.com/sh/1cyl710mmhtbo51/843TzPcuQ_

我现在正在尝试用真实网站替换网站背景，在我的示例中是图像。我已经尝试过 iframe，但发现它不成功，因为您无法嵌入 google 等。谁能想到一种方法可以让我的深色图像悬停在实时网站上？

这只需要在我自己的笔记本电脑上进行演示。

Answer 1

无论如何，我不确定这是您要寻找的东西； jsfiddle

document.body.appendChild(lightContainer);
lightContainer.appendChild(light);
lightContainer.onmousemove = function(e) {
  var posX = e.clientX;
  var posY = e.clientY;
  light.style.left = -5000 + posX +'px';
  light.style.top = -5000 + posY + 'px';
};

你看不到它下面的任何东西，因为我找不到透明图像。在内容 div 中，您可以放置​​任何您想要的东西。

Answer 2

如果它只需要在您的机器上运行，只需将页面的源代码复制到 HTML 文件中并保存即可。然后，您可以随意编辑它。您可能需要调整 URL 以使图像和 CSS 正常工作。