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

Question

我有以下代码：

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 独特的图片。

Answer 1

正如一些评论所建议的那样，您可以使用 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 中的“此框架”/“查看框架源”）

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

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

javascript

html

web-frontend