如何在所有匹配的jQuery对象上使用html2canvas

Question

如何在jquery中捕获所有生成的div id并为每个div id生成一个图像？

PHP

foreach(range(1,$count) as $pin){
            echo "<div class='invite col-lg-6 col-xs-6' id='".$prefix.$pin."'>";

JQUERY

$(".invite").each(function(i){
            var elm = $(this).attr('id');
            console.log(elm);
            var w = "600";
            var h = "300";
            var type = "png";
            var filename = "invite";
            html2canvas(elm).then(function(canvas){
                var canWith = canvas.with;
                var canHeight = canvas.height;
                var img = Canvas2Image.convertToImage(canvas, canWith, canHeight);
                Canvas2Image.saveAsImage(canvas, w, h, type, filename);
            });
    });

我的解决方案不起作用。捕获数组中的所有id，我不能一次捕获一个id来使用html2canvas lib生成div图像。

Answer 1

你使用.invite迭代each所以你必须得到不同的ID但不是全部。所以，这里根本没有任何问题。但是，我可以在您的代码示例中看到一些问题：

1. 它应该有width而不是with。
2. 它应该保存为不同的文件名但不一样。你只是将文件保存为filename，并且你用最后一个文件覆盖了该文件。
3. 你应该在html2canvas中传递元素而不是元素的id。
4. 另外，在convertToImage`中传递type

所以，它应该没有问题：

$(".invite").each(function(i){
  var elem = $(this);
  var elemId = elem.attr('id');
  var w = "600";
  var h = "300";
  var type = "png";
  var filename = "invite";
  html2canvas(elem).then(function(canvas){
    var canWidth = canvas.width;
    var canHeight = canvas.height;
    var img = Canvas2Image.convertToImage(canvas, canWidth, canHeight, type);
    Canvas2Image.saveAsImage(canvas, w, h, type, filename + '-' + elemId);
  });
});