根据帮助文档中的新语法重写 html2canvas答案

【问题标题】：Rewrite html2canvs accrding to the new syntax in help docs根据帮助文档中的新语法重写 html2canvas
【发布时间】：2015-07-29 09:33:54
【问题描述】：

我刚刚下载了 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);

【问题讨论】：

标签： javascript jquery html canvas html2canvas

【解决方案1】：

您所指的新语法只是 promise 的返回，它允许异步执行代码并且不需要事件侦听器（即 onrendered）。

所以唯一的 * 改变的是这个回调，你现在应该把它包裹在then()method 中。其他选项应该仍然相同，语法仍然是一个包含这些选项作为键的对象：

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

▶︎ fiddle

_{* 其他一些事情可能已经改变，但在您的特定情况下，这似乎无关紧要}

【讨论】：

【解决方案2】：

我找不到您参考的帮助文档，但您尝试过吗？

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);

【讨论】：