如何不使用Canvas保存通过Vanilla JS+CSS实现的文字叠加图片？

浏览器本身没有直接把DOM元素导出为图片的原生API，目前主流方案都是靠Canvas渲染DOM内容再导出，但你不用自己手写Canvas相关代码，用现成的库就能搞定。

具体操作步骤（以html2canvas为例） #

• 先引入html2canvas库（直接用CDN即可，无需自行下载部署）

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  

• 编写导出逻辑：

  // 获取你要导出的目标div
  const targetDiv = document.getElementById('你的divID');
  // 调用html2canvas渲染该div内容
  html2canvas(targetDiv).then(canvas => {
    // 将Canvas转换为可下载的图片链接
    const imgUrl = canvas.toDataURL('image/png');
    // 创建用于下载的a标签
    const downloadLink = document.createElement('a');
    downloadLink.href = imgUrl;
    downloadLink.download = '带文字叠加的图片.png';
    // 触发下载操作
    downloadLink.click();
  });
  

注意事项 #

• 若使用的是跨域图片，需要图片所在服务器配置CORS允许跨域访问，否则html2canvas无法正常渲染该图片。
• 部分复杂CSS样式（如特殊滤镜、未完成的动画效果）可能无法被完美还原，需根据实际情况测试调整。

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