技术问题：生成的GIF无法在Blob链接显示，仅加载于主页面

问题原因 #

原代码中手动创建了<img>元素并添加到主页面body内，这是GIF出现在主页面的直接原因；同时直接打开Blob URL在部分浏览器中存在解析限制，导致新窗口无法正常显示GIF。

修复方案 #

1. 移除将GIF添加到主页面的代码段
2. 优化新窗口打开逻辑，通过在新窗口中嵌入图片标签的方式确保GIF正常加载

修改后的完整代码 #

HTML #

<button id="button_fg">Forecast Gif</button>
<div id="box_fg">
  <label>Starting Hour:</label>
  <select id="dropdown_fg">
    <option id="dropdown_fg" value="">Select Hour</option>
    <option value="0">0</option>
    <option value="6">6</option>
    <option value="12">12</option>
    <option value="18">18</option>
    <option value="24">24</option>
    <option value="30">30</option>
    <option value="36">36</option>
    <option value="42">42</option>
  </select>
  <div>
    <label>Ending Hour:</label>
    <select id="dropdown_fg2">
      <option id="dropdown_fg2" value="">Select Hour</option>
      <option value="6">6</option>
      <option value="12">12</option>
      <option value="18">18</option>
      <option value="24">24</option>
      <option value="30">30</option>
      <option value="36">36</option>
      <option value="42">42</option>
      <option value="48">48</option>
    </select>
  </div>
  <div>
    <button id="download-button2">Download GIF</button>
  </div>
</div>

CSS #

#box_fg {
  position: absolute;
  display: none;
  background-color: #f1f1f1;
  padding: 20px;
  max-width: 15%;
  overflow: hidden;
  border: 1px solid black;
  left: 55.3%;
  top: 70.5%;
}

#button_fg {
  position: absolute;
  background-color: #333;
  color: white;
  text-decoration: none;
  width: 10%;
  text-align: center;
  transition: background-color 0.2s;
  display: inline-block;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 10px;
  left: 55.3%;
  top: 84.8%;
}

#button_fg:hover {
  cursor: pointer;
  background-color: #525252;
  transition: background-color 0.2s;
}

#download-button2:hover {
  cursor: pointer;
}

@media only screen and (max-width: 600px) {
  #button_fg {
    position: absolute;
    width: 23%;
    left: 26vw;
    top: 105vw;
    font-size: 12px;
    height: 7vw;
  }
  #box_fg {
    position: absolute;
    left: 26vw;
    top: 78vw;
    z-index: 999;
    max-width: 50%;
  }
}

@media (min-width: 800px) {
  #button_fg {
    top: 39vw;
    font-size: 14px;
  }
  #box_fg {
    top: 32vw;
    font-size: 14px;
  }
}

@media (min-width: 1050px) {
  #box_fg {
    font-size: 16px;
  }
  #button_fg {
    font-size: 16px;
  }
}

@media (min-width: 1500px) {
  #button_fg {
    font-size: 18px;
  }
  #box_fg {
    font-size: 18px;
  }
}

@media (min-width: 2000px) {
  #button_fg {
    font-size: 24px;
  }
  #box_fg {
    font-size: 24px;
  }
}

JavaScript #

document.getElementById('button_fg').addEventListener('click', function() {
  document.getElementById('box_fg').style.display =
    document.getElementById('box_fg').style.display === 'none' ? 'block' : 'none';
});

document.addEventListener('click', function(event) {
  var isButton = event.target.closest('#button_fg') !== null;
  var isInsideBox = event.target.closest('#box_fg') !== null;

  if (!isButton && !isInsideBox) {
    document.getElementById('box_fg').style.display = 'none';
  }
});

var selectedValue1;
var dropdown_fg = document.getElementById('dropdown_fg');
dropdown_fg.addEventListener('change', function() {
  var selectedOption1 = this.options[this.selectedIndex].value;
  selectedValue1 = parseInt(selectedOption1);
});

var selectedValue2;
var dropdown_fg2 = document.getElementById('dropdown_fg2');
dropdown_fg2.addEventListener('change', function() {
  var selectedOption2 = this.options[this.selectedIndex].value;
  selectedValue2 = parseInt(selectedOption2);
});

var directory = '#';
dropdown_fg2.addEventListener('change', function() {
  if (!isNaN(selectedValue1) && !isNaN(selectedValue2)) {
    var images = [];
    var startImage = selectedValue1;
    var endImage = selectedValue2;
    var step = 6;

    for (var i = startImage; i <= endImage; i += step) {
      var filePath = directory + "gfs_6hr_2m_temp_hour_" + i + '.png';
      images.push(filePath);
    }

    const downloadButton = document.getElementById('download-button2');
    downloadButton.addEventListener('click', function() {
      gifshot.createGIF({
        'images': images,
        'gifWidth': 1144,
        'gifHeight': 894,
        'interval': 0.33
      }, function(obj) {
        if (!obj.error) {
          var image = obj.image;
          var gifDataString = image.split(',')[1];
          var gifData = new Uint8Array(atob(gifDataString));
          var gifBlob = new Blob([gifData], { type: 'image/gif' });
          var gifUrl = URL.createObjectURL(gifBlob);

          // 打开新窗口并嵌入GIF
          const newWindow = window.open('', '_blank');
          newWindow.document.write(`<img src="${gifUrl}" style="max-width:100%;"/>`);
          newWindow.document.close();
          
          // 可选：页面关闭后释放Blob资源
          newWindow.addEventListener('unload', () => {
            URL.revokeObjectURL(gifUrl);
          });
        }
      });
    });
  }
})

额外说明 #

• 彻底移除了原代码中document.body.appendChild(animatedImage)行，避免GIF在主页面加载
• 通过在新窗口中写入包含GIF的HTML内容，解决了直接打开Blob URL的浏览器兼容问题
• 添加了可选的Blob资源释放逻辑，优化内存占用

内容的提问来源于stack exchange，提问作者Wx_Trader