如何将图像保存到 JS 变量并将其应用于 bg?

How can I save an image to a JS variable and apply it to bg?

我有以下代码:

let v = new Vibrant("https://source.unsplash.com/random/");

var bodyS = document.getElementsByTagName('body')[0].style;
bodyS.background = 'url('+v._src+') no-repeat center center fixed';

有没有办法将 unsplash 发送的图像保存到一个变量中,这样我就可以将它设置为 bg 并将其用于以下脚本,而不是再次使用此 url,因为 unsplash 发送了一个每次都通过 url 独特的图片。

正如一些评论所建议的那样,您可以使用 fetch+createObjectURL 来重复使用单个图像。这个片段在开始时显示了 4 个随机图像(尽管链接必须是唯一的,否则它们最终会因为缓存而变得相同)。但是,当您单击该按钮时,它会获取一个新图像并将其明确应用于所有四个 <img> 元素。评论部分也会替换按钮并在第二次点击时实际下载图像,只是 Whosebug 上的沙箱根本不允许下载。

async function doThing(){
  let image=await fetch("https://source.unsplash.com/random/").then(res=>res.blob());
  let url=URL.createObjectURL(image);
  for(let img of document.getElementsByTagName("img"))
    img.src=url;
//  let a=document.createElement("a");
//  a.href=url;
//  a.download="test.jpg";
//  let button=document.getElementsByTagName("button")[0];
//  button.innerText="Download";
//  button.onclick=()=>a.click();
}
img{
  width:20%;
}
<img src="https://source.unsplash.com/random/?1">
<img src="https://source.unsplash.com/random/?2">
<img src="https://source.unsplash.com/random/?3">
<img src="https://source.unsplash.com/random/?4">
<br>
<button onclick="doThing()">Clicky</button>

(如果你想在其他地方测试它,获取代码的一个简单方法是 运行 代码片段,然后右键单击框架内的一些空白点,然后使用“查看框架源”在 Chrome 或 Firefox 中的“此框架”/“查看框架源”)