单击背景图像并从链接下载图像并显示进程栏javascript

<div id="background" onclick="downloadAndDisplayImage()">
  <img src="background.jpg" alt="Background Image">
</div>

 fetch('image.jpg')

   .then(response => response.blob())

   .then(blob => {

     // 下载完成后，将图像显示在进程栏中

     displayImageInTaskbar(blob);

   })

   .catch(error => {

     console.error('Error downloading image:', error);

   });

function displayImageInTaskbar(imageBlob) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const img = new Image();
  img.onload = function() {
    // 将图像绘制在canvas上
    ctx.drawImage(img, 0, 0);

    // 将canvas转换为图像URL
    const imageUrl = canvas.toDataURL();

    // 创建一个新的图像元素，并将URL设置为其源
    const taskbarImage = document.createElement('img');
    taskbarImage.src = imageUrl;

    // 将图像元素添加到进程栏中
    const taskbar = document.getElementById('taskbar');
    taskbar.appendChild(taskbarImage);
  };

  // 将Blob对象转换为图像URL
  const imageUrl = URL.createObjectURL(imageBlob);
  img.src = imageUrl;
}

<div id="taskbar"></div>