根据帮助文档中的新语法重写html2canvs

Rewrite html2canvs accrding to the new syntax in help docs

本文关键字：语法 重写 html2canvs 新语法 帮助 文档      更新时间：2023-09-26

我刚刚下载了html2canvs 0.5。给定的语法似乎与0.4

有点不同。

我更愿意遵循新的语法。我使用onrendered，因为我必须设置高度，宽度，透明度等…

html2canvas(document.getElementById('elem'), {
    onrendered: function(canvas) {
       document.getElementById('holder').appendChild(canvas);
    },
    width: widthVar,
    height: heightVar,
    background: undefined,
    letterRendering: true,
    useCORS: true
});

我的问题是我如何做相同的(设置高度，宽度，透明度等…)使用新的语法?

根据帮助文档的新语法:

document.querySelector("button").addEventListener("click", function() {
    html2canvas(document.querySelector("#elem"), {
      canvas: canVar
    }).then(function(canvas) {
       console.log('Drew on the existing canvas');
    });
}, false);

你所指的新语法只是一个承诺的返回，它允许异步执行代码，不需要事件监听器(即onrendered)。

所以唯一改变的 *的东西是这个回调，你现在应该包装在then()方法。其他选项应该保持不变，语法仍然是一个包含这些选项作为键的对象:

html2canvas(document.getElementById('elem'), {
    width: widthVar,
    height: heightVar,
    background: undefined,
    letterRendering: true,
    useCORS: true
}).then(function(canvas){
  document.getElementById('holder').appendChild(canvas);
 })

▶︎小提琴

*其他一些东西可能已经改变了，但在您的特殊情况下，它似乎无关紧要

我找不到你提到的帮助文档，但是你试过吗?

document.querySelector("button").addEventListener("click", function() {
    html2canvas(document.querySelector("#elem"), {
      canvas: canVar,
      width: widthVar,
      height: heightVar,
      background: undefined,
      letterRendering: true,
      useCORS: true
    }).then(function(canvas) {
       console.log('Drew on the existing canvas');
    });
}, false);
相关文章：