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，但不是全部。因此，这根本没有任何问题。但是，我可以在您的代码示例中看到一些问题：

应该有width而不是with。
它应该另存为不同的文件名，但不相同。您只是将文件另存为filename，并用最后一个文件覆盖了文件。
您应该在html2canvas中传递元素而不是元素的ID。
此外，将type传递到convertToImage`

因此，它应该没有问题：

$(".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);
  });
});

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

1 个答案: