如何使用原生JavaScript在HTML页面动态添加图片下载按钮

前置修正 #

先修正你现有代码里的3处问题，否则逻辑跑不通：

• 你定义的图片DOM变量是img_code，后续赋值src时写的是image_code，变量名不统一
• 你获取的生成按钮变量是gen_button_img，后续绑定事件用的是gen_button_qr，变量名不统一
• 你定义的接口地址var url='www.example.com'缺少协议头，实际使用请补全为https://www.example.com，否则会被识别为当前站点下的相对路径，导致图片加载失败

核心实现逻辑 #

你不需要提前在页面写死下载按钮，直接在图片生成成功的逻辑分支（就是你代码里打/**/注释的位置）动态插入按钮即可，下载功能直接利用原生<a>标签的download属性实现，会自动调用浏览器自带下载器，不需要额外依赖。

注意：download属性仅在资源与页面同源、或者资源配置了跨域允许的头信息时生效，跨域场景请用下文的Blob兼容方案

步骤1：在HTML中预留按钮容器 #

在图片标签下方加一个空容器，专门用来放动态生成的下载按钮：

<img id="img_code" alt="生成的图片">
<!-- 下载按钮挂载点 -->
<div id="download_container"></div>

步骤2：在生成成功的逻辑里插入按钮 #

把以下代码放到你alert("Image Generated successfully");后面的注释位置即可：

// 先清空容器，避免多次点击生成重复按钮
const downloadWrap = document.getElementById('download_container');
downloadWrap.innerHTML = '';

// 创建下载按钮
const downloadBtn = document.createElement('a');
// 按钮显示文字
downloadBtn.textContent = '下载图片';
// 按钮样式，可自行修改为需要的效果
downloadBtn.style.cssText = 'display:inline-block;padding:8px 16px;background:#2563eb;color:#fff;border-radius:4px;cursor:pointer;text-decoration:none;margin-top:12px;';
// 传入图片地址
downloadBtn.href = img_code.src;
// 设置下载的默认文件名，可自行修改
downloadBtn.download = `生成图片_${Date.now()}.png`;

// 把按钮插入页面
downloadWrap.appendChild(downloadBtn);

跨域场景兼容方案 #

如果你的图片资源和网页不同源，download属性可能失效（点击会直接打开图片而不是触发下载），这种情况可以把图片转成Blob二进制流再触发下载，给按钮加如下点击逻辑即可：

downloadBtn.addEventListener('click', async (e) => {
  e.preventDefault();
  try {
    // 请求图片资源转blob
    const res = await fetch(img_code.src);
    const blob = await res.blob();
    // 生成临时本地地址
    const blobUrl = URL.createObjectURL(blob);
    // 触发下载
    const tempLink = document.createElement('a');
    tempLink.href = blobUrl;
    tempLink.download = `生成图片_${Date.now()}.png`;
    tempLink.click();
    // 释放临时地址避免内存占用
    URL.revokeObjectURL(blobUrl);
  } catch (err) {
    // 跨域不允许请求时回退逻辑，提示用户右键保存
    window.open(img_code.src, '_blank');
    alert('当前图片跨域无法直接触发下载，请在新打开的图片页右键选择"图片另存为"');
  }
})

可选简化方案 #

如果你不想动态创建DOM，也可以提前把下载按钮写在HTML里，默认加style="display: none;"隐藏，等图片生成成功后再把display改成block显示即可，下载逻辑和上面完全一致。

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