如何触发下载Canvas本地生成的图片？

直接通过几个简单步骤就能实现，核心是利用Canvas的toDataURL方法生成图片数据，再通过创建临时链接触发下载：

• 第一步：获取目标Canvas元素
  用DOM选择器拿到你要导出的Canvas，比如：

  const canvas = document.getElementById('your-canvas-id');
  

• 第二步：将Canvas转为图片数据URL
  调用toDataURL方法生成对应格式的图片数据，支持PNG、JPEG等格式：

  // 生成PNG格式（默认格式）
  const dataURL = canvas.toDataURL('image/png');
  // 如果要生成JPEG，可指定格式和质量（0-1之间）
  // const dataURL = canvas.toDataURL('image/jpeg', 0.9);
  

• 第三步：创建临时链接触发下载
  动态创建一个隐藏的<a>标签，设置好下载参数后触发点击，完成后移除标签：

  const link = document.createElement('a');
  link.href = dataURL;
  // 设置下载后的文件名
  link.download = 'my-canvas-image.png';
  // 把链接加入DOM才能触发点击
  document.body.appendChild(link);
  link.click();
  // 下载完成后移除临时链接
  document.body.removeChild(link);
  

注意事项 #

• 如果Canvas绘制了跨域来源的图片，需要给图片元素设置crossOrigin="anonymous"，否则会因安全限制无法生成数据URL。
• 大尺寸Canvas生成数据URL时可能会占用较多内存，注意性能问题。

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