使用html2canvas生成图片时CSS背景图未被包含的问题求助

我使用html2canvas生成社交媒体图片，但导出的图片里没有CSS背景图。已经试过Stack Overflow上的各种方案，用的是最新版html2canvas，哪怕用同源图片也解决不了问题，请问哪里操作错了？

核心问题 #

html2canvas默认对跨域资源的处理有严格限制，你使用的背景图来自外部域名，未配置跨域相关参数是导致背景图无法被捕获的主要原因。

修改步骤 #

调用html2canvas时添加以下关键配置，允许跨域资源加载并正确渲染背景图：

• useCORS: true：启用跨域资源共享支持，允许加载跨域图片
• allowTaint: true：允许画布被跨域资源污染（当useCORS无法获取资源时启用）
• backgroundColor: null：保留元素原本的背景色设置，避免默认白色覆盖自定义背景

修改后的完整JS代码 #

function getCapture(){
  // 添加html2canvas跨域及背景配置
  html2canvas(document.querySelector(".quote"), {
    useCORS: true,
    allowTaint: true,
    backgroundColor: null
  }).then(canvas => {
    
    var quote = document.querySelector(".quote");

    document.body.appendChild(canvas);

    var download = document.getElementById("download");
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    download.setAttribute("href", image);
    download.setAttribute("download","quote.png");

    download.click();

  });
}

$(function(){
  
  $('.generator [name="author"]').keyup(function(){
    var author = $(this).val();
    $('.quote .text small').html('⚊ ' + author);
  });
  
  $('.generator [name="quote"]').keyup(function(){
    var quote = $(this).val();
    $('.quote .text p').html(quote);
  });
  
  $('.generator [name="image"]').on('change', function(){
  
    var input = this;
    var url = $(this).val();
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
     {
        var reader = new FileReader();
        reader.onload = function (e) {
           $('.quote img').attr('src', e.target.result);
        }
       reader.readAsDataURL(input.files[0]);
    }else{
      $('.quote img').attr('src', '');
    }
    
  });
  
});

备选方案（若跨域配置仍无效） #

将背景图转换为base64编码直接写入CSS，彻底规避跨域问题：

.quote{
  /* 替换原background-image为目标图片的base64编码 */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
  /* 其他原有样式保持不变 */
}

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