升级至html2canvas 1.0.0后在Chrome、Firefox无法截图如何解决？

嗨，这个问题其实报错信息已经给了明确提示啦——html2canvas从1.0.0版本开始彻底弃用了onrendered配置项，转而返回一个Promise对象来处理异步的截图结果，所以你原来基于回调的写法自然会失效。

问题根源 #

旧版0.4.x的html2canvas用onrendered回调来获取生成的canvas，但1.0.0遵循现代异步编程规范，改用Promise来传递结果，这是你遇到报错的核心原因。

修改后的代码示例 #

你只需要把原来的回调写法改成Promise的then链式调用，或者更简洁的async/await写法即可：

写法1：使用Promise的then链式调用

function screenshotChrome() { 
  var target = $(document.body); 
  // 调用html2canvas后直接链式调用then获取canvas
  html2canvas(target, { useCORS: true })
    .then(function(canvas) {
      // 把你原来在onrendered里的逻辑移到这里
      // 比如你原来的 canvas.UniversalT... 代码
    })
    .catch(function(error) {
      // 建议添加错误捕获，处理截图失败的情况
      console.error('截图过程出错:', error);
    });
}

写法2：使用async/await（更简洁易读）

async function screenshotChrome() { 
  try {
    var target = $(document.body); 
    // 用await等待Promise返回canvas对象
    const canvas = await html2canvas(target, { useCORS: true });
    // 这里处理生成的canvas，比如你原来的 canvas.UniversalT... 逻辑
  } catch (error) {
    console.error('截图失败:', error);
  }
}

额外注意事项 #

• 确保你的运行环境支持ES6的Promise（现代浏览器都原生支持，如果你需要兼容IE这类旧浏览器，可能需要引入Promise polyfill）
• useCORS选项在1.0.0版本中仍然有效，但如果需要截图跨域图片，一定要确保目标图片的服务器配置了正确的CORS响应头，否则截图会失败
• 如果你原来的canvas.UniversalT...是依赖第三方库的方法，记得确认该库与新版html2canvas返回的canvas对象兼容（一般来说不会有问题，但如果出现异常可以优先排查这里）

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