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

Question

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

Answer 1

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

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

Answer 2

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

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

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

▶︎ fiddle

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

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

Rewrite html2canvs accrding to the new syntax in help docs

html

javascript

jquery

canvas

html2canvas